HTML5音频标签的使用详解

2025-11-07 00:28:39

1、<audio>音频标签常用属性:  

controls 显示控件

muted    预设静音

autoplay 自动播放

loop     循环播放   

src      音频文件路径

HTML5音频标签的使用详解

2、新建一个HTML文档,并定义一个简单的<audio>标签,

此刻预览是一个空白的页面

HTML5音频标签的使用详解

3、在audio 标签中加入音频播放器的控件属性 controls示例:

<audio src="bird.mp3" controls>

    当浏览器不支持时,此处给出提示

 </audio>

HTML5音频标签的使用详解

4、保存以上内容,在浏览器预览效果,该控件的外观会根据浏览器的不同,而现实不同的外观

HTML5音频标签的使用详解

5、在audio 标签中加入音频静音属性 muted ,示例:

    <audio src="bird.mp3" controls muted>

    当浏览器不支持时,此处给出提示

    </audio>

HTML5音频标签的使用详解

6、保存以上内容,并预览,则音频文件在输出播放前,预定义为静音,

HTML5音频标签的使用详解

7、若是需要,自动播放,则加入属性:autopaly, 示例:

    <audio src="bird.mp3" controls muted autoplay>

    当浏览器不支持时,此处给出提示

    </audio>

HTML5音频标签的使用详解

8、若是需要,循环播放,则加入属性:loop, 示例:

    <audio src="bird.mp3" controls muted autoplay loop>

    当浏览器不支持时,此处给出提示

    </audio>

HTML5音频标签的使用详解

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