Uncaught (in promise) DOMException

179148
,

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 {: DOMException}
proto: Promise
[[PromiseStatus]]: "rejected"
[[PromiseValue]]: DOMException
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 :

merci bcp
matt

2 Réponse

7314
,

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.

179148
,

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

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