Содержание

HTML5 Audio Player для воспроизведения музыки и плейлиста

Резюме: По мере широкого использования HTML5 во всемирной сети связанных приложений с HTML5 становится все более широким. Аудиоплеер HTML5 также озадачивает многих пользователей при просмотре веб-сайтов. В этом посте мы обсудим, что такое аудиоплеер HTML5? Как работает аудиоплеер HTML5 и какой-либо бесплатный аудиоплеер HTML5 с открытым исходным кодом или код для воспроизведения плейлиста в аудиоплеере HTML5.

HTML5 Audio Player

  • Что такое аудиоплеер HTML5
  • Как работает аудиоплеер HTML5
  • HTML5 аудиоплеер приложения для воспроизведения музыки

HTML5 аудиоплеер

С введением HTML5 аудио тег распространился очень быстро и очень хорошо совместим с современными браузерами. Вы можете использовать аудио тег для добавления звука и музыки на веб-сайте. Аудио тег поддерживает 3 типа аудио файлов: MP3, WAV и OGG. Аудиоплеер HTML5 позволяет легко воспроизводить музыку через веб-сайт. Простой аудиоплеер HTML снимает нагрузку с кодирования, поэтому вы можете легко воспроизводить звук в своем браузере.

Как работает аудиоплеер HTML5

HTML5, в отличие от HTML 4 или его старой версии, закрывает аудио-плагин, такой как Microsoft Windows Media Player, Microsoft Silverlight, Apple QuickTime, Adobe Flash и т. Д. Для воспроизведения аудиофайла в HTML тег HTML5 audio должен иметь теги ‘audio’ и ‘source’.

Атрибут controls добавляет элементы управления звуком, такие как воспроизведение, пауза и громкость.

Элемент ‘source’ позволяет вам указать альтернативные аудиофайлы, которые может выбрать браузер. И браузер использует первый признанный аудиоформат.

Какие форматы поддержки браузера?

Обычно аудио HTML5 поддерживает следующие аудиоформаты, такие как MP3, OGG и WAV. Однако не все форматы поддерживаются всеми веб-браузерами.

БраузерMP3WAVOGG
Internet Explorer 9ДаДаНет
Хром 8.
ДаДаДа
Firefox 3.6НетДаДа
Safari 5.0.3ДаДаНет
Opera 10.63НетДаДа

HTML5 аудио плеер для воспроизведения музыкального файла или списка воспроизведения

Вам нужно добавить следующий код в ваш документ HTML5:

HTML5 аудиоплеер приложения для воспроизведения музыки / плейлиста

Бесплатный медиаплеер

Ссылка: https://www.aiseesoft.com/mac-media-player-for-free/

Платформа: Windows, Mac

Формат аудио: MP3, WAV, OGG, WMA, MP4, AIFF, FLAC, AAC, M4A и более 300 аудио и видео форматов.

Особенность: Если ваш веб-браузер не работает с HTML5 или Flash, вы можете загрузить аудиофайл для воспроизведения Бесплатный медиаплеер.

jplayer

Ссылка: http://jplayer.org/

Платформа: Windows, Mac, iOS, Android 2. 3, Blackberry

Формат аудио: HTML5: MP3, MP4, OGG, WebM, WAV, а Flash: MP3, MP4, FLV, RTMP

Особенность: iPlayer — это полностью бесплатная библиотека мультимедиа с открытым исходным кодом и плагином jQuery для встраивания кроссплатформенного аудио и видео в ваши веб-страницы.

Удивительный аудиоплеер

Ссылка: https://amazingaudioplayer.com/

Платформа: Windows, Mac, iPhone, iPad, Android и рабочий стол

Формат аудио: MP3

Особенность: Он воспроизводит аудиофайл MP3 напрямую или через удаленный MP3-адрес в произвольном / автоматическом / циклическом режиме, а также настраивает проигрыватель с помощью CSS.

Если вы ищете видео проигрыватель HTML5, то вам стоит посетить: HTML5 видео плеер.

В этом посте мы в основном говорим об аудиоплеере HTML5. Мы даем вам простое введение в аудиоплеер HTML5. Кроме того, мы расскажем вам, как работает аудиоплеер HTML5, и познакомим вас с несколькими замечательными приложениями аудиоплеера HTML5, которые помогут вам воспроизводить музыкальные файлы и списки воспроизведения.

Что вы думаете об этом посте.

  • 1
  • 2
  • 3
  • 4
  • 5

Прекрасно

Рейтинг: 4.8 / 5 (на основе рейтингов 20)

15 мая 2018 г. 15:00 / Обновлено Дженни Райан в Слушать аудио

Оставьте свой комментарий и присоединяйтесь к нашему обсуждению

15 лучших аудиоплееров HTML5 — CoderLessons.com

К счастью, HTML5 стал стандартом для мультимедийного веб-дизайна. Прошли времена головных болей плагинов Flash и Silverlight, поскольку поддержка HTML5 для элементов аудио и видео страниц стала стандартом для всех платформ — не говоря уже о преимуществах SEO и автономного кэширования.

Еще одним преимуществом HTML5 является простота адаптации к различным платформам. Это делает проектирование, разработку и развертывание пользовательских аудиоплееров намного проще, чем в прошлом,

и позволяет работать на настольных компьютерах, мобильных устройствах и в различных операционных системах.

Следующие 15 лучших аудиоплееров HTML5 на Envato являются отличными примерами того, насколько продвинутыми могут быть эти проигрыватели, и в то же время их легко настроить в соответствии с вашими потребностями.

