<
  • Главная
Статьи

Кращі 10 аудіо плеєрів на html5 і jQuery

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

Згідно 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

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

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

3. React-jPlayer

React-jPlayer

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Zoomsounds

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

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

7. Royal Audio Player

Royal Audio Player

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

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

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

8. jPlayer 2

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 HTML5 Audio Player

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

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

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

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

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

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

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

висновок

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

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

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

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

У вас є плагін, щоб рекомендувати?
Я пропустив ваш улюблений аудіоплеєр?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью