DDR爱好者之家

Html5 audio标签样式的修改
站长资源 2024/12/27 佚名
25 1538
DDR爱好者之家 Design By 杰米
先给大家介绍下HTML5中的新元素标签
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。
由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，所以我简单的把它进行了封装，效果如下:

Html5 audio标签样式的修改


作为技术实现，它的原理比较简单，就是把原生的audio隐藏，然后用div来显示播放器的效果，然后调用它的click事件来触发play和stop,然后是时长duration,这个值有时能够获取，有时不行，比较坑，所以建议在audio标签上自定义duration属性存放时长，这时，如果组件获取不到时会来取这个值。

复制代码代码如下:
this.settings.target.on('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标签样式的修改 ，希望对大家有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米