Audio Waveform Player с плейлистом — один из моих любимых аудиоплееров HTML5. Он заимствует некоторые элементы дизайна из проигрывателя SoundCloud и добавляет некоторые дополнительные функции, которые полезны для тех, кто размещает свое собственное аудио.

Этот полностью адаптивный и настраиваемый плеер также включает в себя такие полезные опции, как:

  • время начала и окончания
  • загрузка звука
  • скорость воспроизведения
  • социальный обмен
  • плейлисты
  • всплывающие подсказки
  • и многое другое

Отличное решение для подкастов, групп и многого другого, для аудио, которое размещается на Google Drive, Amazon S3 и даже SoundCloud.

С его надежным API и доступными обратными вызовами вы найдете Audio Waveform Player с хорошо продуманным

и мощным плейлистом .

Аудио плеер HTML5 с плейлистом — еще одна мощная опция.

Благодаря мощному API и неограниченному внешнему виду плеера вы можете использовать этот аудиоплеер HTML5 практически любым удобным для вас способом.

Особенности включают в себя:

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

Как по форме, так и по функциям этот аудиоплеер имеет множество опций и является отличным проигрывателем для подкастов, SoundCloud и многого другого.

Аудиоплеер HTML5 с плейлистом вполне может быть наилучшим адаптивным аудиоплеером HTML5.

Самое замечательное в MP3 Sticky Player — это то, что он … липкий!

Этот мощный, отзывчивый и полностью настраиваемый аудиоплеер HTML можно легко добавить в верхнюю или нижнюю часть веб-страницы и отлично работает на всех основных браузерах и мобильных устройствах.

Некоторые другие важные функции включены:

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

Вы найдете множество вариантов и шесть различных скинов дизайна с включенными PSD-файлами.

MP3 Sticky Player может быть идеальным аудиоплеером HTML5 для размещения на вашем сайте.

SPlayer — Super HTML5 Music Player стирает грань между веб-сайтом и настольными аудиоплеерами:

«SPlayer выдвигает HTML5 до предела, это почти наверняка первый музыкальный проигрыватель HTML5 в своем роде, что делает его самой многофункциональной JavaScript Audio Library».

Особенности включают в себя:

  • поддержка нескольких списков воспроизведения
  • радио и прямой эфир
  • музыкальный жанр iconset
  • живой поиск
  • поделиться ссылками

Вы даже можете импортировать местную музыку с тегами ID3 и многое, многое другое.

От Интернета до настольного компьютера, полная поддержка мобильных устройств и несколько различных поддерживаемых аудиоформатов (mp3, ogg, oga, aac, m4a и mp4) — музыкальный проигрыватель sPlayer — Super HTML5 готов сделать его самостоятельно.

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

Этот красивый плеер поддерживает:

  • AAC и AAC + потоковое
  • SoundCloud
  • Shoutcast
  • Icecast
  • Spotify
  • Itunes
  • MP3
  • OGG
  • Wav

Благодаря различным темам и мощному API вы можете настроить этот аудиоплеер HTML5 практически любым способом, который только можете себе представить.

Некоторые функции включают в себя:

  • мобильное сенсорное управление и поддержка клавиатуры
  • поддержка фонового изображения и CSS-градиента
  • мощный API и подробная документация
  • использовать несколько экземпляров на одной странице
  • и многое другое

Все в одном аудио и радио плеер является впечатляющим вариантом для аудиоплееров HTML5.

Адаптивный HTML5 Audio Player PRO с плейлистом — хороший выбор. Благодаря полностью настраиваемому интерфейсу вы можете идеально интегрировать этот аудиоплеер в дизайн вашего сайта.

Это также входит в версию WordPress .

Некоторые из его главных особенностей включают в себя:

  • варианты загрузки и перемешивания
  • Поделиться в социальных сетях
  • категории плейлистов
  • опция поиска
  • и более

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

Чтобы получить надежный HTML-аудиоплеер, который можно настроить в соответствии с вашим собственным дизайном, обратите внимание на Отзывчивый HTML5-аудиоплеер PRO с плейлистом .

Если вам нужно добавить видео вместе со звуком, вам нужно использовать ProgressionPlayer — отзывчивый аудио / видеоплеер. Его легко настроить, он полностью адаптивен и включает в себя все основные функции, которые вам нужны в аудиоплеере HTML5.

«Пользовательские проигрыватели Flash и Silverlight, имитирующие HTML5 MediaElement API для старых браузеров»

Особенности включают в себя:

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

ProgressionPlayer — Responsive Audio / Video Player идеально подходит для нескольких экземпляров на одной странице, так как игроки автоматически прекращают играть, когда активируются другие игроки.

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

Благодаря чистому дизайну и уникальным функциям, Single jQuery Audio Player (Музыка и Радио) является отличным решением для потокового вещания и музыкальных исполнителей.

Каждый экземпляр проигрывателя может быть настроен по-разному с помощью его полезного плагина API:

  • прямая загрузка
  • Музыка Apple и Amazon
  • редактировать название, имя исполнителя и изображение

Некоторые из его других полезных функций включают в себя:

  • Поддерживаются Shoutcast, Icecast, SoundCloud и потоковое радио
  • поддерживает MP3, OGG и WAV
  • подробная документация
  • сенсорный дружественный
  • и более

Лучше всего, он автоматически приостанавливает и останавливает воспроизведение, когда на той же странице запускается новый плеер.

Single jQuery Audio Player (Music and Radio) с минимальным дизайном и мощным API-интерфейсом является одним из лучших аудиоплееров HTML5 для музыкантов и потокового вещания.

Если вы любите SoundCloud , но хотите использовать свой собственный стилизованный плеер, вам нужен DS SoundCloud Custom Music Player.

