基础
audio 标签用来向页面引入一个外部音频文件音视频文件引入时,默认情况下不允许用户自己控制播放停止属性:
src:指定要引入的音视频的路径,这个是必须写controls:是否允许用户控制播放 不用赋值如果声明了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放autoplay:音频文件是否自动播放
如果设置了autoplay,则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放loop 控制音乐是否循环
<audio sec = "音频地址" aotuplay = "aotuplay" controls loop> </audio>
preload属性
预加载音频,但是需要注意preload和autoplay相冲,如果设置了autoplay属性,那么preload属性就会失效muted属性:让音频静音
进阶应用
这里是跟后面学习的js有关,差不多就是做一个类似于音乐播放器的播放条,这里的话我后面会出一期专门写播放条给大家看,会尽快!
这里用到的有:
currentTime
读取 currentTime 属性将返回一个双精度浮点值,用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时,currentTime 相对应的,能够被用于改变重播的时间。否则,设置 currentTime 将设置当前的播放位置,并且会自动搜寻到媒体的那个位置,如果媒体目前已经被加载的话。duration 只读
这是一个双精度浮点数,指明了音频在时间轴中的持续时间(总长度),以秒为单位。如果元素上没有媒体,或者媒体是不可用的,那么会返回 NaN。如果媒体找不到确切的结尾(比如不确定长度的直播流,网络电台,或者是通过 WebRTC 连接的流),那么这个值将返回 +Infinity。audio的一些事件
canplay():浏览器已经可以播放媒体,但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾(即预测会在播放时暂停以获取更多的缓冲区内容)
ended():播放到媒体的结束位置,播放停止
play():播放开始
pause():播放暂停
上面两个可以通过js控制音乐播放器的暂停与开始
video与audio很相似,大部分属性一样,鉴于我还没怎么用过,就不好意思祸害大家,等我有好的例子再给大家讲。
剩下的留到后面讲,Respect!