Музыка и звуки на 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"><br>
Скачать песню "Журавли" в исполнении Марка Бернеса</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(), который возвращает одно из 3 значений:

• probably,
• maybe,
• "" (пустая строка).

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();

Пример отдельной кнопки play/pause

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

<embed src ="/towngold.mid" width="0" heught="0" autostart="true" volume="100">
<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

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