5. 5. Редакція Аудіоплеєр
6. 6. Zoomsounds
8. 8. jPlayer 2
9. 9. Gear HTML5 Audio Player
10. 10. tPlayer - Аудіоплеєр для WordPress
11. висновок

Згідно Buzz Angle Music, в першому кварталі 2017 року США було спожито всього 83 мільярди аудіопотоків. Це на 61,2% більше, ніж в попередньому кварталі. Тим часом продажі музики впали на 23,8%.

Одним з переваг потокової передачі є те, що аудиторія може насолоджуватися своєю улюбленою музикою в режимі онлай, не турбуючись про пам'ять на своїх пристроях. Все більше людей, особливо молоде покоління, виявляють це зручність, оскільки інтернетом користуються все більше і більше.

В даний час один з кращих медіа-плеєрів з відкритим вихідним кодом для сайтів. MediaElement.js підтримує як відео, так і аудіо і здатний відтворювати мультимедійні дані зі своїх і сторонніх джерел, таких як SoundCloud, YouTube, DailyMotion, Vimeo і Twitch. Він може бути налаштований з використанням ванільного JavaScript, jQuery, Node, Meteor, Require.js і React

Причина, по якій я оцінив цей медіаплеєр, - це те, що він все ще активно розвивається. Це означає, що проблеми будуть усунені швидше, і, швидше за все, вони будуть оновлені до останніх стандартів HTML5 і підтримкою браузера.

Посилання CDN:
http://www.jsdelivr.com/projects/mediaelement
https://cdnjs.com/libraries/mediaelement

2. SoundManager 2

SoundManager 2 створений для спрощення аудіо на настільні і мобільні платформи. Він має потужний API, який використовує HTML5 аудіо, де підтримується, і, при необхідності, повертається назад в Flash. Він не має зовнішніх залежностей і може використовуватися з іншими фреймворками JavaScript, такими як jQuery. Документація є найвищою оцінкою, що дозволяє розробникам налаштовувати її для своїх потреб. Він підтримує списки відтворення і безліч скінів доступні з збірки. Деякі з цих веб-сайтів використовують Last.fm і BeatsMusic.

Розвиток цього аудіоплеєра сповільнилося, але співтовариство з відкритим вихідним кодом відмінно справляється з вирішенням проблем, про які повідомляють користувачі. Sound Manager 2 дійсно добре розроблений і, як і раніше сумісний з останніми стандартами браузера. В даний час він підтримує всі основні браузери, включаючи IE6, Safari і Android.

3. React-jPlayer

Якщо ви шукаєте версію jPlayer, яка не має залежності від jQuery, тоді вам пощастило (тобто, якщо ви розробник React). В даний час він підтримує як аудіо, так і відео. Підтримуються сучасні браузери від IE9 і всіх сучасних мобільних платформ. Це означає, що старі браузери, такі як IE6 та IE7, не підтримуються (неважливо). Він не використовує Flash як резерв, так як iOS і Chrome офіційно відмовилися від підтримки.

Проект, схоже, був запущений кілька місяців тому, і він вже отримав 520 завантажень за останній місяць. З представленої демонстрації всі функції, як видається, працюють правильно як на настільних, так і на мобільних пристроях. В даний час плейлисти не підтримуються. Це буде реалізовано в наступному пакеті з ім'ям react-jPlaylist.

Будучи проектом React, це, очевидно, обмежує використання в інших інтерфейсних JavaScript-фреймах, таких як Vue.js. Однак у нього є величезна кількість параметрів функцій, що робить його ідеальним для створення нового сучасного веб-сайту для потокової передачі музики.

демо завантажити

4. Аудіоплеєр HTML5 з плейлистом

Цей надзвичайно популярний аудіоплеєр HTML5 приносить чудове кількість можливостей користувачам. Він підтримує широкий спектр функцій і виглядає так, як показано на сторінці попереднього перегляду, включаючи повноекранне слайд-шоу.

Підтримує спливаючі вікна, що дозволяють відвідувачам продовжити перегляд вашого сайту без переривання аудиопотока. Кілька примірників аудиоплеера також підтримуються на одній сторінці.

Посилання на сайт демо

5. Редакція Аудіоплеєр

Це плагін WordPress, який перетворює ваш стандартний сайт WordPress в музичний сайт. Він повністю реагує і має можливість додавати плейлисти і треки на сторінку. Він також підтримує спливаючі вікна для відтворення без переривання відтворення. Ви можете додати FullWidth Audio Player внизу на будь-яку сторінку WordPress або опублікувати за допомогою коротких кодів. SoundCloud також підтримується.

