JS 播放 MP3|极客笔记

JS 播放 MP3

在网页开发中，有时候我们需要在页面中播放音频文件，比如 MP3 格式的音乐。通过使用 JavaScript，我们可以很方便地实现在网页中播放 MP3 音频的功能。本文将详细介绍如何使用 JavaScript 播放 MP3 音频文件。

使用 Audio 对象

要在网页中播放 MP3 音频，我们可以使用 HTML5 中提供的 Audio 对象。Audio 对象允许我们在网页中加载音频文件并播放它们。下面是一个简单的示例代码，演示如何使用 Audio 对象播放 MP3 音频文件：

<!DOCTYPE html>
<html>
<head>
    <title>Play MP3 with JavaScript</title>
</head>
<body>
    <button onclick="playAudio()">Play Music</button>
    <audio id="myAudio" src="music.mp3"></audio>

    <script>
        function playAudio() {
            var audio = document.getElementById("myAudio");
            audio.play();
        }
    </script>
</body>
</html>

在上面的示例中，我们创建了一个按钮，并为其添加了一个 onclick 事件处理程序 playAudio()。当用户点击按钮时，该事件处理程序将会执行，调用 playAudio() 函数来播放音频文件。在 playAudio() 函数中，我们首先使用 document.getElementById() 方法获取了 myAudio 元素，然后调用了 play() 方法来开始播放音频。

当用户点击 “Play Music” 按钮时，页面中的 music.mp3 音频文件将会开始播放。请注意，我们需要替换示例代码中的 music.mp3 为实际存在的音频文件路径。

控制音频播放

除了播放音频文件外，我们还可以通过 JavaScript 控制音频的播放、暂停、停止等操作。下面是一个示例代码，展示了如何使用 JavaScript 控制音频的播放、暂停和停止：

<!DOCTYPE html>
<html>
<head>
    <title>Control MP3 with JavaScript</title>
</head>
<body>
    <button onclick="playAudio()">Play Music</button>
    <button onclick="pauseAudio()">Pause Music</button>
    <button onclick="stopAudio()">Stop Music</button>
    <audio id="myAudio" src="music.mp3"></audio>

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

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

        function pauseAudio() {
            audio.pause();
        }

        function stopAudio() {
            audio.pause();
            audio.currentTime = 0;
        }
    </script>
</body>
</html>

在上面的示例中，我们新增了 “Pause Music” 和 “Stop Music” 两个按钮。分别通过调用 pause() 方法暂停音频的播放和先调用 pause() 方法暂停播放，再将音频的播放时间重置为 0 来实现停止音频的播放效果。

监听音频事件

在使用 JavaScript 播放音频时，我们还可以通过监听音频事件来实现一些特定的功能。比如当音频播放完成时执行某个操作。下面是一个示例代码，展示了如何监听音频播放完成事件：

<!DOCTYPE html>
<html>
<head>
    <title>MP3 Event Listener</title>
</head>
<body>
    <audio id="myAudio" src="music.mp3"></audio>

    <script>
        var audio = document.getElementById("myAudio");
        audio.addEventListener("ended", function() {
            alert("Music has finished playing!");
        });
    </script>
</body>
</html>

在上面的示例中，我们通过调用 addEventListener() 方法来监听音频的 “ended” 事件。当音频播放完成时，会触发该事件，之后会弹出一个包含文字 “Music has finished playing!” 的提示框。