时间:2021-07-01 10:21:17 帮助过:353人阅读
1.最少的代码
<audio src="song.ogg" controls="controls"></audio>
2.带有不兼容提醒的代码
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
3.尽量兼容浏览器的写法
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
在HTML5 标准出现以前,程序员无法想使用<a>标签一样,轻松的播放音频文件。HTML5为解决这个问题,提供了一个新的标签<audio>,让程序员无须再大量的使用flash播放音频文件了。
HTML5 <audio>效果图:
HTML5 <audio>源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5音频播放器 |HTML5 audio</title> </head> <body style="padding:0px;margin:0px;text-align:center;"> <audio src="see-you-again.mp3" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 您浏览器不支持HTML5音频播放器 </audio> </body> </html>
audio 可脚本控制的特性值:
autoplay 自动播放已经加载的的媒体文件,或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放,或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间,也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载,如果设置了autoplay,则忽略此特性
对于这些属性,主流的浏览器都支持。可是别以为就没有了兼容性,在音频播放流中,有两个阵营。firefox 和 opera 支持 ogg 音频,safari 和 ie 支持 mp3.幸好Google的chrome都支持。
以上就是html中<audio>标签的使用的详细内容,更多请关注Gxl网其它相关文章!