Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту



PHP Поиск




Наша группа в телеграмм для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @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">Скачать песню "Журавли" в исполнении Марка Бернеса</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


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


.

Популярное:


Содержание: