JavaScript控制音频播放与暂停：完整教程-html教程-PHP中文网

JavaScript控制音频播放与暂停：完整教程

DDD

发布： 2025-10-26 11:56:16

原创

217人浏览过

javascript控制音频播放与暂停：完整教程

本文旨在解决JavaScript中音频播放与暂停控制失效的问题。通过分析常见错误原因，提供了一种基于HTMLMediaElement API的解决方案，该方案通过获取音频元素的引用，实现精确的播放和暂停控制。文章包含详细的代码示例和步骤说明，帮助开发者轻松实现音频控制功能。

在Web开发中，音频播放和暂停是常见的需求。然而，直接使用new Audio()创建音频对象并调用play()和pause()方法，在某些情况下可能无法实现预期的暂停效果。这是因为每次点击按钮都会创建一个新的音频对象，导致无法控制之前播放的音频。本文将介绍一种更可靠的方法，通过获取音频元素的引用来控制播放和暂停。

问题分析

使用new Audio(url).play()和new Audio(url).pause()的问题在于，每次调用都会创建一个新的Audio对象。因此，pause()方法实际上是在一个新创建的、未播放的音频对象上执行，而不是在正在播放的音频对象上执行。

解决方案

为了解决这个问题，我们需要：

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

在HTML中创建一个<audio>元素。
使用JavaScript获取该<audio>元素的引用。
通过该引用调用play()和pause()方法。

HTML代码：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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

<input type="button" value="PLAY" onclick="playAudio('sound')" />
<input type="button" value="PAUSE" onclick="pauseAudio('sound')" />

登录后复制

在这个HTML代码中，我们创建了一个<audio>元素，并设置了id属性为sound。controls属性添加了浏览器默认的播放控件，方便测试。src属性指定了音频文件的URL。同时，我们创建了两个按钮，分别用于播放和暂停音频。

JavaScript代码：

function playAudio(id) {
  document.getElementById(id).play();
}

function pauseAudio(id) {
  document.getElementById(id).pause();
}

登录后复制

这段JavaScript代码定义了两个函数：playAudio()和pauseAudio()。这两个函数都接受一个id参数，用于指定要控制的<audio>元素的id。函数内部使用document.getElementById()获取<audio>元素的引用，然后分别调用play()和pause()方法。

代码解释

document.getElementById(id): 这是一个JavaScript方法，用于根据指定的id获取HTML元素。在本例中，它用于获取<audio>元素的引用。
.play(): 这是HTMLMediaElement API提供的方法，用于开始播放音频。
.pause(): 这是HTMLMediaElement API提供的方法，用于暂停音频。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Audio Play/Pause Example</title>
</head>
<body>

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

<input type="button" value="PLAY" onclick="playAudio('sound')" />
<input type="button" value="PAUSE" onclick="pauseAudio('sound')" />

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

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

</body>
</html>

登录后复制