Благодаря тегу audio
появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType.
Если в HTML есть тег audio
, доступ к соответствующему объекту Audio можно получить через имя тега
var audio = document.getElementsByTagName('audio')[index];
или через id
var audio = document.getElementById('my-audio-id');
Объект Audio также можно создать в js.
var myAudio = new Audio();
myAudio.src = 'sound.ogg';
//или
var myAudio = new Audio('sound.ogg');
Создание объекта Audio в jQuery
$('audio').attr('src', 'audio_file.mp3')
Воспроизведение звука и пауза:
//воспроизведение звука
myAudio.play();
// пауза
myAudio.pause();
// после паузы воспроизведение продолжится с места остановки
myAudio.play();
Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия - пауза и задание нулевого значения для свойства currentTime- текущее время:
// Функция stop для Audio:
HTMLAudioElement.prototype.stop = function() {
this.pause();
this.currentTime = 0.0;
}
...
// использование
myAudio.stop();
Используем событие loadeddata , чтобы начать воспроизведение большого звукового файла после окончания загрузки:
var loaded = false;
var myAudio = new Audio();
myAudio.addEventListener('loadeddata', function() {
loaded = true;
myAudio.play();
}, false);
myAudio.src = 'background.ogg';
Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.
myAudio.addEventListener('error' , function() {
alert('ошибка загрузки файла');
}, false);
myAudio.src = 'nofile.ogg';
Длительность звукового файла
var audio = document.createElement('audio');
audio.src = 'mus3.mp3';
// time=NaN
var time = audio.duration;
Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:
audio.addEventListener('loadedmetadata', function() {
time = audio.duration;
});
Используем свойство muted - кнопки включения и выключения звука на странице:
<html>
<body>
<input type="button" onclick="aud.muted=true" value="Выключить" />
<input type="button" onclick="aud.muted=false" value="Включить" />
</body>
</html>
Хотелось бы выключать фоновый звук, когда посетитель сайта переключается на другое окно или вкладку браузера. Важно, что выражение muted=true сработает, если будет выполняться после завершения загрузки звукового файла, т.е. его следует поместить в обработчик события loadeddata:
var loaded = false;
var myAudio = new Audio();
myAudio.addEventListener('loadeddata', function() {
myAudio.muted = true;
}, false);
myAudio.src = 'background.ogg';
myAudio.play();
Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром текстовым значением MIME-типа.
audio.canPlayType('audio/ogg');
Можно явно указать кодек:
audio.canPlayType('audio/ogg; codecs="vorbis"');
canPlayType возвращает одно из 3 значений:
Можете проверить, Opera не поддерживает формата mp3
var audio = new Audio();
var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != "";
if(!canPlayMmp3) {
document.write('mp3 не поддерживается!
');
}
<script>
function check_audio() {
var elem = document.createElement('audio'), bool = false;
try {
if ( bool = !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,'');
bool.mp3 = elem.canPlayType('audio/mpeg;').replace(/^no$/,'');
bool.wav = elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,'');
bool.m4a = (elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;')).replace(/^no$/,'');
}
}
catch(e) {
}
return bool;
}
var b = check_audio();
if(!b) {
document.write('Audio не поддерживается');
} else {
var formats = ['ogg', 'mp3', 'wav', 'm4a'];
for(var i = 0; i < formats.length; i++) {
document.write(formats[i] + ' - ' + b[formats[i]] + '
');
}
}
</script>
Если функция check_audio возвращает false, браузер не поддерживает элемент audio. Если элемент audio поддерживается, проверяется возможность использования форматов файлов ogg, mpeg, wav и m4a.
Раннее в JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.
Замыкание — это функция, объявленная внутри другой функции и имеющая доступ к переменным внешней (вмещающей) функции. Простыми словами замыкание — это функция, описанная внутри другой функции.
Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?