10 odtwarzaczy audio jQuery HTML5

10 odtwarzaczy audio jQuery HTML5

Według Buzz Angle Music, w samych Stanach Zjednoczonych w pierwszym kwartale 2017 roku zużyto łącznie 83 miliardy strumieni audio. Oznacza to wzrost o 61,2% w porównaniu z poprzednim kwartałem. W międzyczasie sprzedaż muzyki spadła o 23,8%.

8 maja 2017: Ten popularny artykuł został zaktualizowany, aby odzwierciedlić aktualnie dostępne odtwarzacze audio i wtyczki.

Jedną z zalet przesyłania strumieniowego jest to, że publiczność może cieszyć się ulubioną muzyką i transmisjami online, nie martwiąc się o przestrzeń dyskową na swoich urządzeniach. Coraz więcej osób, zwłaszcza młodsze pokolenie, odkrywa tę wygodę, ponieważ dostępność niedrogiego Internetu dociera do coraz większej liczby osób.

Jeśli chcesz zająć się biznesem strumieniowym, możesz zrobić o wiele gorzej niż przejrzeć listę odtwarzaczy audio HTML5, które skompilowałem.

MediaElement

Obecnie jeden z najlepszych odtwarzaczy multimedialnych typu open source dla witryn internetowych, MediaElement.js obsługuje zarówno wideo, jak i audio. MediaElement.js może odtwarzać multimedia ze źródeł lokalnych i zewnętrznych, takich jak SoundCloud, YouTube, DailyMotion, Vimeo i Twitch. Można go skonfigurować za pomocą Vanilla JavaScript, jQuery, Node, Meteor, Require.js i React.

Powodem, dla którego umieściłem ten odtwarzacz multimedialny na pierwszym miejscu, jest to, że wciąż jest w fazie aktywnego rozwoju. Oznacza to, że problemy zostaną rozwiązane szybciej i prawdopodobnie będzie na bieżąco z najnowszymi standardami HTML5 i obsługą przeglądarek.

2. SoundManager 2

SoundManager2

SoundManager 2 został stworzony, aby ułatwić dostarczanie dźwięku na platformy stacjonarne i mobilne. Ma potężny interfejs API, który używa dźwięku HTML5, jeśli jest obsługiwany, i opcjonalnie wraca do Flasha w razie potrzeby. Nie ma zewnętrznych zależności i może być używany z innymi strukturami JavaScript, takimi jak jQuery. Dokumentacja jest na najwyższym poziomie, co pozwala programistom skonfigurować ją do swoich potrzeb. Obsługuje listy odtwarzania, a wiele skórek jest dostępnych po wyjęciu z pudełka. Niektóre z korzystających z niego witryn to Last.fm i BeatsMusic.

Rozwój tego odtwarzacza audio zwolnił, ale społeczność open source wykonuje świetną robotę, rozwiązując problemy zgłaszane przez użytkowników. Sound Manager 2 jest naprawdę dobrze zaprojektowany i nadal jest kompatybilny z najnowszymi standardami przeglądarek. Obecnie obsługuje wszystkie główne przeglądarki, w tym IE6, Safari i Android.

3. React-jPlayer

React-jPlayer

Jeśli szukasz wersji jPlayera, która nie jest zależna od jQuery, to masz szczęście (to znaczy, jeśli jesteś programistą React). React-jPlayer to bardzo nowy wpis mocno inspirowany jPlayerem. Obecnie obsługuje zarówno dźwięk, jak i wideo. Obsługiwane są nowoczesne przeglądarki z IE9 i wszystkie nowoczesne platformy mobilne. Oznacza to, że starsze przeglądarki, takie jak IE6 i IE7, nie są obsługiwane (nic wielkiego). Nie używa Flasha jako rozwiązania zastępczego, ponieważ mają iOS i Chrome oficjalnie zrezygnował z poparcia dla tego.

Wygląda na to, że projekt rozpoczął się kilka miesięcy temu iw ciągu ostatniego miesiąca uzyskał już 520 pobrań. Z dostarczonej wersji demonstracyjnej wynika, że ​​wszystkie funkcje działają poprawnie zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Jednak listy odtwarzania nie są obecnie obsługiwane. Zostanie to zaimplementowane w nadchodzącym pakiecie o nazwie React-jPlaylist.

Będąc projektem Reacta, w oczywisty sposób nakłada to ograniczenie na użycie w innych frontendowych frameworkach JavaScript, takich jak Vue.js. Ma jednak ogromną liczbę konfigurowalnych funkcji, dzięki czemu idealnie nadaje się do tworzenia nowej, nowoczesnej witryny internetowej do strumieniowego przesyłania muzyki.

4. Odtwarzacz audio HTML5 z listą odtwarzania

Odtwarzacz audio HTML5 z listą odtwarzania

Ten niezwykle popularny odtwarzacz audio HTML5 oferuje użytkownikom niezwykłą liczbę opcji. Obsługuje szeroką gamę funkcji i wygląda tak, jak pokazano na stronie podglądu na żywo, w tym pełnoekranowy pokaz slajdów. Wśród wielu jego funkcji jest to, że obsługuje wyskakujące okienka, które pozwalają odwiedzającym kontynuować przeglądanie witryny bez przerywania strumienia audio. Na tej samej stronie obsługiwanych jest również wiele wystąpień odtwarzacza audio.

5. FullWidth Audio Player

Odtwarzacz audio o pełnej szerokości

