JavaScript控制音频播放与暂停：正确方法与实践-html教程-PHP中文网

JavaScript控制音频播放与暂停：正确方法与实践

霞舞

发布： 2025-10-29 11:24:30

原创

875人浏览过

javascript控制音频播放与暂停：正确方法与实践

本文旨在解决使用JavaScript控制音频播放和暂停时遇到的问题。通过分析常见错误，提供了一种基于HTMLMediaElement API的有效解决方案，并附带详细代码示例，帮助开发者实现对音频元素的精确控制。

在使用JavaScript控制网页音频的播放与暂停时，一个常见的误区是在playAudio和pauseAudio函数中每次都创建新的Audio对象。这种方法的问题在于，每次点击播放或暂停按钮，都会创建一个新的音频实例，导致无法对同一个音频流进行控制，因此暂停功能无法正常工作。正确的方法是获取对同一个音频元素的引用，然后调用其play()和pause()方法。

正确实现音频播放与暂停

要实现正确的音频播放与暂停功能，需要遵循以下步骤：

创建HTML音频元素： 在HTML中，使用<audio>标签创建一个音频元素，并为其指定一个唯一的id。src属性指定音频文件的URL。

立即学习“Java免费学习笔记（深入）”；

叮当好记-AI音视频转图文
AI音视频转录与总结，内容学习效率 x10！

193

查看详情
```
<audio id="myAudio" controls src="https://cldup.com/qR72ozoaiQ.mp3">
  Your browser does not support the
  <code>audio</code> element.
</audio>
```
登录后复制
- id="myAudio"：为音频元素指定唯一的ID，方便JavaScript获取该元素。
- controls：显示浏览器默认的音频控制条，方便用户操作。
- src="https://cldup.com/qR72ozoaiQ.mp3"：指定音频文件的URL。
编写JavaScript函数： 编写playAudio和pauseAudio函数，通过document.getElementById()获取音频元素，然后调用其play()和pause()方法。
```
function playAudio(id) {
  const audio = document.getElementById(id);
  audio.play();
}

function pauseAudio(id) {
  const audio = document.getElementById(id);
  audio.pause();
}
```
登录后复制
- document.getElementById(id)：根据ID获取HTML音频元素。
- audio.play()：播放音频。
- audio.pause()：暂停音频。
添加播放和暂停按钮： 添加两个按钮，分别调用playAudio和pauseAudio函数。
```
<button onclick="playAudio('myAudio')">播放</button>
<button onclick="pauseAudio('myAudio')">暂停</button>
```
登录后复制
- onclick="playAudio('myAudio')"：点击按钮时，调用playAudio函数，并传入音频元素的ID。
- onclick="pauseAudio('myAudio')"：点击按钮时，调用pauseAudio函数，并传入音频元素的ID。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>音频播放与暂停</title>
</head>
<body>

<audio id="myAudio" controls src="https://cldup.com/qR72ozoaiQ.mp3">
  Your browser does not support the
  <code>audio</code> element.
</audio>

<button onclick="playAudio('myAudio')">播放</button>
<button onclick="pauseAudio('myAudio')">暂停</button>

<script>
  function playAudio(id) {
    const audio = document.getElementById(id);
    audio.play();
  }

  function pauseAudio(id) {
    const audio = document.getElementById(id);
    audio.pause();
  }
</script>

</body>
</html>

登录后复制