«DS SoundCloud Music Player — динамический плагин jQuery, разработанный для потоковой передачи звука на веб-сайтах с использованием HTML5 и jQuery. Он разработан на основе технологии SoundCloud и может использоваться в качестве замены для проигрывателей SoundCloud для встраивания ».

Особенности включают в себя:

  • легкий, облачный, без Flash
  • автоматическая выборка данных из SoundCloud
  • Интеграция с Facebook и Twitter
  • поддержка пользовательских списков воспроизведения
  • и более

Настраиваемый музыкальный проигрыватель DS SoundCloud — это жизнеспособная альтернатива стандартному проигрывателю SoundCloud, с небольшим добавлением.

Чисто и просто.

Чистый HTML-аудиоплеер с плейлистом — именно это.

Самостоятельно размещенный или транслируемый, этот плеер может справиться с этим.

Некоторые другие функции включают в себя:

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

Чистый HTML-аудиоплеер с плейлистом прост, понятен и, как следует из названия, чистый .

Easy Audio Player — это прочный, хорошо продуманный базовый аудиоплеер, который можно настроить по своему вкусу.

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

Дополнительные функции включают в себя:

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

Easy Audio Player прост в настройке, использовании и выборе.

Для хорошо спроектированного, современного вида аудиоплеера HTML5, tPlayer — аудиоплеер (с плейлистом) v1.5 — один из моих лучших вариантов.

Его эксклюзивная кнопка SVG, анимация и эластичная обложка, а также ползунок поиска привносят приятную радость в глаза этому чистому игроку.

Некоторые из его особенностей включают в себя:

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

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

ZoomSounds — Neat HTML5 Audio Player — самый продаваемый плеер по уважительной причине.

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

Особенности включают в себя:

  • SEO дружественный
  • оптимизированный для касания
  • потоковое аудио YouTube
  • полностью отзывчив с резервной копией Adobe Flash
  • поддерживает потоки SoundCloud с ключом API
  • и многое другое

С ZoomSounds — Neat HTML5 Audio Player , ваше аудио еще никогда не выглядело так хорошо.

Аудио-плеер Chameleon HTML5 с / без плейлиста легко впишется в ваш веб-сайт с его настраиваемой цветовой схемой и элементами на экране.

Дополнительные функции включают в себя:

  • генерировать плейлисты из папок с mp3 файлами
  • поддерживает несколько экземпляров
  • 35+ вариантов JS
  • мобильный дружественный
  • и более

Аудио-плеер Chameleon HTML5 с / без списка воспроизведения также можно приобрести для WordPress .

Как человек, который любит виниловые пластинки, музыкальный плеер в виниловом стиле HTML5 легко является одним из моих любимых в этом списке.

Мало того, что запись вытаскивается из обложки альбома, анимированная вращающаяся запись действует как колесо очистки.

Brilliant.

Некоторые другие функции, которые могут вас заинтересовать:

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

Музыкальный проигрыватель в виниловом стиле HTML5 — это, безусловно, самый крутой аудиоплеер HTML5.

Эти аудиоплееры HTML5 великолепны по форме и функциям, при этом подавляющее большинство из них позволяют полностью настраивать их в соответствии с потребностями дизайна вашего сайта. Если вы ищете что-то другое, вы можете внести изменения в один из ранее упомянутых аудиоплееров или создать свой собственный с нуля.

На Envato Tuts + вы найдете все виды полезных ресурсов для изучения HTML5, такие как учебные пособия по HTML5 , электронные книги по кодам и курсы по видеокодам . Узнайте, что такое HTML5? , начните с декодирования HTML5 , а также пройдя продвинутые курсы HTML5.

Какие функции аудиоплеера HTML5 наиболее важны для вас?

Аудиоплеер HTML5 со списком воспроизведения от Tean

Этот универсальный аудиоплеер предлагает ОГРОМНОЕ количество вариантов настройки и возможностей компоновки. Просто просмотрите демонстрационные примеры, чтобы разбудить ваше воображение.

Все демонстрационные скины включены в комплект!

Это чрезвычайно мощный аудиоплеер , который поддерживает все виды встраиваемых носителей, от аудиоформатов HTML5 до RSS-подкастов , Soundcloud музыки, для автоматического чтения папок песен, включая метаданные ID3. Чтение папок Google Drive и One Drive , общедоступных и частных корзин Amazon S3 и т. д.

Используйте этот проигрыватель в качестве стандартного проигрывателя , фиксированного внизу страницы ( липкого ) проигрывателя. Включите нескольких игроков на одной странице.

Плеер поставляется с обычными скинами , которые можно разместить в любом месте страницы, липкий плеер скины, которые представляют собой полноразмерные плееры, прикрепленные к нижней части страницы, и минимальные плееры идеально подходят для минимального дизайна макета. Это полноценный аудиоплеер, который можно использовать где угодно!

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