Посилання на сайт демо

6. Zoomsounds

Це чуйний, готовий сітківки, аудіоплеєр HTML5, який поставляється з 3 скінами з збірки. Підтримуються всі мобільні і сучасні браузери, включаючи IE7 +. Він підтримує відтворення аудіо з YouTube, а також SoundCloud. Розробники можуть налаштовувати користувальницький інтерфейс гравця через SASS або CSS. Розробник компонента також надав версію WordPress.

Посилання на сайт демо

7. Royal Audio Player

Це аудіо і відеоплеєр для тих, хто хотів би розважати своїх онлайн-відвідувачів стильним аудіоплеєром. Він реагує і підтримує всі сучасні браузери і мобільні платформи. Він має великий API, який підтримує YouTube, SoundCloud, Podcasts, Official.fm, SHOUTcast і Icecast. Він також підтримує зовнішні джерела, такі як Google Диск і Amazon S3.

На момент написання цього проекту недавно був оновлений цей проект. Якість підтримки здається найвищим, оскільки розробник дуже швидко вирішує проблеми по мірі їх виникнення.

Посилання на сайт демо

8. jPlayer 2

JPlayer 2 - це аудіо і відео плагін jQuery з підтримкою HTML5 і Adobe Flash в якості резервного. Він підтримує всі основні браузери, включаючи IE6 +, Safari, Chrome, Mozilla, IOS, Android і Blackberry. Його документація обширна, що дозволяє розробникам налаштовувати її на свої потреби. У ньому є підтримка плейлистів, і кілька тем надаються з коробки. Він використовується такими організаціями, як Pandora, BBC і Aljazeera.

На жаль, цей великий плагін нехтував співтовариством open-source. Проблеми нагромадилися і швидко відстають від сучасних стандартів браузера. Однак є хороші новини. Плани для jPlayer 3 вже ведуться. Мета полягає в тому, щоб принести ряд поліпшень, включаючи видалення залежності jQuery, що дозволяє використовувати її в інших середовищах.

Посилання на сайт завантажити

9. Gear HTML5 Audio Player

Gear - це аудіо-плеєр з підтримкою HTML без звуку, заснований на jQuery, з приголомшливим призначеним для користувача інтерфейсом. Він має гладку анімацію SVG, унікальний еквалайзер полотна і підтримку SoundCloud. Він має мобільний чуйний дизайн, плейлист JSON, кругової трекбек і пристикований міні-плеєр.

До речі, SoundManager 2 зараховується як один з проектів, які використовуються для створення цього прекрасного аудіоплеєра.

Посилання на сайт демо

10. tPlayer - Аудіоплеєр для WordPress

TPlayer - це плеєр на основі jQuery для WordPress. Він підтримує відтворення аудіофайлів MP3, а також потокову передачу з SoundCloud, SHOUTcast і Icecast. Він має великий дизайн UX на планшетних і смартфони пристроях і включає в себе анімацію SVG.

Посилання на сайт демо

висновок

Цей список дає вам деякі з кращих відкритих і комерційних аудіоплеєрів, доступних в даний час. Незважаючи на те, що назва цієї статті відноситься до аудіоплеєр jQuery, зазвичай відбувається перехід на видалення залежності jQuery від вихідного коду. Це дозволить інтегрувати аудіоплеєр в рамки JavaScript, де jQuery не потрібно.

Вибираючи аудіоплеєр для вашого сайту, ви повинні бути зацікавлені в тому, як часто він отримує оновлення. Це відбувається тому, що браузери оновлюються, що іноді ламає деякі функції, які використовуються аудіоплеєром.

Комерційні аудіоплеєри HTML5 відмінно підходять, якщо вони містять цільові функції, необхідні для вашого сайту. Зазвичай вони поставляються з декількома скінами, а також можливістю налаштовувати ще більше за допомогою CSS. Абоненти з відкритим вихідним кодом HTML5 теж чудові, якщо у вас обмежений бюджет або ви просто хочете поекспериментувати. Ліцензія з відкритим вихідним кодом дозволяє повністю налаштовувати функції, додаючи новий код або сторонні бібліотеки, щоб створити новий тип аудіоплеєра з унікальними функціями.

Цей список не може бути всеосяжним, але я сподіваюся, що, по крайней мере, він дає вам уявлення про те, що є там. У вас є плагін, щоб рекомендувати? Я пропустив ваш улюблений аудіоплеєр? Дай мені знати в коментарях!