Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML5
Code

15 найкращих HTML5 аудіоплеєрів

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Dmitriy Sirosh (you can also view the original English article)

На щастя, HTML5 став стандартом для мультимедійного веб-дизайну. Зникли дні головного болю додатків Flash та Silverlight, тому, що підтримка HTML5 елементів для аудіо та відео принесла стандарт на всі платформи, не кажучи вже про переваги SEO та автономного кешування.

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

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

1. Audio Waveform Player зі списком відтворення

Аудіоплеєр Audio Waveform Player зі списком відтворення один з моїх улюблених HTML5-аудіоплеєрів. Він запозичує деякі елементи дизайну з програвача SoundCloud та має деякі додаткові можливості, корисні для тих, у кого є власне аудіо.

Audio Waveform Player with Playlist

Це повністю адаптивний програвач має такі корисні параметри:

  • час початку та закінчення
  • завантажити аудіо
  • швидкість відтворення
  • обмін в соцмережах
  • списки відтворення
  • спливаючі підказки
  • і багато іншого

Відмінне рішення для подкастів, музичних груп та іншого. Для аудіо, яке розміщене на Google Диску, Amazon S3 та навіть SoundCloud.

З його надійним API й доступними зворотними викликами (callbacks) ви знайдете Audio Waveform Player зі списком відтворення, добре спроектованим та потужним.

2. HTML5 Audio Player зі списком відтворення

Аудіоплеєр HTML5 Audio Player зі списком відтворення це ще один потужний варіант.

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

HTML5 Audio Player with Playlist

У число функцій входять:

  • підтримка списків відтворення XML, HTML або баз даних
  • автоматичне створення плейлистів з папок
  • сортування і перетягування елементів списку відтворення
  • змішування декількох списків відтворення/пісень
  • підтримка декількох екземплярів
  • запасний варіант на Flash
  • і багато іншого

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

HTML5 Audio Player зі списком відтворення цілком може бути самим адаптивним HTML5 аудіоплеєром.

3. MP3 Sticky Player

Найкраще в MP3 Sticky Player це те, що він ... «липкий»!

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

MP3 Sticky Player

Деякі його інші важливі функції:

  • підтримує Google Drive, Amazon S3 і всі сервіси й сервери, які дозволяють доступ до mp3 потоків
  • завантаження списків відтворення з XML, HTML, папок mp3, подкастів, YouTube або SoundCloud
  • так само підтримує mp4 та YouTube відео
  • підтримує змішані списки відтворення
  • додаткові зовнішні посилання
  • і багато іншого

Ви знайдете безліч опцій та шість різних обкладинок в доданому PSD файлі.

Плеєр MP3 Sticky може ідеально "прилипнути" до вашого веб-сайту, як HTML5 аудіоплеєр.

4. sPlayer - чудовий музичний плеєр на HTML5

sPlayer - музичний супер плеєр на HTML5 який розмиває кордони між аудіоплеєром для робочого столу і веб-сайту:

sPlayer - Super HTML5 Music Player

«SPlayer просуває HTML5 до граничного рівня, це напевно перший музичний програвач HTML5 в своєму роді, роблячи його самою багатофункціональною бібліотекою JavaScript Audio».

Особливості:

  • підтримка безлічі списків відтворення
  • живе мовлення та радіо
  • набір іконок для музичних жанрів
  • живий пошук
  • посилання «поділитися»

Ви навіть можете імпортувати локальну музику з ID3 тегами й всім іншим.

Від Інтернету на робочий стіл, повна підтримка мобільних пристроїв, працює з багатьма аудіо форматами (mp3, ogg, oga, aac, m4a, and mp4), sPlayer - супер музичний плеєр на HTML5 готовий для вас.

5. Все в одному Аудіо та Радіо плеєр

Якщо ви хочете відтворити одну пісню, створити список відтворення або потокове аудіо, All-One Audio та Radio Player готові до трансляції.

All in One Audio and Radio Player