Функции и опции:

  • Поддержка настольных компьютеров, мобильных устройств и планшетов (полностью реагирующие и оптимизированные для мобильных устройств кнопки)
  • Широкие возможности настройки с помощью HTML и CSS!
  • Написан в плане Javascript , что означает, что он будет работать быстро на вашем сайте и не будет мешать другим скриптам.
  • Только аудиоформат mp3 , необходимый для всех браузеров и устройств (другие поддерживаемые форматы включают wav, aac, flac и т. д.)
  • Поддерживаемые источники контента :
    • Аудио плейлист
    • Подкасты RSS
    • Саундклауд
    • Плейлист из папки mp3 файлов (чтение метаданных ID3)
    • Google Диск
    • Один диск
    • Прямая трансляция Apple HLS m3u8
    • Список воспроизведения XML
    • Плейлист JSON
    • Общедоступные и частные корзины Amazon S3 с предварительно подписанным URL-адресом и Cloudfront
    • Аудио и видео музыка на Youtube (идентификатор видео, идентификатор плейлиста)
  • Варианты песни 9Поддержка 0004. Плеер может отображать несколько версий песни в плейлисте. Например, у вас может быть 3 песни в плейлисте, и у каждой песни может быть несколько вариаций (длинная версия, короткая версия и т. д.), например здесь
    • .
  • Расширенная статистика песен для версии проигрывателя WordPress (подсчет воспроизведений, лайков, загрузок) и отображение их в списке воспроизведения рядом со списком песен. Версия WordPress включает в себя полноценную панель администратора, где пользователь может просматривать всю аудиостатистику для каждого плеера и плейлиста.
  • Отображение текстов песен во время воспроизведения аудио, пример здесь
  • Песни, защищенные паролем
  • Ограничить содержимое в WordPress для зарегистрированных пользователей и определенных ролей пользователей.
  • Перекрестное затухание аудио между текущей и следующей воспроизводимой песней, пример здесь
  • Отслеживание Google Analytics
  • Объявления поддержка. Воспроизведение аудиорекламы до, во время и после воспроизведения основных песен. Глобальная реклама для плейлиста или отдельная реклама для каждой песни, пример здесь
  • IMA рекламирует поддержку , пример здесь
  • Запомнить позицию плейлиста при перезагрузке страницы (активная песня, текущее время).
  • Защитите URL-адреса песен с помощью шифрования URL-адресов и больших двоичных объектов.
  • Аудио встраивание . Встроить аудиоплеер на другой сайт.
  • Режим гармошки . Плеер может отображать список песен аккордеона, пример здесь
  • Режим сетки . Скины сетки могут создавать сетку миниатюр на странице, пример здесь
  • Поддержка нескольких экземпляров аудиоплеера на одной странице.
  • Возможность микширования различных типов мультимедиа в одном плейлисте (в одном плейлисте можно микшировать аудио, подкасты и Soundcloud)
  • Пользовательские значки списка воспроизведения . Создайте любое количество пользовательских значков в плейлисте и прикрепите URL к каждому значку
  • Варианты воспроизведения :
    • воспроизведение в случайном порядке
    • список воспроизведения циклов
    • скорость воспроизведения
    • время начала/окончания
    • Действие при завершении мультимедиа (переход к следующей песне/зацикливание текущей песни)
  • Строка запроса параметров, загружайте аудио параметры прямо в URL-адрес браузера.
  • Отзывчивые точки останова (скрыть определенные кнопки или элементы плеера на маленьких экранах)
  • Заменить WordPress по умолчанию аудиоплеер
  • Клавиатура навигации
  • Обмен в социальных сетях (facebook, twitter, tumblr… и т. д.)
  • Непрерывное воспроизведение музыки на веб-страницах:
    • путем запоминания позиции воспроизведения
    • с возможностью открыть плеер — это отдельное всплывающее окно
  • методы API для взаимодействия с проигрывателем во время выполнения
  • Обратные вызовы событий события во время воспроизведения звука
  • Рекламные обратные вызовы , которые срабатывают при воспроизведении аудиообъявлений

Щелкните изображение для просмотра демонстрации

Обновления / журнал изменений

ВЕРСИЯ 8. 02 [12.3.2023] 

 - [ИСПРАВЛЕНО] Частная корзина amazon S3 не загружается

ВЕРСИЯ 8.01 [1.3.2023] 

 - [ИСПРАВЛЕНО] sticky.css, sticky.js отсутствует в popup.html
 - [ИСПРАВЛЕНО] запуск скорости воспроизведения для кнопки переключения скорости воспроизведения

ВЕРСИЯ 8.0 [27.02.2023] 

 - [ИСПРАВЛЕНО] плейлист не перезагружается при закрытом всплывающем окне
 - [FIX] поиск аккордеона не работает
 - [ИСПРАВЛЕНО] аккордеон после открытия/закрытия плейлиста, неправильная высота плейлиста
 - [FIX] автозаполнение поиска песни с паролем
 - [ИСПРАВЛЕНО] после использования поиска кнопка следующей песни не работала
 - [ИСПРАВЛЕНО] липкая плавающая панель поиска не работает
 - [ИСПРАВЛЕНО] скрыть кнопку текста, если текста нет
 - [ИСПРАВЛЕНО] область прокрутки плейлиста эпического скина, когда присутствует описание плейлиста
 - [ИСПРАВЛЕНО] всплывающее окно с залипшим плеером
 - [ИСПРАВЛЕНО] перенаправление входа в систему с блокировкой времени песни 0, если оно было закрыто при запуске, не открывалось снова
 - [ИСПРАВЛЕНО] ограничение ролей пользователей при загрузке песен
 - [ИСПРАВЛЕНО] перемешивание, значки циклов теперь отображаются при наведении
 - [ОБНОВЛЕНИЕ] автоматическое создание звуковой волны, когда проигрыватель запускается на странице. 
 - [ОБНОВЛЕНИЕ] поддержка автоматического создания сигналов из некоторых внешних источников, таких как подкасты.
 - [ОБНОВЛЕНИЕ] определяют демо-волны, когда форма волны основной песни недоступна, поэтому проигрыватель всегда показывает форму волны.
 - [ОБНОВЛЕНИЕ] playlistContentClass для упрощения оформления элементов плейлиста.
 - [ОБНОВЛЕНИЕ] диалоговое окно с текстом теперь открывается в центре окна при запуске.
 - [ДОБАВИТЬ] полноэкранный селектор плейлиста в виде сетки эскизов
 - [ДОБАВИТЬ] возможность иметь глобальную кнопку загрузки в плеере
 - [ДОБАВИТЬ] возможность не открывать плеер в главном окне после закрытия всплывающего окна
 - [ДОБАВИТЬ] новые скины (исправлено, исправлено 2, волна)

