设置间隔播放音频仅循环音频一次？

Question

I have a set interval and within the set interval I have a sound that needs to be played once and once only but the trouble is the sound keeps looping and doesn't stop does anyone have any idea to what I'm doing wrong here is what I have tried: html:

<audio id="swoosh">
  <source src="/resources/music/swoosh.mp3" type="audio/mpeg">
</audio>

js:

    var swoosh = document.getElementById("swoosh");

    setInterval(function () {
        if ($('.c:contains("01")').length > 0) {
            $(".links #abt").attr("href", "about.html");

            swoosh.addEventListener('ended', function () {
                swoosh.pause();
                swoosh.currentTime = 0;
                swoosh.loop = false;
            }, false);
            swoosh.play();

            //
            if ($('.c:contains("02")').length > 0) {
                $(".links #work").attr("href", "work.html");

                swoosh.addEventListener('ended', function () {
                    swoosh.pause();
                    swoosh.currentTime = 0;
                    swoosh.loop = false;
                }, false);
                swoosh.play();
            }
        }
    }, 10);

The aim is to play the sound when the contents of class="c" changes so if the contents is 01 the audio should play once and then pause or stop then when it changes to 02 it should play again and then stop or pause etc etc Thanks in advance.

Answer 1

I think that you're trying to do that. Store in a variable, the "last sound" reproduced and only plays a new one when it has changed. The listener over "ended" event is unnecessary because you only play once per change.

var swoosh = document.getElementById("swoosh");
var lastPlay = "00";

setInterval(function () {
    var cValue = $('.c').text();
    if (lastPlay != "01" && cValue.indexOf("01") >= 0) {
        $(".links #abt").attr("href", "about.html");
        swoosh.play();
        lastPlay = "01";
    }
    else if (lastPlay != "02" && cValue.indexOf("02") >= 0) {
        $(".links #work").attr("href", "work.html");
        swoosh.play();
        lastPlay = "02";
    }
}, 10);

Other better way was to add a listener to the change event of the ".c" element, it avoids the "query" every 10ms. But I don't have enough code to show you.