JavaScript中audio停止播放事件

发布时间:2023年12月22日

在HTML中,使用JavaScript来控制<audio>元素的播放和停止。要停止播放音频,使用pause()方法。

以下是一个示例,展示了如何使用JavaScript来停止播放音频:

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  你的浏览器不支持audio元素。
</audio>

<button onclick="stopAudio()">停止播放</button>

<script>
function stopAudio() {
  var audio = document.getElementById("myAudio");
  audio.pause(); // 停止播放音频
  audio.currentTime = 0; // 将音频的当前时间设置为0,即从头开始
}
</script>

</body>
</html>

在上面的示例中,有一个<audio>元素,它的id属性设置为"myAudio",同时创建了一个按钮,当点击该按钮时,会调用stopAudio()函数。

stopAudio()函数通过document.getElementById("myAudio")获取了<audio>元素的引用,并使用pause()方法停止了音频的播放。另外,我们还使用currentTime属性将音频的当前时间设置为0,这样下次播放时会从头开始。

audio的用法和说明

在HTML中,<audio>元素用于在网页上嵌入音频内容。它提供了一种方便的方式来嵌入和播放音频文件。

以下是<audio>元素的基本用法:

<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
  您的浏览器不支持audio元素。
</audio>

在上面的示例中,<audio>元素包含一个controls属性,用于显示音频播放器的控制面板,如播放、暂停和音量调节等。

<source>元素用于指定音频文件的路径和类型。在示例中,<source>元素的src属性指定了音频文件的路径为"audio_file.mp3",type属性指定了音频文件的类型为"audio/mpeg"。

如果浏览器不支持<audio>元素,将显示<audio>元素内部的文本内容,即"您的浏览器不支持audio元素"。

除了controls属性外,<audio>元素还支持其他一些属性,如:

  • autoplay:自动播放音频文件。
  • loop:循环播放音频文件。
  • muted:默认静音音频文件。
  • preload:预加载音频文件。
  • src:指定音频文件的路径。

这些属性可以根据需要进行组合和设置,以满足特定的需求。

需要注意的是,不同的浏览器可能对音频格式的支持程度不同,因此最好提供多种格式的音频文件,以确保在各种浏览器上都能正常播放。

文章来源:https://blog.csdn.net/weixin_41290949/article/details/135079147
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。