Arrêter un fichier audio créé via javascript

Question

Voici à peu près à quoi ressemble mon script.

var ButtonSelect = document.querySelectorAll(".musicBtn")

ButtonSelect.forEach(element => element.addEventListener("click", playMusic))

function playMusic(){
    var audio = new Audio("music1.mp3");
    if (this.id == "A")
        audio.play();
    else if (this.id == "B") {
        audio.src="music2.mp3";
        audio.play();
    } else if (this.id == "C") {
        audio.src="music3.mp3";
        audio.play();
    } ...
}

Et ça continue à peu près comme ça. Ainsi, selon le bouton enfoncé, une chanson différente est lue. Mais je veux faire en sorte que non seulement le fait d'appuyer sur un bouton démarre la chanson correspondante, mais qu'il arrête également la chanson en cours de lecture. Étant donné que l'objet audio est créé localement et disparaît après l'appel de la fonction, comment procéder? N'y a-t-il pas un moyen de demander simplement à la page d'arrêter tout son joué sans préciser d'où il vient?

Answer 1

La question demande comment la lecture audio en cours peut être mise en pause lorsqu'un nouveau fichier est sélectionné.

Il y a un problème supplémentaire. Le code donné crée un nouvel élément à chaque fois qu'un bouton est enfoncé, mais il ne s'en débarrasse jamais, donc progressivement, le magasin se remplira d'éléments audio qui ne seront jamais revisités.

Un moyen simple de contourner ce problème est de n'avoir qu'un seul élément audio et de changer le src lorsqu'un bouton est cliqué. De cette façon, nous ne construisons pas des éléments qui deviennent par la suite superflus.

Essayez tout d'abord ce code:

var ButtonSelect = document.querySelectorAll(".musicBtn")
var audio = new Audio("music1.mp3");

ButtonSelect.forEach(element => element.addEventListener("click", playMusic))

function playMusic(){
    audio.pause();
    if (this.id == "A") {
        audio.src="music1.mp3";
        audio.play();
    }
    else if (this.id == "B") {
        audio.src="music2.mp3";
        audio.play();
    } else if (this.id == "C") {
        audio.src="music3.mp3";
        audio.play();
    }
}

Si cela fonctionne bien, vous pouvez envisager de simplifier votre code, par exemple en ayant la source audio comme attribut data-src dans chacun de vos boutons plutôt que d'avoir à trier l'audio à lire via un identifiant.