Цей привабливий плеєр підтримує:

  • потокове мовлення AAC і AAC +
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  • iTunes
  • MP3
  • OGG
  • Wav

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

Деякі з особливостей:

  • підтримка мобільних сенсорних пристроїв та управління клавіатурою
  • підтримка фонового зображення і CSS градієнту
  • потужне API й детальна документація
  • можна використовувати кілька примірників на одній сторінці
  • та багато іншого

All in One Audio й Radio Player - винятковий варіант для аудіо програвача на HTML5.

6. Адаптивний аудіоплеєр HTML5 PRO зі списком відтворення

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

Ще у нього є версія з модулем для WordPress.

Responsive HTML5 Audio Player PRO With Playlist

Деякі з його найкращих функцій містять у собі:

  • параметри завантаження і випадкового відтворення
  • поділитися (share) в соціальних мережах
  • категорії списків відтворення
  • функція пошуку
  • та інше

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

Якщо шукаєте надійний аудіоплеєр на HTML, який можна налаштувати під ваше оформлення, то уважно ознайомтеся з Responsive HTML5 Audio Player PRO зі списком відтворення.

7. ProgressionPlayer - адаптивний аудіо/відео програвач

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

ProgressionPlayer - Responsive AudioVideo Player
«Призначені для користувача Flash та Silverlight програвачі, які імітують HTML5 MediaElement API для старих браузерів»

Функції включають:

  • необмежену кількість примірників програвача на сторінці
  • містить п'ять обкладинок
  • списки відтворення аудіо
  • підтримка retina
  • та інше

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

Версія для WordPress також доступна.

8. Single jQuery Audio Player (музика і радіо)

Завдяки своєму легкому дизайну та унікальним функціям Single JQuery Audio Player (музика і радіо) це відмінне рішення для потокового мовлення й музичних виконавців.

Кожен екземпляр плеєра може бути налаштований по-різному, використовуючи його корисний API додатків:

  • пряме завантаження
  • музика з Apple та Amazon
  • редагування назви, ім'я виконавця та обкладинки
Single jQuery Audio Player Music and Radio

Ось деякі з його корисних функцій:

  • Shoutcast, Icecast, SoundCloud та підтримка радіо/живого мовлення
  • підтримує MP3, OGG і WAV
  • детальна документація
  • підтримує сенсорний дотик
  • та інше

Найкраще те, що він автоматично припиняє та зупиняє відтворення при запуску нового плеєра на тій же сторінці.

З його мінімалістичним дизайном та потужним API, Single jQuery Audio Player (музика і радіо) є одним з кращих аудіоплеєрів на HTML5 для музикантів і потокового мовлення.

9. DS SoundCloud Custom Music Player

Якщо ви любите SoundCloud, але хочете використовувати свій власний стилізований плеєр, вам потрібен DS SoundCloud Custom Music Player.

DS SoundCloud Custom Music Player
"DS SoundCloud Music Player - це динамічний додаток jQuery, призначений для автономної потокової передачі аудіо на веб-сайтах з використанням HTML5 та jQuery. Він розроблений на основі технології SoundCloud і може використовуватися як заміна для вбудованих програвачів SoundCloud."

Особливості:

  • легкий, хмарний і без Flash
  • автозбір даних з SoundCloud
  • інтеграція з Facebook і Twitter
  • підтримка власних списків відтворення
  • та інше

DS SoundCloud Custom Music Player є чудовою альтернативою програвача SoundCloud за замовчуванням, з невеликими доповненнями.

10. Clean HTML Audio Player зі списком відтворення

Легкий і простий.

Чистий програвач аудіо Clean HTML Audio Player зі списком відтворення.

Clean HTML Audio Player with Playlist

Розмістити у себе або вести мовлення, цей плеєр може впоратися з цим.

Деякі інші функції:

  • підтримка списків відтворення та кількох примірників
  • проста ініціалізація в HTML з атрибутами даних
  • повністю адаптивний і підходить для retina пристроїв
  • та інше

