检查是否在没有使用 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/

谢谢。

- agustin

---

sound.paused 对你没用？只需检查它是否返回 true/false，并相应调用 play() 函数即可。 - Vivek Pradhan

它不能正常工作的原因是他每次调用play()方法时都创建了一个新的实例。 - somethinghere

即使我快速连续调用“play”两次（第一个“play”音频正在播放），我仍然得到“sound.paused：true”。http://jsbin.com/hageko/1/ - agustin

@arglab 这是因为你的 sound 对象每次都不同，你没有在每次调用 play() 时更改它，而是每次创建一个新实例并使用默认值。 - somethinghere

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. 页面加载时，创建音频变量，页面可以预先加载mp3文件。
2. 当用户点击按钮时，播放函数将会执行以下操作：
3. 检查声音是否正在播放，如果是则暂停它。
4. 将时间设置为0。
5. 开始播放。

- TRGWII

---

比我的答案更好的解决方案 - ByteHamster

说实话，我认为将音频添加到DOM中更好，因为JavaScript依赖于音频元素能够存在，因此使用JavaScript的内置媒体元素功能可能会更容易。 - somethinghere

new Audio() 实际上创建了一个 DOM 元素。您可以与它进行交互，而无需将其放在页面的实际主体中。 - TRGWII

是的，但是在正文中没有它是没有意义的。您可以放弃使用JavaScript来创建新元素，并为那些没有JavaScript的人提供兼容性。这被称为可访问性，这也是Web建立的目的。我喜欢JavaScript，但它被用于太多可以不用它完成的事情。 - somethinghere

是的，采用这种方法，音频元素将独立于JavaScript，您需要更改的唯一内容是 var sound = document.getElementById('audioElement');。 - TRGWII

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代码，因为播放已经是内置函数。现在添加暂停按钮很简单：

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

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

- somethinghere

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>

- ByteHamster

Answer 4

这里有一段代码，它通过 cookies 检查声音是否开启或关闭。

你需要添加 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');
  }

- cnm