声音并不总是与JavaScript一起播放

Question

我正在使用以下代码在浏览器上播放声音：

HTML

<audio id="' + newMessageSoundObjectId + '"><source src="sound.mp3" type="audio/mpeg"></audio>

使用Javascript

this.newMessageSoundObject = document.getElementById(newMessageSoundObjectId);
// ...
var playPromise = this.newMessageSoundObject.play();
if (playPromise !== undefined) {
    playPromise.then(function() {
      // Automatic playback started!
    }).catch(function(error) {
      console.error("Sound was not played: " + error);
     });
}

它在大多数情况下都能正常运行，但是有时它会随机停止工作几分钟并重新启动，而无需重新加载页面或导航。 而且，控制台不会出错。

对于更多上下文，它用于在用户收到新消息时播放通知。

有没有更好的方法来确保播放声音？

Answer 1

您可能会遇到这样的情况，在等待任何新的点击之前，它等待完成剪辑。

如果是这样，请在函数的开头插入以下代码，以在每次单击剪辑时重置剪辑：

audio.currentTime = 0; // On each click, rewind clip to start

它看起来像这样：

if (playPromise !== undefined) {
    playPromise.then(function() {
    audio.currentTime = 0; // On each click, rewind clip to start
      // Automatic playback started!
    }).catch(function(error) {
      console.error("Sound was not played: " + error);
     });

您可能需要考虑调整代码，这样可以使代码更简洁。 我还没有测试过，但是应该可以正常工作：

const soundObject = document.querySelector("#newMessageSoundObjectId");

soundObject.addEventListener("mousedown", playClip);

function playClip() {
    audio.currentTime = 0; // On each click, rewind clip to start
    audio.play();
} else {
    console.error("Something went wrong");