HTML 音频

HTML 播放声音的方法有很多种。在HTML5之前的网页开发中,音频播放器需要使用Flash等插件技术来实现,比较繁琐。

本节我们学习使用HTML5的方式播放音频。

HTML5 音频元素

HTML5 引入了 <audio>标签,作为一种标准的音频播放方式。

代码:<audio src="yourmusic.mp3" controls></audio>

实例解析:src属性指定音频文件的位置,controls属性允许我们在播放器上显示一组控制按钮

还可以在 <audio>标签中使用source 来指定多个文件位置与类型,以满足访问设备的兼容问题。如果访问设备不支持某类型将自动跳过选择下一个。

提示:<audio> 元素在某些旧版本的浏览器中不起作用。请使用最新版测试

<audio> 元素属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
muted muted 如果出现该属性,则音频输出为静音。
preload
auto
metadata
none
规定当网页加载时,音频是否默认被加载以及如何被加载。
src url 规定音频文件的 URL。

HTML5 音频API

HTML5提供了一个极其丰富的音频API,专门用于操作音频播放器。通过这API,我们可以实现播放/暂停/快进/音量/时间/列表播放等功能。

使用方法:(使用JavaScript调用)

  1. 创建音频对象,例:let myAudio = new Audio('yourmusic.mp3');

  2. 通过对象调用各种方法,例如:播放/暂停/快进/音量/时间/列表播放等

API 部分属性方法

属性|方法 类型 说明
paused 属性 播放器当前状态:播放or暂停
play 方法 控制播放器实施播放
currentTime 属性 单位:秒,调节值大小控制播放进度,快进或跳转

详细情况请查阅HTML5 API

HTML5的音频播放器和API提供了一个非常强大的平台,可以实现从单独的音频播放到播放列表的所有功能。比其他方式更容易使用和检测,是一项更可靠、可维护性更高的选择。

关注本站微信公众号