Лучшие 10 аудио плееров на html5 и jQuery

Просмотры: 52457
Комментарии: 1
Лайки: 20
Javascript и Ajax

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

Одним из преимуществ потоковой передачи является то, что аудитория может наслаждаться своей любимой музыкой в режиме онлай, не беспокоясь о памяти на своих устройствах. Все больше людей, особенно молодое поколение, обнаруживают это удобство, поскольку интернетом пользуются все больше и больше.

1. MediaElement.js

В настоящее время один из лучших медиа-плееров с открытым исходным кодом для сайтов. 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 тоже великолепны, если у вас ограниченный бюджет или вы просто хотите поэкспериментировать. Лицензия с открытым исходным кодом позволяет полностью настраивать функции, добавляя новый код или сторонние библиотеки, чтобы создать новый тип аудиоплеера с уникальными функциями.

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

© https://www.sitepoint.com/10-jquery-html5-audio-players/

Спасибо, что долистали до конца!

Поставь лайк и оцени статью, ведь я старался

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

No rating
4,0(17)

Нужна реализация этого решения на вашем сайте?

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

Обратиться за помощью

Комментарии

Подписаться
Уведомить о
guest
1 Комментарий
Владимир
Владимир
5 лет назад

Привет. Я использую wmplayer.biz Они принимают сайты почти всех тематик, есть возможность монетизации трафика, неплохие шаблоны, хорошая техподдержка

Кисамеев Логотип
Не в сети
Услуги