To jest wtyczka WordPress, która przekształca standardową witrynę WordPress w witrynę muzyczną. Jest w pełni responsywny i oferuje możliwość dodawania list odtwarzania i utworów do strony lub posta. Obsługuje również wyskakujące okienka dla nieprzerywalnego odtwarzania multimediów. Możesz dodać FullWidth Audio Player u dołu na dowolnej stronie WordPress lub poście za pomocą skrótów. Obsługiwany jest również SoundCloud.

6. Zoomsounds

Zoomsounds

To responsywny, gotowy do pracy z siatkówką odtwarzacz audio HTML5, który jest dostarczany z 3 skórkami po wyjęciu z pudełka. Obsługiwane są wszystkie przeglądarki mobilne i nowoczesne, w tym IE7 +. Obsługuje odtwarzanie dźwięku z YouTube, a także SoundCloud. Programiści mogą dostosować interfejs gracza za pomocą SASS lub CSS. Twórca komponentu udostępnił również wersję WordPress.

7. Royal Audio Player

Royal Audio Player

To odtwarzacz audio i wideo dla tych, którzy chcieliby zabawiać swoich gości on-line stylowym odtwarzaczem audio. Jest responsywny i obsługuje wszystkie nowoczesne przeglądarki i platformy mobilne. Posiada rozbudowane API, które obsługuje YouTube, SoundCloud, Podcasty, Official.fm, SHOUTcast i Icecast. Obsługuje również źródła zewnętrzne, takie jak Dysk Google i Amazon S3. W chwili pisania tego projektu ten projekt został niedawno zaktualizowany. Jakość wsparcia wydaje się być na najwyższym poziomie, ponieważ deweloperowi zależy na szybkim rozwiązywaniu problemów, gdy się pojawią.

8. jPlayer 2

jPlayer 2

jPlayer 2 to wtyczka audio i wideo jQuery z obsługą HTML5 i Adobe Flash jako rezerwę. Obsługuje wszystkie główne przeglądarki, w tym IE6 +, Safari, Chrome, Mozilla, IOS, Android i Blackberry. Jego dokumentacja jest obszerna, co pozwala programistom dostosować ją do swoich potrzeb. Obsługuje listy odtwarzania, a wiele motywów jest dostarczanych po wyjęciu z pudełka. Jest używany przez organizacje takie jak Pandora, BBC i Aljazeera.

Niestety, ta wspaniała wtyczka została zaniedbana przez społeczność open source. Problemy się piętrzyły i szybko ustępuje on współczesnym standardom przeglądarek. Jest jednak dobra wiadomość. Plany na jPlayer 3 są już w toku. Celem jest wprowadzenie szeregu ulepszeń, w tym usunięcie zależności jQuery, co pozwoli na użycie go w większej liczbie środowisk.

9. Gear HTML5 Audio Player

Gear HTML5 Audio Player

Gear to nie z tego świata, oparty na jQuery odtwarzacz audio HTML5 z oszałamiającym interfejsem użytkownika. Posiada płynne animacje SVG, unikalny korektor kanwy i obsługę SoundCloud. Ma responsywną konstrukcję mobilną, listę odtwarzania JSON, okrągły trackback i zadokowany mini odtwarzacz. Stylizacja jest wykonana z LESS. Przypadkowo SoundManager 2 jest jednym z projektów wykorzystanych do skonstruowania tego pięknego odtwarzacza audio.

10. tPlayer - odtwarzacz audio dla WordPress

Wtyczka audio tPlayer WordPress

tPlayer to odtwarzacz WordPress oparty na jQuery. Obsługuje odtwarzanie plików audio MP3, a także przesyłanie strumieniowe z SoundCloud, SHOUTcast i Icecast. Ma świetny projekt UX na tabletach i smartfonach oraz zawiera animację SVG. W odtwarzaczu znajdują się również linki do kupowania i pobierania.

Owijanie wszystkiego

Ta lista zawiera jedne z najlepszych dostępnych obecnie odtwarzaczy audio typu open source i komercyjnych. Pomimo tego, że tytuł tego artykułu dotyczy odtwarzaczy audio jQuery, istnieje generalna zmiana polegająca na usunięciu zależności jQuery z kodu źródłowego. Ma to na celu umożliwienie integracji odtwarzacza audio z większą liczbą frameworków JavaScript, w których jQuery nie jest pożądane.

Wybierając odtwarzacz audio do swojej witryny internetowej, należy zwrócić uwagę na częstotliwość aktualizacji. Dzieje się tak, ponieważ przeglądarki są aktualizowane, co czasami psuje niektóre funkcje używane przez odtwarzacz audio.

Komercyjne odtwarzacze audio HTML5 są świetne, jeśli zawierają docelowe funkcje potrzebne do Twojej witryny. Zwykle są dostarczane z kilkoma skórkami, a także z możliwością dalszego dostosowywania za pomocą CSS. Odtwarzacze audio HTML5 o otwartym kodzie źródłowym są również świetne, jeśli masz ograniczony budżet lub po prostu chcesz poeksperymentować. Licencja typu open source pozwala w pełni dostosować funkcje poprzez dodanie nowego kodu lub bibliotek innych firm w celu stworzenia nowego typu odtwarzacza audio z unikalnymi funkcjami.

Ta lista może nie być wyczerpująca, ale mam nadzieję, że przynajmniej da ci przedsmak tego, co jest tam dostępne. Czy masz wtyczkę, którą możesz polecić? Czy tęskniłem za twoim ulubionym odtwarzaczem audio? Dajcie znać w komentarzach!

A jeśli podobało Ci się to i chcesz stworzyć własny dźwięk, możesz obejrzeć nasz screencast dotyczący rozpoczynania pracy z interfejsem API Web Audio.

Możesz być również zainteresowany