web-dev-qa-db-fra.com

La lecture du fichier audio renvoie "Uncaught (promis)" mais fonctionne dans la console

J'essaie de lire des fichiers audio (j'en ai essayé plusieurs). Tous sont des mp3. J'ai testé les éléments suivants sur MAMP localhost et également en l'exécutant simplement dans le navigateur.

J'utilise le javascript suivant:

var testSound = new Audio();
testSound.src = "a.mp3"
setTimeout(testSound.play.bind(testSound),100)

Cela renvoie l'erreur:

Uncaught (in promise)

Essayer de l'attraper:

var testSound = new Audio();
testSound.src = "a.mp3"
setTimeout(playSound,100)
function playSound () {
    testSound.play().then(response => {

    }).catch(e => {
        console.log(e);
    })
}

ne renvoie rien ("")

Mais si je me tourne maintenant vers la console et tape simplement:

testSound.play()

Le son joue comme il se doit.

Même si je commente la troisième ligne du premier extrait de code comme:

//setTimeout(testSound.play.bind(testSound),100)

Edit:

Même si les gens ne savent pas quelle est la solution, je serais toujours intéressé de savoir s'ils peuvent reproduire l'erreur.

Edit 2:

À propos, le problème ne persiste pas dans Firefox ou Safari.

javascripthtml5asynchronousaudiohtml5-audio
10
PolymorphismPrince

Si vous lisez le message d'erreur complet associé à l'exception, vous obtiendrez une meilleure explication:

DOM Non capturé (promis) DOMException: play () a échoué car l'utilisateur n'a pas interagi avec le document au préalable. https://goo.gl/xX8pDD

L'article de Google " Autoplay Policy Changes " (lié au message ci-dessus) explique la situation en détail.

La version courte est la suivante: si vous souhaitez lire de l'audio ou de la vidéo, vous devez attendre que l'utilisateur ait cliqué sur un élément de la page.

20
duskwuff