Clean HTML Audio Player зі списком відтворення, простий, і, як свідчить назва, охайний аудіоплеєр.

11. Easy Audio Player

Easy Audio Player - це цілісний, добре округлений простий аудіоплеєр, який можна налаштувати на свій смак.

Він включає повну підтримку API та оптимізований для мобільних пристроїв.

Easy Audio Player

Додаткові функції:

  • всі кнопки не є обов'язковими, налаштовуєте, як вам подобається
  • додаткова привітальна анімація (не обов'язково)
  • детальна документація
  • чотири обкладинки з PSD файлами
  • запасний варіант Adobe Flash
  • та інше

Easy Audio Player - простий в налаштуванні, простий у використанні.

12. tPlayer - аудіоплеєр (зі списком відтворення) v1.5

tPlayer - цей аудіоплеєр (зі списком відтворення) v1.5 мені особливо подобається, тому що він добре оформлений і виглядає сучасно.

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

tPlayer - audio player with playlist v15

Деякі з його особливостей:

  • обмін в соцмережах на Facebook, Twitter, Google+ та Tumblr
  • компактний режим і приховування списку відтворення
  • включає можливість придбання або посилання для завантаження
  • режими по одиничного програвання та списку відтворення
  • зміна колірної схеми
  • та багато іншого

tPlayer - аудіоплеєр (зі списком відтворення) v1.5 відмінно виглядає, а також доступний для WordPress.

13. ZoomSounds - охайний аудіоплеєр на HTML5

ZoomSounds - охайний аудіоплеєр на HTML5 який добре продається зі зрозумілих причин.

Завдяки своєму дизайну, орієнтованому на SoundCloud, він пропонує кілька різних стилів та обкладинки, які полегшують проектування програвача.

ZoomSounds - Neat HTML5 Audio Player

Особливості:

  • готовий для SEO
  • оптимізований для сенсорних екранів
  • потокове youtube аудіо
  • повністю адаптивний та з підтримкою Adobe Flash (як резерв)
  • підтримка потоків SoundCloud з API ключем
  • і багато іншого

ZoomSounds - охайний аудіоплеєр на HTML5, ваше аудіо ще не виглядало так добре.

14. Аудіоплеєр Chameleon HTML5 Audio Player зі/без списку відтворення

Аудіоплеєр на HTML5 Chameleon зі/без списку відтворення, легко вбудовується в ваш сайт за допомогою налаштовуваної колірної схеми та екранних елементів.

Chameleon HTML5 Audio Player WithWithout Playlist

Додаткові можливості:

  • генерування списків відтворення з папок з файлами mp3
  • підтримує кілька примірників
  • 35+ JS параметрів
  • створений для мобільних
  • та інше

Chameleon HTML5 Audio Player With/Without Playlist також можна придбати для WordPress.

15. HTML5 Vinyl-styled Music Player

Як хтось, любить вінілові пластинки, музичний програвач на HTML5 з вініловим оформленням - це один з моїх улюблених в цьому списку.

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

Блискуче.

HTML5 Vinyl-styled Music Player

Деякі інші функції, в яких ви також можете бути зацікавлені:

  • створити список відтворення або вибрати довільний режим
  • оптимізований для сенсорних пристроїв та повністю адаптивний
  • змінити швидкість відтворення, налаштування повторення або випадкове відтворення
  • автоматичне завантаження тегів та обкладинок
  • та інше

HTML5 Vinyl-styled Music Player просто найкращий аудіоплеєр на HTML5, який ви можете знайти.

Висновок

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

На Envato Tuts+ ви знайдете всілякі корисні ресурси для навчання HTML5, наприклад керівництва з HTML5, електронні книги та відеокурси. Дізнайтесь, що таке HTML5? Почніть з декодування HTML5, а також ознайомтеся з додатковими курсами HTML5.

Яка функція аудіоплеєра на HTML5 найбільш важлива для вас?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.