ВЕРСИЯ 7.12 [4.1.2023] 

 - [ИСПРАВЛЕНО] если автоматически открывалось всплывающее окно, при закрытии всплывающего окна проигрыватель не мог быть инициализирован
 - [ОБНОВЛЕНИЕ] звуковая реклама в середине воспроизводится последовательно
 - [ОБНОВЛЕНИЕ] Поддержка подкастов iTunes

ВЕРСИЯ 7. 1 [12.12.2022] 

 - [ИСПРАВЛЕНО] если вы скопируете URL-адрес для встраивания, который уже содержит параметры URL-адреса запроса проигрывателя, они будут удвоены.
 - [FIX] клавиатура управляет дублированием событий
 - [ADD] опция для передачи параметров конфигурации Hls
 - [ОБНОВЛЕНИЕ] обновление аналитики gtag
 - [ОБНОВЛЕНИЕ] всплывающая подсказка панели поиска отображается на мобильных устройствах.
 - [ОБНОВЛЕНИЕ] при закрытии всплывающего окна, снова показывать проигрыватель на странице
 - [ОБНОВЛЕНИЕ] добавлена ​​всплывающая кнопка в эпический скин

ВЕРСИЯ 7.02 [18.11.2022] 

 - [ИСПРАВЛЕНО] статистика пропустила подсчет первой минуты для всех песен, обновлена ​​для подсчета, только если проиграно хотя бы несколько секунд
 - [ИСПРАВЛЕНО] если приостановка звука во время рекламы была ложной и проигрывалась реклама перед или в конце, панель поиска прогресса мешала панели поиска рекламы.

ВЕРСИЯ 7.01 [11.11.2022] 

 - [ИСПРАВЛЕНО] не воспроизводится источник hls

ВЕРСИЯ 7 [20. 10.2022] 

 - [ИСПРАВЛЕНО] варианты не выбирают правильный источник звука
 - [FIX] автопрокрутка текстов песен на всю страницу
 - [ИСПРАВЛЕНО] эпический скин, загрузчик сигнала не виден во время загрузки сигнала
 - [ОБНОВЛЕНИЕ] проигрыватель преобразован только в javascript (без зависимостей jquery)
 - [ОБНОВЛЕНИЕ] новый дизайн и макеты липких плееров
 - [ДОБАВИТЬ] установить замещающее изображение в области обложки проигрывателя, если при запуске не загружается ни одна песня.

ВЕРСИЯ 6.71 [19.7.2022] 

 - [FIX] ошибка с окончанием объявления

ВЕРСИЯ 6.7 [14.05.2022] 

 - [ИСПРАВЛЕНО] URL-адрес большого пальца игрока иногда не работал из-за encodeURI, который применяется, если в URL-адресе есть пробелы.
 - [ОБНОВЛЕНИЕ] пользовательские значки поддерживают SVG.
 - [ОБНОВЛЕНИЕ] пользовательские значки плейлистов не должны иметь прикрепленный URL
 - [ОБНОВЛЕНИЕ] укажите пользовательский класс для пользовательского значка списка воспроизведения и обратного вызова пользовательской функции. 
 - [ОБНОВЛЕНИЕ] Для обмена в facebook больше не требуется ключ API.
 - [ОБНОВЛЕНИЕ] поделиться WhatsApp
 - [ДОБАВИТЬ] возможность использовать полосу прокрутки браузера по умолчанию в плейлисте.
 - [ДОБАВИТЬ] поддержку аудиообъявлений IMA, VAST.
 - [ДОБАВИТЬ] дополнительные обратные вызовы рекламных событий, чтобы рекламу можно было отслеживать
 - [ДОБАВИТЬ] возможность защитить паролем песню

ВЕРСИЯ 6.31 [18.03.2022] 

 - [ИСПРАВЛЕНО] подкаст может не работать, если он не содержит обложки.
 - [ИСПРАВЛЕНО] Несколько игроков на странице с липким плеером не меняли песню в липком плеере правильно

ВЕРСИЯ 6.3 [28.11.2021] 

 - [ОБНОВЛЕНИЕ] чтобы ваше собственное поле ввода в плеере не мешало управлению с клавиатуры
 - [ДОБАВИТЬ] возможность плавного затухания звука между двумя песнями.
 - [ИСПРАВЛЕНО] реклама не воспроизводилась первой определенной рекламой в середине при запуске, а второй
 - [ИСПРАВЛЕНО] сортируемые дорожки не обновляются после сортировки
 - [ИСПРАВЛЕНО] звук не возобновляется, а начинается с начала после истечения срока действия URL-адреса s3

ВЕРСИЯ 6. 0 [9.11.2021] 

 - [ДОБАВИТЬ] добавить атрибут rel для ссылки на элемент плейлиста и дополнительные значки плейлиста.
 - [ДОБАВИТЬ] воспроизведение звука из OneDrive (отдельно или из папки)
 - [ДОБАВИТЬ] возможность чтения тегов ID3 ​​с диска Google или папки OneDrive (требуется cors)
 - [ДОБАВИТЬ] отображение вариантов песни (возможность отображения нескольких разных версий песни: длинная версия, версия 30-х, версия 15-х и т. д.)

