HTML 播放声音的方法有很多种。在HTML5之前的网页开发中,音频播放器需要使用Flash等插件技术来实现,比较繁琐。
本节我们学习使用HTML5的方式播放音频。
HTML5 引入了 <audio>标签,作为一种标准的音频播放方式。
代码:<audio src="yourmusic.mp3" controls></audio>
实例解析:src属性指定音频文件的位置,controls属性允许我们在播放器上显示一组控制按钮
还可以在 <audio>标签中使用source 来指定多个文件位置与类型,以满足访问设备的兼容问题。如果访问设备不支持某类型将自动跳过选择下一个。
提示:<audio> 元素在某些旧版本的浏览器中不起作用。请使用最新版测试
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload |
auto
metadata
none |
规定当网页加载时,音频是否默认被加载以及如何被加载。 |
src | url | 规定音频文件的 URL。 |
HTML5提供了一个极其丰富的音频API,专门用于操作音频播放器。通过这API,我们可以实现播放/暂停/快进/音量/时间/列表播放等功能。
使用方法:(使用JavaScript调用)
创建音频对象,例:let myAudio = new Audio('yourmusic.mp3');
通过对象调用各种方法,例如:播放/暂停/快进/音量/时间/列表播放等
属性|方法 | 类型 | 说明 |
---|---|---|
paused | 属性 | 播放器当前状态:播放or暂停 |
play | 方法 | 控制播放器实施播放 |
currentTime | 属性 | 单位:秒,调节值大小控制播放进度,快进或跳转 |
详细情况请查阅HTML5 API