Html audio error

Свойства error JS медиа объекта video и audio характеризуют различные статусы ошибок, возникающие в процессе манипуляции с аудио или видео элементом на WEB странице.

JS свойства состояния ошибки video и audio

Свойства error JS медиа объекта video и audio характеризуют различные статусы ошибок, возникающие в процессе манипуляции с аудио или видео элементом на WEB странице.

Свойства состояния ошибки для медиа объекта:

//Свойство ошибки медиа объекта video и audio
readonly свойство MediaError error;

// Свойства JS объекта MediaError
interface MediaError {
  const unsigned short MEDIA_ERR_ABORTED = 1;
  const unsigned short MEDIA_ERR_NETWORK = 2;
  const unsigned short MEDIA_ERR_DECODE = 3;
  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
  readonly свойство unsigned short code;
};
//MediaError object, только чтение
media.error

Свойство media.error  JS объекта медиа элемента audio и video доступно только для чтения и возвращает MediaError  JS объект, содержащий статус последней возникшей ошибки для данного медиа элемента в процессе исполнения алгоритма выбора ресурса. Если для медиа элемента не было ошибок, то свойство media.error вернет NULL значение. Свойство media.error медиа JS объекта поддерживается не всеми браузерами.

JS объект MediaError имеет только одно свойство, доступное только для чтения — MediaError.code:

.error.code

//unsigned short, только чтение
MediaError.code;

//пример получения кода последней ошибки для
//медиа элемента или NULL, если ошибок нет
myVideo.error.code;

Это свойство code  возвращает из JS объекта MediaError, в формате целого положительного числа, числовой код последней ошибки для медиа элемента. Кодам ошибок соответствую именные константы, названия которых кратко описывают тип ошибки, который возник для медиа элемента.

Коды ошибок и соответствующие им константы:

  • 1 = MEDIA_ERR_ABORTED — получение и загрузка медиа файла били прерваны пользователем, например, по нажатию СТОП кнопки в медиа плеере, что связано с событием abort  для медиа элемента. Свойство media.networkState будет в этих случаях как NETWORK_EMPTY или как  NETWORK_IDLE;
  • 2 = MEDIA_ERR_NETWORK — ошибка при загрузке медиа файла, например, при обрыве сетевого соединения. Свойство  media.networkState будет в этих случаях как NETWORK_EMPTY или как  NETWORK_IDLE;
  • 3 = MEDIA_ERR_DECODE — ошибка при декодировании медиа файла. В этом случае, если свойство media.readyState равно HAVE_NOTHING, то оно будет установлено networkState как NETWORK_EMPTY, и show poster flag будет установлено как true, и будет вызвано событие emptied  для медиа элемента, иначе media.networkState будет установлено в NETWORK_IDLE;
  • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED — данное audio/video не поддерживается, свойство media.networkState будет установлено как NETWORK_NO_SOURCE и show poster flag как true.

Пример использования свойства media.error

Для демонстрации примера на этой странице добавлена JS функция:

