程序员教程

HTML5 Audio(音频)

添加音频到网页

要添加音频到你的网页，只需使用 <audio> 标签。以下代码会嵌入一个音频文件：

                <audio src="audio_file.mp3"></audio>
                

其中 src 属性指向音频文件的 URL。

控制音频播放

默认情况下，浏览器不会显示音频播放器的控件。要向用户提供控制音频播放的选项，请添加 controls 属性：

                <audio src="audio_file.mp3" controls></audio>
                

这将允许用户暂停、播放和调整音量。

支持多种音频格式

由于浏览器对不同音频格式的支持程度不同，因此建议提供多种格式以确保更广泛的兼容性。使用 <source> 标签来提供多种音频格式：

                <audio controls>
                <source src="audio_file.mp3" type="audio/mpeg">
                <source src="audio_file.ogg" type="audio/ogg">
                您的浏览器不支持 audio 元素。
                </audio>
                

当浏览器遇到无法识别的音频类型时，它将转到下一个 <source> 标签。如果浏览器不支持任何提供的格式，它将显示 您的浏览器不支持 audio 元素。

音频属性

以下是一些可用于自定义音频播放器的属性：

• autoplay: 如果设置了这个属性，音频将在页面加载后立即开始播放。
• loop: 设置此属性以使音频在结束时自动重新开始播放。
• muted: 设置此属性来使音频默认静音。
• preload: 指定音频文件的预加载方式。可以设置为 none、metadata 或 auto。

例如：

                <audio src="audio_file.mp3" controls autoplay loop muted preload="metadata"></audio>
                

使用 JavaScript 控制音频

要使用 JavaScript 控制音频播放，首先要为 <audio> 标签添加一个 ID：

                <audio id="myAudio" src="audio_file.mp3" controls></audio>
                

然后，你可以使用以下 JavaScript 方法控制音频：

• play(): 开始播放音频
• pause(): 暂停音频
• load(): 重新加载音频

例如：

                var audio = document.getElementById("myAudio");

                audio.play(); // 播放音频
                audio.pause(); // 暂停音频
                audio.load(); // 重新加载音频
                

以上就是 HTML5 Audio 的基本教程。现在你应该知道如何在网页中嵌入音频并使用不同的属性和方法来控制播放。