📌  相关文章
📜  javascript 音频停止 - Javascript (1)

📅  最后修改于: 2023-12-03 15:01:47.065000             🧑  作者: Mango

JavaScript 音频停止

在开发前端网页或应用时，可能需要在其中添加音频播放功能。但是，在有些场景下，可能需要实现停止音频的功能。本文将介绍如何使用 JavaScript 停止正在播放的音频。

停止音频

停止音频主要是利用音频对象的 pause() 方法和 currentTime 属性。

pause() 方法

pause() 方法可以暂停正在播放的音频。我们需要获取正在播放的音频对象，然后调用 pause() 方法即可。

const audio = new Audio('audio.mp3');
audio.play(); // 播放音频
audio.pause(); // 暂停音频
currentTime 属性

currentTime 属性记录了当前音频的播放时间，单位为秒。我们可以将 currentTime 属性设置为 0 来停止音频的播放。

const audio = new Audio('audio.mp3');
audio.play(); // 播放音频
audio.currentTime = 0; // 停止音频播放

在以上两个例子中，我们需要先使用 new Audio() 创建一个音频对象，并将音频文件的链接作为参数传入，然后使用 play() 方法来播放音频。最后，可以使用 pause() 方法或将 currentTime 属性设置为 0 来停止音频的播放。

完整示例

下面是一个完整的示例，当点击按钮时，将停止播放音频。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript 音频停止</title>
  </head>
  <body>
    <audio id="audio" src="audio.mp3"></audio>
    <button id="stop">停止音频</button>
    <script>
      const audio = document.getElementById('audio');

      document.getElementById('stop').addEventListener('click', function() {
        audio.pause();
        audio.currentTime = 0;
      });
    </script>
  </body>
</html>

在以上示例中，我们创建了一个带有 id 为 audio 的 <audio> 元素，并将音频文件的链接作为其 src 属性的值。我们还创建了一个带有 id 为 stop 的按钮，并将其添加了点击事件监听器。当点击按钮时，将调用 pause() 方法和设置 currentTime 为 0 的操作来停止音频的播放。

结论

本文介绍了如何使用 JavaScript 停止正在播放的音频。我们可以使用音频对象的 pause() 方法和 currentTime 属性来实现这个功能。在开发网页或应用时，可以根据实际情况使用这些方法来控制音频的播放。