ВЕРСИЯ 5.96 [12.10.2021] 

 - [ИСПРАВЛЕНО] аккордеон иногда не открывается полностью при запуске (чтобы показать все треки)
 - [ИСПРАВЛЕНО] предварительный загрузчик сигналов остается видимым при предоставлении пиковых данных.

ВЕРСИЯ 5.95 [8.9.2021] 

 - [ОБНОВЛЕНИЕ] добавлена ​​настройка региона Amazon S3.
 - [ОБНОВЛЕНИЕ] возобновить звук S3, если срок действия URL-адреса истек.
 - [ДОБАВИТЬ] Интеграция Cloudfront с S3

ВЕРСИЯ 5.9 [23.07.2021] 

 - [ДОБАВИТЬ] поддержка amazon s3 с частными корзинами
 - Опция [ДОБАВИТЬ] для отображения списка воспроизведения с выпадающим меню выбора над проигрывателем. 
 - [ДОБАВИТЬ] возможность автоматического перехода к следующей песне при ошибке

ВЕРСИЯ 5.85 [25.06.2021] 

 - [ДОБАВИТЬ] инструмент генератора звуковых волн

ВЕРСИЯ 5.84 [23.06.2021] 

 - [ИСПРАВЛЕНО] IOS возобновляет воспроизведение позиции

ВЕРСИЯ 5.81 [11.06.2021] 

 - [ИСПРАВЛЕНО] при воспроизведении радио не отображались данные песни на заблокированном экране мобильного устройства.

ВЕРСИЯ 5.8 [12.05.2021] 

 - [ИСПРАВЛЕНО] размер индикатора выполнения иногда некорректен при запуске игрока
 - [ОБНОВЛЕНИЕ] при поиске песен в списке воспроизведения будут воспроизводиться только песни, найденные в результате поиска (несовместимо с аккордеоном).
 - [ОБНОВЛЕНИЕ] возможность использовать элементы управления клавиатурой глобально на странице (действительно только для одного игрока на странице)
 - [ОБНОВЛЕНИЕ] сетки скинов
 - Опция [ДОБАВИТЬ] для добавления пользовательских значков в список воспроизведения с URL-ссылкой на каждый
 - [ДОБАВИТЬ] опция для отображения прикрепленного проигрывателя внизу страницы, воспроизведение песни из активного проигрывателя на странице. 
 - [ДОБАВИТЬ] дополнительную панель поиска формы волны в некоторых скинах
 - [ДОБАВИТЬ] новые скины (Эпик, Эпик мини)

ВЕРСИЯ 5.25 [25.03.2021] 

  - [FIX] hls media не ищет
  - [ОБНОВЛЕНИЕ] выберите свои собственные элементы управления клавиатурой

ВЕРСИЯ 5.2 [25.02.2021] 

  - [ДОБАВИТЬ] возможность использовать PerfectScrollbar вместо mCustomScroll в плейлисте.

ВЕРСИЯ 5.15 [22.02.2021] 

 - [ДОБАВИТЬ] временные привязки (щелкните любой элемент HTML на странице, чтобы перейти непосредственно к указанному времени песни)
 - [ИСПРАВЛЕНО] плейлист в режиме аккордеона, поле поиска, поиск открытых аккордеонов
 - [ОБНОВЛЕНИЕ] поля времени и панель поиска теперь включены для типа мультимедиа hls.
 - [ДОБАВИТЬ] возможность остановки в конце песни

ВЕРСИЯ 5.11 [2.2.2021] 

 - Опция [ОБНОВЛЕНИЕ] для добавления HTML-описания к песням в плейлисте. 
 - [ОБНОВЛЕНИЕ] глобальное значение скорости воспроизведения в настройках плеера
 - [ОБНОВЛЕНИЕ] показать / скрыть полный текст описания песни в плейлисте с кнопкой «Подробнее»

ВЕРСИЯ 5.1 [18.01.2021] 

 - [ОБНОВЛЕНИЕ] очистить некоторый код
 - [ИСПРАВЛЕНИЕ] некоторые ошибки

ВЕРСИЯ 5.0 [24.12.2020] 

 - [ИСПРАВЛЕНО] приватные треки в саундклауде
 - [FIX] в параметрах запроса отсутствует экземпляр hap-query-instance в справочной документации.
 - [ОБНОВЛЕНИЕ] управление клавиатурой улучшено
 - [ОБНОВЛЕНИЕ] Улучшение петли AB
 - [ДОБАВИТЬ] аудиотекст
 - [ДОБАВИТЬ] Синхронизация видео ASL / языка жестов со звуком

ВЕРСИЯ 4.4 [16.08.2020] 

 - [ОБНОВЛЕНИЕ] описание подкаста отформатировано в формате html (сохранить ссылки и т. д.)
 - [ОБНОВЛЕНИЕ] выберите элемент (ы) элемента плейлиста, который будет получать событие щелчка.

