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

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

DDD

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

原创

244人浏览过

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

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

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

问题分析

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

解决方案

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

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

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

HTML代码：

Dreamlike.art

内置5种模型的AI图像生成器

查看详情

<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代码中，我们创建了一个

JavaScript代码：

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

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

登录后复制

这段JavaScript代码定义了两个函数：playAudio()和pauseAudio()。这两个函数都接受一个id参数，用于指定要控制的

代码解释

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

完整示例




  Audio Play/Pause Example



<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>

登录后复制