Как определить с помощью jQuery или JavaScript, когда элемент HTML5 <audio>не может играть

Question

У меня есть несколько аудиоэлементов на странице с mp3-файлами с удаленного сайта, и иногда запрос на загрузку mp3 приводит к ответу 301 Moved Permanently.

Когда это происходит, проигрыватель становится серым. но я не могу обнаружить любую ошибку. Я пытался сделать что-то вроде этого, но обработчик никогда не запускается:

$('audio').on('error', function(){
    // Code to handle the error 
});

Я заметил, что networkState для аудиоэлемента равно 3 и readyState равно 0, когда я проверяю их в консоли после завершения загрузки страницы, но не могу найти событие для обработки, которое происходит после достижения этих состояний.

Как я могу что-то сделать (запустить функцию, отобразить модал и т. Д.), Если mp3 не загружается и аудио-элемент становится недоступным для воспроизведения?

Answer 1

Вот простое решение!

window.onload=function(){
  let audioElem=document.querySelectorAll("audio")[0];
  canBePlayed(audioElem);
}
function canBePlayed(audio){
 if(audio.readyState!=0){
  alert("This audio can be played!");
 }else{
  alert("This audio can not be played!");
 }
}

<audio src="./audio.ogg" controls>
  Your Browser doesn't support this type of audios
</audio>