Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в 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
Читать дальше: Видео на сайте
.
Прокомментировать/Отблагодарить