Html5的audio标签样式怎么修改

本篇内容介绍了“Html5的audio标签样式怎么修改”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

先给大家介绍下HTML5中的新元素标签

src：音频文件路径。

autobuffer：设置是否在页面加载时自动缓冲音频。

autoplay：设置音频是否自动播放。

loop：设置音频是否要循环播放。

controls：属性供添加播放、暂停和音量控件。

由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的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标签样式怎么修改”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！