Html проигрыватель: Как сделать собственный видео-плеер на HTML5 Video / Блог компании Microsoft / Хабр

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

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

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

HTML5 Плеер.

Вы здесь: Главная — JavaScript — JavaScript Скрипты — HTML5 Плеер.

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

На просторах интернета найден был замечательный плеер — MediaElement.

В чем же его особенности?

• Если браузер поддерживает стандарт HTML5, то будет использован новый HTML5 плеер, иначе будет использован Flash
• HTML5 аудио и видео плееры написаны на чистом html и css
• Поддерживает старые браузеры
• Поддерживает современные стандарты, включая WebVTT
• Есть плагины для Drupal, Joomla, jQuery, BlogEngine.NET, ruby gem, plone, typo3, является частью ядра WordPress
• Поддержка разных скинов

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

Есть интересные функции, к примеру, перевод текста из видео и отображение его в виде субтитров, зацикливание видео, backlight(иметирует Philipps Ambilight), поддерживает YouTube API как для HTML5, так и для Flash. Многие функции еще будут добавлены позже.

В общем, очень полезный и интересный плеер, который вы однозначно должны попробовать!

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

Спасибо за внимание!

• Создано 23.09.2015 17:35:36
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

HTML5-аудио

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

Благодаря добавлению в спецификацию HTML5 нового элемента <audio>, появилась возможность добавлять аудио содержимое со встроенным программным интерфейсом без привлечения подключаемых модулей.

Как добавить HTML5-аудио на веб-страницу

1. Элемент <audio>

Поддержка браузерами

IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

HTML5-элемент <audio> используется для внедрения звукового контента в веб-страницы. В общем виде HTML-разметка имеет следующий вид:

<audio src="name.ogg" controls></audio>

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

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

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
  <a href="sounds/name.mp3">Скачать name.mp3</a>
</audio>

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio> и <video>. Указывает на альтернативные видео/аудио файлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека.

4. Добавление субтитров и заголовков

Элемент <track> используется в качестве дочернего элемента <audio> и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения аудио или видеофайла.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

See the Pen Music animation by Elena Nazarova (@nazarelen) on CodePen.

Освоение HTML5 тега audio / Хабр

<audio src="sound.mp3" autoplay></audio>

<audio src="sound.mp3" autoplay loop></audio>

<audio src="sound.mp3" controls></audio>

 поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.
<audio controls> 
  <source src="sound.ogg"> 
  <source src="sound.mp3"> 
</audio>

<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
</audio>

? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег .
<audio controls>
  <source src="sound.ogg" type="audio/ogg" >
  <source src="sound.mp3" type="audio/mp3" >
  Ваш браузер не пожжерживает тег audio!
</audio>

<audio src="sound.mp3"></audio>
<div>
	<button>Воспроизведение</button>
	<button>Пауза</button>
	<button>Громкость +</button>
	<button>Громкость -</button>
</div> 

sampotts / plyr: простой проигрыватель HTML5, YouTube и Vimeo

• Почему именно GitHub? Особенности →
  • Обзор кода
  • Управление проектами
  • Интеграции
  • Действия
  • Пакеты
  • Безопасность
  • Управление командой
  • Хостинг
  • мобильный
  • Истории клиентов →
  • Безопасность →
• команда
• предприятие
• Проводить исследования
  • Изучите GitHub →

  Учитесь и вносите свой вклад

  • Темы
  • Коллекции
  • В тренде
  • Учебная лаборатория
  • Руководства с открытым исходным кодом

  Общайтесь с другими

  • События
  • Форум сообщества
  • GitHub Education

Videojs HTML5 Player — плагин для WordPress

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

Требования

Возможности Videojs HTML5 Player

• Встраивайте видеофайлы MP4 в сообщение / страницу или в любое место на вашем сайте WordPress
• Встраивайте адаптивные видео для лучшего взаимодействия с пользователем при просмотре с мобильного устройства
• Встраивайте видео HTML5, совместимые со всеми основными браузерами
• Вставить видео с изображениями плакатов
• Вставить видео с помощью проигрывателя videojs
• Автоматически воспроизводить видео при рендеринге страницы
• Встраивайте видео, загруженные в медиатеку WordPress, используя прямые ссылки в шорткоде
• Установка не требуется, просто установите и начните встраивать видео
• Легкий и совместимый с последней версией WordPress
• Чистый и гладкий плеер без водяных знаков
• резервных копий для других типов файлов, поддерживаемых HTML5 (WebM, Ogv)

Использование плагина Videojs HTML5 Player

Чтобы встроить видео, создайте новый пост / страницу и используйте следующий шорткод:

  [videojs_video url = "http: // example.ru / wp-content / uploads / videos / myvid.mp4 "]
  

Здесь «url» — это местоположение исходного файла видео MP4 (в кодировке H.264). Вам необходимо заменить URL-адрес образца фактическим URL-адресом видеофайла.