ВЕРСИЯ 4.4 [14.08.2020] 

 - [ИСПРАВЛЕНО] глобальные параметры плейлиста не работают при загрузке нового плейлиста
 - [ОБНОВЛЕНИЕ] URL-адрес социального обмена для нескольких игроков на странице
 - [ОБНОВЛЕНИЕ] определить минимальную и максимальную скорость воспроизведения
 - [ОБНОВЛЕНИЕ] создание пользовательской HTML-разметки элемента плейлиста (большой палец, заголовок, описание. ..)
 - [ДОБАВИТЬ] возможность предварительного просмотра песни (воспроизведение короткого фрагмента предварительного просмотра песни ~ 10 секунд вместо полной песни)
 - Опция [ДОБАВИТЬ] для создания пользовательской HTML-разметки проигрывателя.
 - [ДОБАВИТЬ] отображать список миниатюр плейлистов в интерфейсе и при выборе плейлиста, загружать выбранный плейлист в плеере
 - [ДОБАВИТЬ] добавить пользовательские классы к плееру и внутренним элементам
 - [ДОБАВИТЬ] новые скины и шаблоны (сетка и списки миниатюр, отдельные плейлисты от плеера)
 - [ДОБАВИТЬ] перетащите песни в плеер (создайте собственный плейлист в интерфейсе)
 - [ADD] URL-адрес миниатюры заполнителя, который будет отображаться, когда не выбрана ни одна песня.
 - [ДОБАВИТЬ] прикрепить категорию / теги к песням и фильтровать песни в интерфейсе
 - [ДОБАВИТЬ] отображать список песен формы волны, фильтруемый по жанрам и ключевым словам

ВЕРСИЯ 4.05 [20.06.2020] 

 - [ИСПРАВЛЕНО] макет grid_no_player - нажмите на миниатюру элемента плейлиста, чтобы воспроизвести звук (теперь он отключен)
 - [ИСПРАВЛЕНО] макет grid_no_player - enqueue воспроизводит песню вместо enqueue
 - [ИСПРАВЛЕНО] фиксированный макет - неправильное вычисление позиции игрока, когда игрок закрыт

ВЕРСИЯ 4. 0 [31.05.2020] 

 - [ДОБАВИТЬ] инициализировать проигрыватель при щелчке селектора дома
 - [ДОБАВИТЬ] опция для автоматического открытия плеера во всплывающем окне при загрузке страницы / щелчке селектора dom
 - [ОБНОВЛЕНИЕ] используйте собственное поле поиска для фильтрации песен в плеере.
 - [ОБНОВЛЕНИЕ] предварительный загрузчик виден перед загрузкой плеера
 - [ДОБАВИТЬ] дополнительные кнопки в элементах управления для поиска на X секунд назад / вперед
 - [ДОБАВИТЬ] нестандартную ширину, при которой значки в плейлисте (значки ссылки, загрузки, статистики) переходят во вторую строку, чтобы освободить место для заголовков плейлиста.
 - [ADD] указать пользовательский элемент DOM для плейлиста
 - [ОБНОВЛЕНИЕ] поделиться определенной песней в плейлисте при использовании с социальными сетями (прямая ссылка на песню и текущее время)
 - [ОБНОВЛЕНИЕ] добавлено больше социальных сетей
 - [ОБНОВЛЕНИЕ] загрузка аккордеона из json
 - [ОБНОВЛЕНИЕ] дополнительный текст описания аккордеона под заголовком (для аккордеона json)
 - [ДОБАВИТЬ] поддержка flac
 - [ДОБАВИТЬ] точки останова javascript для изменения размера проигрывателя (медиа-запрос в div) (макеты, такие как art_wide, brona, metalic, modern. .. теперь можно использовать в качестве виджета)
 - [ДОБАВИТЬ] новые скины (Виджет, Компактный, Фиксированный, Сетка для большого пальца в проигрывателе страницы с липким дном)
 - [ДОБАВИТЬ] возможность полностью скрыть плеер до начала музыки

ВЕРСИЯ 3.7 [19.03.2020] 

 - [ИСПРАВЛЕНО] предупреждающее сообщение WhatsApp на рабочем столе
 - [ДОБАВИТЬ] настройки плеера теперь можно передавать с помощью строки запроса (параметры начинаются с "hap-")
 - [ADD] создать список воспроизведения из параметров строки запроса
 - [ОБНОВЛЕНИЕ] поддержка подкаталогов папок
 - [ОБНОВЛЕНИЕ] аудиообъявления не являются частью глобальной таблицы, поэтому их можно добавить в любой проигрыватель или плейлист.
 - [ОБНОВЛЕНИЕ] поддержка нескольких аудиообъявлений до, во время и после воспроизведения песни (случайно)
 - [ОБНОВЛЕНИЕ] элементы управления отключены во время воспроизведения рекламы (пользователь не может пропустить дорожку)
 - [ОБНОВЛЕНИЕ] Кнопка перемешивания теперь имеет 2 всплывающих подсказки для удобства работы на мобильных устройствах (Перемешивание включено, Перемешано выключено). 
 - [ДОБАВИТЬ] индикатор выполнения рекламы и рекламное сообщение
 - [ДОБАВИТЬ] "Плейлист типа аккордеона папки" - читать папку с несколькими подпапками (альбомами) аудиофайлов и отображать их как аккордеон в плеере (каждый элемент аккордеона - это один плейлист)
 - [ДОБАВИТЬ] новый скин - "брона" (светлый, тёмный)

ВЕРСИЯ 3.35 [20.02.2020] 

 - [ИСПРАВЛЕНО] перетасовка не работает
 - [ДОБАВИТЬ] поддержку плейлиста m3u с аудиофайлами
 - [ДОБАВИТЬ] возможность получить обложку альбома для песни, если она отсутствует
 - [ОБНОВЛЕНИЕ] новые обратные вызовы

ВЕРСИЯ 3.3 [13.02.2020] 

 - [ADD] отключить пропуск песни
 - [ДОБАВИТЬ] многострочный заголовок
 - Опция [ADD] для префикса относительных URL-адресов аудио
 - [ДОБАВИТЬ] запомнить позицию воспроизведения для всего плейлиста
 - [ДОБАВИТЬ] демонстрационный пример с иконками изображений, потрясающим шрифтом, иконками материалов, иониконами
 - [ДОБАВИТЬ] звуковую рекламу

