检查音频是否在没有 HTML5 标签的情况下播放

Question

I want to detect if an audio is playing, in case it is, don't allow to play it again until it finish. Play the same audio twice causes an audio bug.

HTML

<button onclick="play()">Play</button> Press two times

Javascript:

function play() {
    var sound = new Audio('https://mfaucet.com/images/notification2.mp3');

    console.log('Paused: ' + sound.paused);
    console.log('Ended: ' + sound.ended);
    console.log('Current time: ' + sound.currentTime);

    sound.play();

    console.log('-----------------');
    console.log('Paused: ' + sound.paused);
    console.log('Ended: ' + sound.ended);
    console.log('Current time: ' + sound.currentTime);
    console.log('-----------------------------');
}

Online: http://jsbin.com/hageko/1/

Thanks.

Answer 1

This should work:

 var sound = new Audio('https://mfaucet.com/images/notification2.mp3'); function play(sound) { if(!sound.paused) sound.pause(); sound.currentTime = 0; sound.play(); }

 <button onclick="play(sound)">Play</button>Press two times

---

Explanation:

1. When the page loads, the Audio variable is created, and the page can load the mp3 beforehand.
2. When the user clicks a button the play-function will:
3. Check if the sound is playing, and pause it if it is.
4. Set the time to 0.
5. Start playing

Answer 2

The reason you are getting that is that you are creating a new instance of the audio object every time. The Best way to prevent this is to save your instance somewhere. Heres how you can make it work:

/* Store your sound globally */
var sound = false;
function play() {
    /* Check if the sound is not instantiated yet */
    if(!sound){
        /* If its not instantiated, instantiate it here */
        sound = new Audio('https://mfaucet.com/images/notification2.mp3');
    }
    sound.play();
}

That should fix your issue. However, a better way would be to add it to the DOM itself instead as your button is part of the DOM anyway (and your button would be useless if there isn;t an audio element). That way you separate the issue of making something play and you could do it as such:

<audio id="myAudio">
    <source src="https://mfaucet.com/images/notification2.mp3" />
</audio>
<button onclick="document.getElementById('myAudio').play()">Play</button>

This would save you adding any more javascript to than needed as play is a built-in function anyhow. Now adding a pause button is trivial:

<button onclick="document.getElementById('myAudio').pause()">Pause</button>

Actually, adding any standard event is trivial. Heres a list of things you can do on this object referenced by id: https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement

Answer 3

Use this:

 var sound = new Audio('https://mfaucet.com/images/notification2.mp3'); var neverPlayed = true; function play() { if(sound.ended || neverPlayed) { neverPlayed = false; console.log('Paused: ' + sound.paused); console.log('Ended: ' + sound.ended); console.log('Current time: ' + sound.currentTime); sound.play(); console.log('-----------------'); console.log('Paused: ' + sound.paused); console.log('Ended: ' + sound.ended); console.log('Current time: ' + sound.currentTime); console.log('-----------------------------'); } else { console.log('Sound running'); } }

 <button onclick="play()">Play</button>

Answer 4

Here A Code who checks with cookies if the Sound is ON or OFF

You need to add the a js-Cookie and jQuery Librarys:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>


// Set a cookie
Cookies.set('click_play', 'OFF');

//Audio Source
var audio = new Audio("http://rs01.swissnwx.ch:20080/stream");

//Audio Starts on first Click
document.onclick = function() {

  if (Cookies.get('click_play')== 'OFF') {
    //Audio was OFF so now will be turned ON
    audio.play();
    console.log('play');
    Cookies.set('click_play', 'ON');
  }
  else {
//Audio was ON so now will be turned OFF
        audio.pause();
    console.log('stop');
    Cookies.set('click_play', 'OFF');
  }