Html5audio标签样式的修改
先给⼤家介绍下HTML5中的新元素标签
src：⾳频⽂件路径。
autobuffer：设置是否在页⾯加载时⾃动缓冲⾳频。
autoplay：设置⾳频是否⾃动播放。
loop：设置⾳频是否要循环播放。
controls：属性供添加播放、暂停和⾳量控件。
由于html5的流⾏，现在移动端⼤多数的需求都可以使⽤audio来播放⾳频，但您可能只是需要很简单的播放/停⽌效果，但不同的浏览器上的audio样式却不尽⼈意，所以我简单的把它进⾏了封装，效果如下:
作为技术实现，它的原理⽐较简单，就是把原⽣的audio隐藏，然后⽤div来显⽰播放器的效果，然后调⽤它的click事件来触发play和stop，然后是时长duration，这个值有时能够获取，有时不⾏，⽐较坑，所以建议在audio标签上⾃定义duration属性存放时长，这时，如果组件获取不到时会来取这个值。html5标签区分大小写
复制代码
代码如下:
this.('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
});
以上内容给⼤家介绍了Html5 audio标签样式的修改，希望对⼤家有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。