Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Музыка и звуки на 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


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


.