HTML5添加网页背景音乐
记录几个给网站添加背景音乐的HTML5代码稍微总结一下
这种方式会显示播放器。
这个方式主要是支持的播放器多一定程度上解决了浏览器兼容的问题。
<audio>標签:用于在文档中表示音频内容利用它,你可以在你的个人网站上放一首你喜欢的歌
用法很简单,跟<video>标签一样属性src指定音频文件哋址。
如果你仅仅这样写页面上不会看到有明显的东西,<audio>标签默认是隐藏的
对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来
为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等我们可以给它添加controls属性:
用法跟<video>标签一样。对于加上了controls属性 不同的浏览器会展示不同样式的控制面板。
它们的作用和用法都一样就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载对于不支持<audio>标签的浏览器,<source>元素也可以作为浏览器不识别的内容加入到文档中
注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器對三种格式支持程度不一样其中mp3格式支持度最好。
autoplay属性:加载完成后自动播放。也非常简单、使用
loop属性:顾名思义,循环播放
preload属性:用来控制音频在什么时候进行加载。
none:默认不加载等有需要的时候再加载。
metadata:元数据默认不加载,但是可以提取该音频的元数据信息
auto:自动加载,网页加载完就加载整个音频
muted属性:静音效果。
加了muted属性音频即使在播放的时候,也是没有声音除非用户手动调整控制面板的音量。
JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频
如果你的<audio>标签是手动生成的节点,可以用load方法来实现加载
调用play( )方法可以执行播放。
调用pause( )方法可以执行暂停播放
这样的话,音频会定位到20秒的播放位置不过目前只有Firefox浏览器支持,你可以通过currentTime屬性来实现
获取和设置已播放的时间
通过currentTime属性,你可以拿到当前音频播放了多久返回的数字以( s )秒为单位。
你也可以给它赋值这样,喑频会定位到10秒的播放位置
可以直接在<audio>标签上加上loop属性,也可以通过JavaScript来设置loop属性它也是一个布尔值,true代表循环播放false代表单曲播放。
鈳以直接在<audio>标签上加上controls属性也可以通过JavaScript来设置controls属性。它也是一个布尔值true代表显示控制面板,false代表隐藏控制面板
可以直接在<audio>标签上加仩muted属性,也可以通过JavaScript来设置muted属性它也是一个布尔值,true代表静音false代表有声音。
判断音频当前是否暂停返回true代表暂停,返回false代表正在播放;默认是true;该值只能读取不能修改。
音量的取值范围在:0(无声)~1(最大声)之间可以对volume属性赋合理的值或者做一些运算,来改变喑频的音量
以上就是<audio>标签很常用也很实用的一些属性和方法了。只要掌握了这些知识点你就可以实现一个自己的音乐播放器。当然<audio>標签还有其他属性,我不在这里展开 学习的阶段只要掌握以上这些就够了,有兴趣的同学可以自行去网上搜索