onlick event detect double click-CodePudding

Im new here, my problem is that Im trying to play music or another sound with an onclick event, the problem begin when I try to stop that sound, I expect that the sound stop, but the sound begin ring again, here is the javascript code:

const playToPause = document.getElementById("play-song");

// main audio functions
function playSound() {
    const audio = new Audio("track_path");
    addEventListener("click", _ => {
        switch (playToPause.value) {
            case "pause":
                audio.play();
                playToPause.value = "play";
                break;
            case "play":
                audio.pause();
                playToPause.value = "pause"
        }
        console.log(playToPause.value);
    });
};

And here is the button element

<button id="play-song" value="pause" onclick="playSound()" ></button>

i had try before with if...else if, sentence and i changed it by a switch sentence thinking that the problem was on if...else if.

Later I use a console.log to see the value of the button and I get this the first time that I click it:browser console as code tag with "```")

the console show that: play jquery.client.js:16

But if I click again on the button, to stop the sound, it detect as a double click

The console show that:

play                            jquery.client.js:16 (The first click)
pause                           jquery.client.js:16
play                            jquery.client.js:16

Sorry, for my bad english, I hope that anyone can help thanks in advance :)

CodePudding user response：

Your problem is that you're redefining the audio variable each time the function is executing - with the result that the audio.play() or audio.pause() is playing or pausing that just-created sound. It does nothing with any that were previously playing.

To fix, just move the definition of audio outside the function.

Also, as @Ivar says in his comment, your addEventListener should not be inside the function, or you add new listeners each time. Your function will already run each time the button is clicked because of the inline onclick attribute on the button.

So change your code to this:

const playToPause = document.getElementById("play-song");
const audio = new Audio("track_path");

// main audio functions
function playSound() {
    switch (playToPause.value) {
        case "pause":
            audio.play();
            playToPause.value = "play";
            break;
        case "play":
            audio.pause();
            playToPause.value = "pause"
    }
    console.log(playToPause.value);
};

CodePudding user response：

<!-- User Audio Tag -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <audio id="audio-tag">
        <source src="./partham-ganesh-besado-re.mp3" type="audio/ogg">
        <source src="./partham-ganesh-besado-re.mp3" type="audio/mpeg">
    </audio>

    <button onclick="play()" type="button">Play</button>
    <button onclick="pause()" type="button">Pause</button>

    <script>
        var audio = document.getElementById("audio-tag");

        function play() {
            audio.play();
        }

        function pause() {
            audio.pause();
        } 
    </script>

</body>

</html>