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

Question

我想检测音频是否正在播放，如果是，则在播放完成之前不允许再次播放。 两次播放相同的音频会导致音频错误。

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('-----------------------------');
}

在线： http : //jsbin.com/hageko/1/

谢谢。

Answer 1

这应该有效：

 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

---

解释：

1. 当页面加载时，会创建 Audio 变量，页面可以预先加载 mp3。
2. 当用户单击按钮时，播放功能将：
3. 检查声音是否正在播放，如果是则暂停。
4. 将时间设置为 0。
5. 开始玩

Answer 2

你得到它的原因是你每次都在创建音频对象的一个​​新实例。 防止这种情况的最佳方法是将您的实例保存在某处。 以下是如何使其工作：

/* 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();
}

那应该可以解决您的问题。 但是，更好的方法是将它添加到 DOM 本身，因为您的按钮无论如何都是 DOM 的一部分（如果没有音频元素，您的按钮将毫无用处）。 这样你就可以把玩游戏的问题分开，你可以这样做：

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

这将节省您添加比需要更多的 javascript，因为无论如何 play 是一个内置函数。 现在添加一个暂停按钮是微不足道的：

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

实际上，添加任何标准事件都是微不足道的。 以下是您可以对 id 引用的此对象执行的操作列表： https : //developer.mozilla.org/en/docs/Web/API/HTMLMediaElement

Answer 3

用这个：

 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

这里有一个代码，用于检查声音是否打开或关闭

您需要添加一个js-Cookie和jQuery库：

<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');
  }