Как вставить на сайт аудио файл (музыку) с помощью HTML5

Разместил / Просмотров: 14 298 / комментариев 7

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

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

Демо

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

Все браузеры, которые поддерживают тег <audio> — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Добавление аудио файла на сайт

Чтобы добавить аудио файл на Ваш сайт нужно между тегами <audio controls> и </audio> указать прямую ссылку на файл. Ссылка указывается с помощью тега <SOURCE>. Вот как будет выглядеть готовый код:

<audio controls>
 <source src="/aud/music.mp3">
 <source src="/aud/music.ogg">
 <source src="/aud/music.wav">
 <p>Ваш браузер не поддерживает аудио</p>
 </audio>

Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.

А если браузер вообще не поддерживает тег <audio> то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».

Но мы же добрые люди :-) И если пользователь не сможет прослушать музыку, мы дадим её ему скачать. Для этого Вам нужно добавить просто ссылки на файлы. Таким образом у нас получится следующий код:

<audio controls>
 <source src="/aud/music.mp3">
 <source src="/aud/music.ogg">
 <source src="/aud/music.wav">
 <p>Ваш браузер не поддерживает аудио</p>

<a href="/aud/music.mp3">Название</a>,
 <a href="/aud/music.ogg">Название</a>,
 <a href="/aud/music.wav">Название</a>

</audio>

Таким образом пользователь сможет скачать файл :-)

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

Демо

Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.

  • Александр

    Здравствуйте! А вот это изменение можно произвести на своей странице «Одноклассники»? Если «да» то сможет ли его(аудиофайл) прослушать другой человек зашедший на мою страницу? Вот здесь вместо слова — music — пишется название файла? Так?

  • Александр, Вам лучше обратиться в тех поддержку одноклассников и у них всё подробно узнать.

  • Илья

    А как сделать так, чтобы при заходе на сайт музыка сразу начинала играть, безадрполнительных нажатий?

  • Илья, честно я не знаю ответ на этот вопрос. Попробуйте воспользоваться поисковиком. Я уверен, что информации по этому поводу очень много.

  • audio controls autoplay

  • kalibron

    Допустим у нас 2 плеера на одной странице.
    Как сделать чтобы первый останавливал воспроизведения когда воспроизводишь второй?

  • Вот этого я не знаю. Нужно обращаться к программистам.