J*aScript控制音频播放与暂停：完整教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript控制音频播放与暂停：完整教程

2025-10-26

浏览次数：次

返回列表

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

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

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

问题分析

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

解决方案

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

在HTML中创建一个元素。
使用J*aScript获取该元素的引用。
通过该引用调用play()和pause()方法。

HTML代码：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

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

J*aScript代码：

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

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

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

代码解释

document.getElementById(id): 这是一个J*aScript方法，用于根据指定的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>