Uncaught (in promise) DOMException

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

m'indiquant la ligne

document.querySelector('#audio-file').play()

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

Salut

Possiblement un code appelé trop rapidement au chargement de la page web.

Votre code doit se trouver dans un "DOMContentLoaded", voir : https://developer.mozilla.org/fr/docs/Web/Events/DOMContentLoaded#Utilisation_basique

Salut

Je sais pas trop si ça vient de là.

3 raisons :

- mon script est placé en bas du code html
- lorsque je tente

document.querySelector('#audio-file').play()

dans la console (donc la page est donc déjà load) j'ai la même erreur
- j'ai placé la ligne exécutant ma fonction dans un DOMCONTENT et ça ne change rien.

Des précisions sur l'erreur :

Promise {<rejected>: DOMException}
__proto__: Promise
[[PromiseStatus]]: "rejected"
[[PromiseValue]]: DOMException
code: 9
message: "The element has no supported sources."
name: "NotSupportedError"
__proto__: DOMException

C'est vraiment une erreur que je comprend pas. merci bcp en tout cas

Bonjour mattzeub,

Je pense comme danielhagnoul,
Tu peux nous monter le code que tu as fait avec DOMCONTENT
Il doit être du type (c'est juste un exemple):

document.addEventListener('DOMContentLoaded',function(){
   var aBt = document.getElementsByClassName("btPlays");
 for(var i = 0; i < aBt .length; i++){
   playbutton(aBt[i]);
  }
});

bjrs,

désolé du délais de réponse (vacance)

voici mon cote avec le DOM :

document.addEventListener('DOMContentLoaded',function() {
    for(var i = 0; i < document.querySelectorAll('#audio-file').length; i++){
        timer(i)
        playbutton(i)
    }
})

mais je pense pas trop que l'erreur vienne du DOM (puisqu'elle persiste) mais de

The element has no supported sources.

Je ne comprend pas trop cette erreur (malgré des recherches)

j'ai entre temps fais quelques modifications sur mon html et mon js

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

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

merci bcp