ВЕРСИЯ 3. 2 [4.2.2020] 

 - [ОБНОВЛЕНИЕ] новые скины
 - [ОБНОВЛЕНИЕ] Radiojar получает обложку из метаданных

ВЕРСИЯ 3.1 [14.01.2020] 

 - [ОБНОВЛЕНИЕ] новый универсальный скин
 - [ОБНОВЛЕНИЕ] циклическое обновление (циклический плейлист, сингл, выкл.)
 - [ДОБАВИТЬ] загрузить плейлист из JSON
 - [ДОБАВИТЬ] аудио виджет
 - [ДОБАВИТЬ] блок Гутенберга
 - [ДОБАВИТЬ] ползунок скорости воспроизведения в плеере
 - [ADD] петля a-b (диапазон)

SoundCloud требует ключ API (убедитесь, что он у вас есть или что вы можете получить его от SoundCloud)

Примечания:

ключевые слова: аудиоплеер, mp3, прямая трансляция, amazon s3, варианты, soundcloud, rss, подкаст, отзывчивый Аудиоплееры — очень необходимый компонент для любого веб-сайта. Сейчас больше, чем когда-либо, люди во всем мире используют свои смартфоны для доступа в Интернет, и одной из самых распространенных задач является воспроизведение медиафайлов; обычно музыка или видео.

Аудиоплееры используются для воспроизведения аудиофайлов в приложениях HTML5. Вы, наверное, видели значок какого-нибудь аудиоплеера в форме треугольника в пользовательском интерфейсе вашего любимого веб-сайта. Это стандартный аудиоплеер.

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

Устали от появления встроенного аудиоплеера HTML5?

Хотите красивый и настраиваемый аудиоплеер для воспроизведения аудио, песен, подкастов на веб-странице?

Здесь я перечислил 10 пользовательских аудиоплееров, созданных на JavaScript, которые можно использовать для встраивания аудиоплеера на ваш сайт. Они просты в использовании, очень функциональны и готовы к работе как есть.

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

Первоначально опубликовано 10 октября 2019 г., обновлено 14 февраля 2023 г.

  • Ванильные плагины JavaScript для аудиоплеера

    • Плагины аудиоплеера jQuery:

    Кроссплатформенный аудио- и видеоплеер HTML5 для jQuery — jPlayer

    Популярный плагин jQuery, который широко используется на многих музыкальных и видеосайтах в Интернете. Он предлагает простой способ помочь создать кроссплатформенный аудио- и видеоплеер HTML5 для обмена музыкой, аудио, видео и многим другим. Он легкий, быстрый, с широкими возможностями настройки и оформления с использованием HTML/CSS для удовлетворения ваших особых требований. Он также поддерживает старые браузеры, использующие Flash Fallback.

    Скачать демоверсию

    Настраиваемый HTML5-аудиоплеер — jQuery mb.miniAudioPlayer

    Плагин jQuery, который преобразует аудиоссылку в настраиваемый минималистичный HTML5-аудиоплеер с изменяемым оформлением на странице.

    Скачать демоверсию

    Минимальный аудиоплеер с вращающимися изображениями — minimal-player

    Минималистичный, чистый аудио/музыкальный/mp3-плеер с вращающимися обложками, созданный с помощью jQuery, TweenMax.js и изображений SVG.

    Скачать демонстрационную версию

    Плагин аудиоплеера в стиле Material Style с jQuery — jAudio.js

    Легкий плагин jQuery, который поможет вам создать собственный аудиоплеер HTML5 в стиле Material Design с поддержкой плейлиста и автовоспроизведения.

    Скачать демоверсию

    Чистый сенсорный аудиоплеер с jQuery — AudioPlayer.js

    Легкая и очень простая библиотека jQuery для создания минималистичных, чистых, отзывчивых, сенсорных аудиоплееров из аудиотега HTML5.

    [Демо] [Скачать]

    Плагины аудиоплеера Vanilla JavaScript:

    Плагин HTML5 для видео- и аудиоплеера — MediaElement.js

    Свободная от зависимостей библиотека JavaScript для визуализации современного, настраиваемого, многофункционального диапазона слайдер с использованием холста HTML5.

    Загрузка демоверсии

    AmplitudeJS

    Облегченная библиотека JavaScript, позволяющая управлять дизайном элементов управления мультимедиа на веб-странице, а не в браузере. Никаких зависимостей (jQuery не требуется).

    Загрузка демоверсии

    shikwasa

    Веб-аудиоплеер, созданный для подкастов. Если вам надоело использовать музыкальные плееры вместо воспроизведения подкастов, вы попали по адресу. СКАЖИТЕ НЕТ игрокам, которые даже не поддерживают общие функции подкастов!

    Загрузка демоверсии

    MidiPlayerJS

    Библиотека JavaScript, которая читает стандартные файлы MIDI и генерирует события JSON в реальном времени. Этот проигрыватель не генерирует никакого звука, но, прикрепив обработчик к эмиттеру событий, вы можете запустить любой код, который вам нравится, который может воспроизводить звук, управлять визуализацией, передавать данные в интерфейс MIDI и т. д.

    Скачать демоверсию

    Минимальный чистый аудиоплеер HTML5 с пользовательскими элементами управления — зеленый аудиоплеер

    Библиотека JavaScript для зеленого аудиоплеера позволяет создавать минимальные чистые аудиоплееры HTML5 с пользовательскими элементами управления в веб-приложении.

    No related posts.