Uncaught (in promise) DOMException

mattzeub
Javascript

bjr,

j'ai un script assez simple qui consiste à lancer un audio lorsque on clique sur sa box, et le mettre en pause si on clique une seconde fois.

var playbutton = function (element) {
document.querySelectorAll('#sound')[element].addEventListener('click', function () {
if (document.querySelector('#audio-file').paused) {
document.querySelector('#audio-file').play()
document.querySelectorAll('#playbutton')[element].innerHTML = ''
} else {
document.querySelector('#audio-file').pause()
document.querySelectorAll('#playbutton')[element].innerHTML = ''
}
})
}

Ca marche sans problème. Cependant quelques fois, après que je refresh la page j'ai cette erreur:

Uncaught (in promise) DOMException
Promise {<rejected>: DOMException}
proto: Promise

code: 9
message: "The element has no supported sources."
name: "NotSupportedError"
proto: DOMException

m'indiquant la ligne
document.querySelector('#audio-file').play()

mon script est bien à la fin de l'html et ça ne marche pas non plus lorseque je fais la commande dans la console (et donc quand le liste est déjà load)

Et si j'attend un peu et que je re-refresh la page j'ai plus ce problème.
J'ai fais quelque recherche mais ça a pas l'air d'être un problème très répandu.

voici les paramètres de l'audio :
<audio src="../test.wav" id="audio-file" preload="metadata"></audio>

merci bcp
matt

2 réponses

Maenhyr

Le problème vient de document.querySelector('#audio-file').play() qui retourne une promise (cf https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play). Hors tu ne gères pas le cas où la promise échoue, d'où l'error dans la console.

var playbutton = function (element) {
  document.querySelectorAll('#sound')[element].addEventListener('click', function () {
    if (document.querySelector('#audio-file').paused) {
      document.querySelector('#audio-file').play()
        .catch((err) => {
          // j'ai mis ça pour l'exemple, tu peux faire autre chose
          throw err;
        });
      document.querySelectorAll('#playbutton')[element].innerHTML = ''
    } else {
      document.querySelector('#audio-file').pause()
      document.querySelectorAll('#playbutton')[element].innerHTML = ''
    }
  })
}

Quand à la raison de l'erreur, elle est indiquée dans le message The element has no supported sources.. Il semblerait que tu n'aies pas de sources téléchargeables lorsque tu essayes de lancer le fichier audio.

mattzeub
Auteur

Bonjour,
désolé du temps de réponse (vacance) et merci pr la votre
L'erreur est maintenant catch mais ça ne résoud évidemment pas le problème.

Ca viendrait donc du fait que je n'ai pas de sources téléchargeables ?
Pourtant si ça marche 2 fois sur 3 c'est qu'il y en a bien (et le site est en local sur mon pc).

Voici ma balise audio
<audio src="../test.wav" type="audio/wav" id="audio-file"></audio>

Je ne vois pas trop d'ou vient le pb :(