Музыка и звуки на HTML-странице

Звук и музыка в HTML5:

<audio controls style="width:100%;max-width:600px;">
    <source src="/music/mark_bernes_-_zhuravli.mp3" type="audio/mp3">
    Тег audio не поддерживается вашим браузером.
</audio>
<a href="/music/mark_bernes_-_zhuravli.mp3" download="mark_bernes_-_zhuravli.mp3">Скачать песню "Журавли" в исполнении Марка Бернеса</a>.

Несколько разных форматов объединяются в один audio:

<audio controls>
    <source src="sound.ogg" type="audio/ogg" >
    <source src="sound.mp3" type="audio/mp3" >
    Ваш браузер не поддерживает тег audio!
</audio>

Атрибуты тега audio:

• autoplay - автоматически запустить воспроизведение
• loop - зациклить воспроизведение
• controls - Отображение элементов управления
• preload - буфферизация:
  • none - если вы не хотите использовать буфер файлов;
  • auto - если вы хотите, чтобы браузер беферизировал файл целиком;
  • metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).

Свойства тега audio:

• currentTime - позиция курсора проигрывателя, double (секунды)
• duration - длительность воспроизведения, double (секунды); только чтение
• muted - заглушен ли звук, boolean
• paused - остановлено ли воспроизведение, boolean
• volume - уровень громкости, double (от 0 до 1)
• played - были ли воспроизведены интервалы полностью, возвращает объект TimeRanges
• seekable - интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges
• buffered - возвращает объект TimeRanges буферизованного файла

События тега audio:

• durationchange - Обновлён атрибут duration
• ended - Воспроизведение остановлено по достижению конца
• pause - Воспроизведение было остановлено (обратите внимание на отсутствие события stop)
• play - Файл начал проигрываться
• timeupdate - Текущая позиция воспроизведения изменилась (обычно каждые 250 мс)
• volumechange - Значение изменилось
• canplay - Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается.
• canplaythrough - При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва.
• progress - Браузер показывает состояние проигрывания (обычно каждые 250 мс)

Объект TimeRanges

Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:

• length — число интервалов,
• start(index) — начальное время указанного интервала,
• end(index) — конечное время указанного интервала (отсчитывается от начала воспроизведения).

Управление воспроизведением через JavaScript

<audio id="player" src="sound.mp3"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Воспроизведение</button>
    <button onclick="document.getElementById('player').pause()">Пауза</button>
    <button onclick="audio=document.getElementById('player'); audio.currentTime=0; audio.pause(); ">Сначала</button>
    <button onclick="document.getElementById('player').volume+=0.1">Громкость +</button>
    <button onclick="document.getElementById('player').volume-=0.1">Громкость -</button>
</div>

Для создания объекта audio в javascript используется:

var audio = new Audio();

Чтобы определить, поддерживается ли данный формат файла в браузере используйте .canPlayType:
canPlayType возвращает одно из 3 значений: 1) probably, 2) maybe, или 3) "" (пустая строка).

var audio = new Audio();
var canPlayOgg = !!audio.canPlayType
&& audio.canPlayType('audio/ogg; codecs="vorbis"') != "";

или

var audio = document.getElementById('my-audio-id'); // получим доступ к объекту audio.
audio.canPlayType('audio/ogg');
// или сразу задав кодек:
// audio.canPlayType('audio/ogg; codecs="vorbis"');

Как вариант, объект создаётся полностью на Javascript. var audio = new Audio();

Старый формат вставки музыки:

Netscape:

<EMBED SRC ="/towngold.mid" width=0 heught=0 autostart=true volume=100>

Internet Explorer:

<BGSOUND SRC="/towngold.mid" LOOP=100>

Пример:

<script type="text/javascript">
if (navigator.appName == "Netscape") {
    document.write('<EMBED SRC ="TownGold.mid" width=0 heught=0 autostart=true volume=100>');
} else {
    document.write('<BGSOUND SRC="TownGold.mid" LOOP=100>');
}
function Music()
    {    if (navigator.appName == "Netscape")
        document.write('<EMBED SRC ="/towngold.mid" width=0 heught=0 autostart=true volume=100>')
    else
        document.write('<BGSOUND SRC="/towngold.mid" LOOP=100>')
    }
</script>
<form>
   <input TYPE="button" VALUE="Включить музыку" ONCLICK="Music()">
</form>

Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).Подробнее на Wiki: Audio format support

Читать дальше: Видео на сайте

.
Прокомментировать/Отблагодарить