<script>
//Функция, показывающая причину ошибки для медиа элемента

 function mediaError(e) {
 
   switch (e.target.error.code) {
   
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('Воспроизведение прервано пользователем.');
       break;
       
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('Ошибка сети, загрузка медиа файла остановлена.');
       break;
       
     case e.target.error.MEDIA_ERR_DECODE:
       alert('Воспроизведение медиа файла прервано по причине наличия 
в нем элементов, которые не могут быть декодированы браузером.');
       break;
       
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('Медиа файл не может быть загружен по причине ошибки сервера 
или сети, или данный формат медиа не поддерживается.');
       break;
       
     default:
       alert('Не известная ошибка.');
       break;
   }
 }
</script>

К примеру видео на странице добавлен вызов это функции при ошибке:

<video ... onerror="mediaError(event)"></video>

Имитируем ошибку не правильного URL к медиа файлу, для этого сменим src на пустое значение:

myVideo.src = "";

Код кнопки вызова ошибки:

<input onclick="myVideo.src = '';" type="button" value="Set empty URL" />

Для работы с примером видео на этой странице использовано присвоение объекта видео в переменную JS с именем «myVideo«.

HTML5 video не поддерживается вашим браузером.

Также смотри примеры на странице: «Демонстрация JS управления HTML5 video и audio» .

Источник

While using the <audio> tag, there are chances of errors happening while playing the audio file.


It may be due to one of the below reasons:
— Intermittent connectivity
— Invalid «src» being set
— An audio format which the browser cannot decode and so cannot play
— Due to corrupted audio file being played


It would be better if we could know about these and be prepared to handle them instead of putting the user through a very bad experience.


The audio object has an error event which can be listened to for any errors. The «audio» attribute on the audio element can also be accessed to get the last error which had occurred. It returns a «MediaError» object representing the current error state of the element. It returns null if there is no error.


Types of error:
Each of the below error types has a corresponding associated number that is the error code produced by the «event«.


— MEDIA_ERR_ABORTED(1)
    Occurs when the fetching process for the media resource was aborted by the user agent (browser) at the user’s request.
    
— MEDIA_ERR_NETWORK(2)
    A network error of some description caused the user agent (browser) to stop fetching the media resource (after the resource was established to be usable).


— MEDIA_ERR_DECODE(3)
    An error of some description occurred while decoding the media resource (after the resource was established to be usable).


— MEDIA_ERR_SRC_NOT_SUPPORTED(4)
    The media resource indicated by the src attribute or assigned media provider object was not suitable.


Sample Code:
<audio src="sample.mp3"></audio> 
<script>
    
    var audioElem = document.document.getElementsByTagName("audio")[0];

    
    // Add event to detect error and display error code      
    audioElem.addEventListener(«error», function () {
        if (audioElem.error) {

            alert(audioElem.error.code);

        }

    }, false);

</script> 

References:
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events#Error_handling
https://html.spec.whatwg.org/#error-codes

Источник

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере — метод canPlayType.

Доступ к audio в javascript

Если в HTML есть тег audio, доступ к соответствующему объекту Audio можно получить через имя тега

	
var audio = document.getElementsByTagName('audio')[index];

или через id

	
var audio = document.getElementById('my-audio-id');

Объект Audio также можно создать в js.

 Создание объекта Audio в javascript

	
var myAudio = new Audio();
myAudio.src = 'sound.ogg';

//или

var myAudio = new Audio('sound.ogg');

Создание объекта Audio в jQuery

	
$('audio').attr('src', 'audio_file.mp3')

Используется один из поддерживаемых форматов (mp3, wav, ogg)

Воспроизведение звука и пауза:

	
//воспроизведение звука
myAudio.play();

// пауза
myAudio.pause();

// после паузы воспроизведение продолжится с места остановки
myAudio.play();

Как остановить воспроизведение audio

Команды stop нет, и чтобы остановить воспроизведение звукового файла, нужно два действия — пауза и задание нулевого значения для свойства currentTime— текущее время:

	
// Функция stop для Audio:
HTMLAudioElement.prototype.stop = function() {
	this.pause();
	this.currentTime = 0.0;
}

...

// использование
myAudio.stop();

События audio

loadeddata — данные загружены

Используем событие loadeddata , чтобы начать воспроизведение большого звукового файла после окончания загрузки:

	
var loaded = false;

var myAudio = new Audio();

myAudio.addEventListener('loadeddata', function() {
	loaded = true;
	myAudio.play();
}, false);
 
myAudio.src = 'background.ogg';

Обработчик события окончания загрузки записан раньше, т.к. он должен быть доступен во время загрузки файла, которая начинается сразу после задания src.

error — обработка ошибки загрузки

	
myAudio.addEventListener('error' , function() {
	alert('ошибка загрузки файла');
}, false);

myAudio.src = 'nofile.ogg';

onended — окончание воспроизведения

Длительность звукового файла

	
var audio = document.createElement('audio');

audio.src = 'mus3.mp3';

// time=NaN
var time = audio.duration;

Свойство duration может быть недоступно, если не завершена загрузка метаданных, правильно:

	
audio.addEventListener('loadedmetadata', function() {
	time = audio.duration;
});

Изменение свойств audio

Используем свойство 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();

Поддержка элемента Audio и форматов звуковых файлов

Для проверки поддержки форматов звуковых файлов браузером используется метод canPlayType с параметром  текстовым значением MIME-типа.

	
audio.canPlayType('audio/ogg');

Можно явно указать кодек:

	
audio.canPlayType('audio/ogg; codecs="vorbis"');

canPlayType возвращает одно из 3 значений:

  • probably — наверное
  • maybe — может быть
  • «» (пустая строка) — формат не поддерживается

Пример проверки поддержки формата mp3

Можете проверить, Opera не поддерживает формата mp3

	
var audio = new Audio();
var canPlayMmp3 = !!audio.canPlayType && audio.canPlayType('audio/mp3') != "";

if(!canPlayMmp3) {
	document.write('mp3 не поддерживается!
');
}

!! преобразует объект строки в логический тип

Пример проверки поддержки audio и форматов файлов

	
<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.

Просмотров: 11329

  • 2.91
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 402

Источник

Like this post? Please share to your friends:
  • Html alert error
  • Html 530 error
  • Html 503 error
  • Html 502 error
  • Html 500 error page