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()将返回承诺；我不确定如何确保音频一直播放；可靠地。

现在，该剧本可以在随机时间播放，或者只是抛出错误。

Answer 1

如果您收到有关Promises和.play()的错误消息，则需要将.play()视为Promise，请参阅此article。

我没有看到任何button#button，所以我认为那只是一个错字。
this没有上下文，因此将引用window（非常无用）
```
this.iAudio = document.getElementById('i-audio');
```
应该声明一个变量（例如var iAudio = ...或const iAudio = ...）。
this具有侦听click事件的元素的上下文
```
$("#button").on('click', function() {
  this.iAuido.play();
});
```
无法想象这段代码甚至是随机工作的，随着我阅读下一行，它变得更糟。假设iAudio是正确的，并且引用了<audio>标签，但是由于某种原因，this被加了前缀（为什么？！？）。 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>

单击按钮后立即播放/暂停音频

1 个答案: