JavaScript 播放声音 onClick

在网页应用中，我们有时需要在某个事件（如点击按钮）触发时播放声音。JavaScript提供了Audio对象来方便地实现这一功能。

创建 Audio 对象

要播放音频，首先要创建一个 Audio 对象并指定音频文件的 URL：

var audio = new Audio('audio.mp3');

控制 Audio 对象

Audio 对象的控制方法如下：

• play()：播放音频。
• pause()：暂停音频。
• currentTime：设置或返回音频的当前播放位置，单位为秒。
• ended：表示音频是否已播放完毕。

下面是一个示例：

var audio = new Audio('audio.mp3');
audio.play();

在 onClick 事件中播放音频

要在点击按钮时播放声音，可以在按钮的 onClick 事件中调用 play() 方法：

<button onclick="playAudio()">播放音频</button>
<script>
function playAudio() {
  var audio = new Audio('audio.mp3');
  audio.play();
}
</script>

可能的问题

在一些浏览器中，如 Safari 和 Chrome ，播放音频必须是用户触发的，否则会被阻止。

为此，可以使用 canplay 事件来检测音频是否准备好可以播放，并在用户点击按钮后才调用 play() 方法。代码如下：

<button onclick="playAudio()">播放音频</button>
<script>
function playAudio() {
  var audio = new Audio('audio.mp3');
  audio.addEventListener('canplay', function() {
    audio.play();
  });
}
</script>

总结

在 onClick 事件中播放声音，可以使用 Audio 对象的 play() 方法。在某些浏览器中，为了避免安全问题，播放声音必须是用户操作触发的。可以使用 canplay 事件来检测音频准备好后再播放。