Опции шорткода видео

В шорткоде поддерживаются следующие параметры.

WebM

Вы можете указать видеофайл WebM в дополнение к исходному видеофайлу MP4. Это необязательный параметр.

  [videojs_video url = "http: // example.com / wp-content / uploads / videos / myvid.mp4 "webm =" http://example.com/wp-content/uploads/videos/myvid.webm "]
  

Огв

Вы можете указать видеофайл Ogv в дополнение к исходным видеофайлам MP4 и WebM. Это необязательный параметр.

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" webm = "http://example.com/wp-content/uploads/videos/myvid.webm" ogv = "http://example.com/wp-content/uploads/videos/myvid.ogv"]
  

Ширина

Определяет ширину видеофайла (высота рассчитывается автоматически).Этот параметр не требуется, если вы не хотите ограничить максимальную ширину видео.

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4"]
  

Предварительная нагрузка

Указывает, следует ли и как загружать видео при загрузке страницы. По умолчанию установлено «авто» (видео должно загружаться полностью при загрузке страницы). Другие варианты:

• «метаданные» — при загрузке страницы должны загружаться только метаданные.

• «none» — видео не должно загружаться при загрузке страницы

  [videojs_video url = ”http: // example.com / wp-content / uploads / videos / myvid.mp4 ″ preload = ”metadata”]

Органы управления

Указывает, что элементы управления видео должны отображаться. По умолчанию «истина». Чтобы скрыть элементы управления, установите для этого параметра значение «false».

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" controls = "false"]
  

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

Автозапуск

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

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" autoplay = "true"]
  

Плакат

Определяет изображение, которое будет отображаться в качестве заполнителя перед воспроизведением видео.

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" poster = "http://example.com/wp-content/uploads/poster.jpg"]
  

Петля

Заставляет видеофайл зацикливаться до начала по окончании и автоматически продолжать воспроизведение.

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" loop = "true"]
  

Без звука

Указывает, что аудиовыход видео должен быть отключен.

  [videojs_video url = "http://example.com/wp-content/uploads/videos/myvid.mp4" muted = "true"]
  

Для получения подробной документации посетите страницу плагина Videojs HTML5 Player

10 музыкальных плееров CSS

8 января 2020 г.

Коллекция бесплатных HTML и CSS музыкальных проигрывателей примеров кода. Обновление июньской коллекции 2018 г. 1 новый предмет.

1. Музыкальные плееры на JavaScript
2. Музыкальные плееры jQuery
3. Музыкальные плееры React
4. Музыкальные плееры Vue

Автор

• Джейми Коултер
• 18 августа 2017 г.

О коде

Медиа-проигрыватель только CSS

3D куб медиаплеер только CSS .На основе этого потрясающего дриббла, снятого Балраджем Чаной.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

• Рофида Абд Эльрахман
• 19 июня 2017 г.

О коде

Аудиоплеер HTML5

Аудиоплеер HTML5 для музыкального магазина Rofa.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Музыкальный альбом UI

Пользовательский интерфейс адаптивного музыкального альбома.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Одинцов Иван
• 28 января 2017 г.

О коде

Дизайн музыкального плеера

Дизайн музыкального плеера в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

• Genaro Colusso
• 1 декабря 2016 г.

О коде

Дизайн музыкального плеера

Дизайн музыкального плеера HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.CSS

О коде

Музыкальный проигрыватель материалов

Музыкальный проигрыватель материалов HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Алекс Деверо
• 6 августа 2016

О коде

Дизайн пользовательского интерфейса музыкального плеера

Дизайн пользовательского интерфейса музыкального плеера в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

О коде

Музыкальный плеер

Дизайн музыкального проигрывателя на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: materialize.css

Автор

• Иммануил Пандианган
• 1 апреля 2016 г.

О коде

Музыкальный плеер UI

Пользовательский интерфейс музыкального проигрывателя на HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

• Марсело Агила
• 27 мая 2013 г.

О коде

Плоский музыкальный виджет UI

Плоский виджет для музыкального плеера с HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.CSS

HTML Аудио

Элемент HTML используется для воспроизвести аудиофайл на веб-странице.

Элемент HTML

Чтобы воспроизвести аудиофайл в формате HTML, используйте элемент :

Пример

<элементы управления звуком>


Ваш браузер не поддерживает аудио элементы.

HTML Audio — Как это работает

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

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

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

Поддержка браузера

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

Аудиоформаты HTML

Поддерживаются три формата аудио: MP3, WAV и OGG. Браузер поддерживает различные форматы:

HTML-аудио — типы носителей

Аудио HTML — методы, свойства и события

HTML DOM определяет методы, свойства и события для элемента .

Это позволяет загружать, воспроизводить и приостанавливать аудио, а также устанавливать продолжительность и громкость.

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

Полный справочник по DOM см. В Справочнике по HTML-аудио / видео DOM.

HTML-теги аудио