javascript - 单击按钮播放/暂停音频没有延迟

Question

我正在寻找一种在单击按钮后立即播放 html5 音频的方法。现在，它确实有效；但不是很可靠。

我的文件是托管在 AWS Cloudfront 上的 300Kb MP3 (128Kbps)。

<audio id="i-audio" src="https://cdn/url/to/i-audio.mp3" preload="auto" type="audio/mp3"></audio>

this.iAudio = document.getElementById('i-audio');

$("#button").on('click', function() {
  this.iAuido.play();
});

我了解到 play() 会返回一个 promise；而且我不确定如何确定音频一直在播放；可靠地。

现在，该播放会随机运行或只是抛出一个错误。

Answer 1

如果您收到有关 Promises 和 .play() 的错误消息，你需要治疗 .play()作为 promise ，请参阅此 article .

• 我没有看到任何 button#button所以我假设这只是一个打字错误。

• this没有上下文，所以它会引用 window (很没用)

  this.iAudio = document.getElementById('i-audio');
  

  应该声明一个变量(如 var iAudio = ... 或 const iAudio = ...)。

• this具有监听点击事件的元素上下文

  $("#button").on('click', function() {
    this.iAuido.play();
  });
  

  无法想象这段代码会随机运行，当我阅读下一行时它会变得更糟。让我们假设 iAudio是正确的并引用了 <audio>标签，但出于某种原因 this以它为前缀(wHy？!？)。 this会引用按钮，所以一行代码的每一段都是错误的。

const playback = (e) => {
  const mp3 = $('.mp3')[0];
  let action = mp3.paused || mp3.ended ? mp3.play() : mp3.pause();
  return action;
}

playback().then(() => console.log('Promise Resolved')).catch(error => $('.btn').on('click', playback));

button {
  font-size: 5rem;
  color: cyan;
  border: 0;
  background: none;
  cursor: pointer
}

button:focus {
  outline: none
}

button:hover {
  color: tomato;
}

<audio class="mp3" src="https://glsbx.s3.amazonaws.com/-/dd.mp3" preload="auto"></audio>
<button class='btn' type='button'>&#9654;</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>