js 播放音频|极客笔记

js 播放音频

在网页开发中，经常会遇到需要播放音频的情况，比如音乐播放器、语音提示等。而JavaScript可以帮助我们实现这一功能。本文将详细介绍如何使用JavaScript来播放音频。

HTML5 `<audio>` 元素

在HTML5中，我们可以使用<audio>元素来嵌入音频文件。<audio>元素有一些属性可以控制音频的播放行为，比如src表示音频文件的路径、controls表示是否显示浏览器自带的控制条等。

下面是一个简单的示例，演示如何在页面中嵌入音频文件并播放：

<!DOCTYPE html>
<html>
<head>
    <title>播放音频示例</title>
</head>
<body>
    <audio src="audio.mp3" controls></audio>
</body>
</html>

在上面的示例中，用户可以通过浏览器自带的控制条来播放音频文件audio.mp3。

使用 JavaScript 控制音频播放

除了使用<audio>元素外，我们还可以通过JavaScript来控制音频的播放。在实际开发中，这种方式更为常见，因为可以更灵活地控制音频的播放、暂停、音量等。

下面是一个示例代码，演示如何使用JavaScript来控制音频的播放：

<!DOCTYPE html>
<html>
<head>
    <title>控制音频播放示例</title>
</head>
<body>
    <audio id="myAudio" src="audio.mp3"></audio>

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

    <script>
        var audio = document.getElementById("myAudio");

        function playAudio() {
            audio.play();
        }

        function pauseAudio() {
            audio.pause();
        }
    </script>
</body>
</html>

在上面的示例中，我们使用JavaScript来获取<audio>元素并定义了playAudio和pauseAudio两个函数来控制音频的播放和暂停。

使用第三方库

除了原生的JavaScript控制外，我们还可以使用一些第三方库来帮助我们更方便地操作音频。比较常见的库有Howler.js和Sound.js等。

下面是一个示例代码，演示如何使用Howler.js来播放音频：

首先，在<head>标签内引入Howler.js库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js"></script>

然后，使用如下代码来播放音频：

<!DOCTYPE html>
<html>
<head>
    <title>使用 Howler.js 播放音频示例</title>
</head>
<body>
    <button onclick="playSound()">播放</button>

    <script>
        var sound = new Howl({
            src: ['audio.mp3']
        });

        function playSound() {
            sound.play();
        }
    </script>
</body>
</html>

在上面的示例中，我们使用Howler.js库创建了一个音频对象，并通过play方法来播放音频。