HTML5学习笔记(四)

最新推荐文章于 2025-06-05 13:34:30 发布

原创最新推荐文章于 2025-06-05 13:34:30 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍HTML5中<audio>标签的使用方法及其支持的音频格式，包括Mp3、Ogg和Wav等。同时提供了示例代码，展示了如何在网页上播放不同格式的音频文件。

HTML5播放音频的标签

到目前为止，网页上的大多数音频都是使用flash来播放的，HTML5 规定了一种通过<audio>元素来包含音频的标准方法.
<audio>音频流和播放声音文件

`<audio>`支持的三种音频格式:

三种格式为：Mp3/Ogg/Wav

格式名称	MIME-type
Mp3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML5播放音频文件</title>
    </head>

    <body>
        <audio style="text-align:center" controls="controls">
            <source src="resource/horse.ogg" type="audio/ogg">
                你的浏览器可能不支持该模式
        </audio>
        <br />
        <audio style="text-align:center" controls="controls">
            <source src="resource/song.mp3" type="audio/mpeg"> 
                你的浏览器可能不支持该模式
        </audio>
    </body>

</html>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。
效果图：

HTML5播放音频

`<audio>`的属性

属性	值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	音频结束时重新开始播放
preload	preload	音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性
src	url	播放的音频的 URL