Html5 audio标签样式的修改 _html5教程技巧
程序员文章站
2022-03-11 20:53:41
...
先给大家介绍下HTML5中的新元素标签
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:属性供添加播放、暂停和音量控件。
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下:
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('');
}
}
});
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标签样式的修改 ,希望对大家有所帮助。
上一篇: html怎样固定两个标签不换行显示
下一篇: PHP与HTML的关系是什么?
推荐阅读
-
HTML5<video>标签不能播放视频,<audio>标签不能播放音频的解决方法
-
HTML5 CSS3新的WEB标准和浏览器支持_html5教程技巧
-
HTML5视频播放标签video和音频播放标签audio标签的正确用法
-
HTML5 b和i标记将被赋予真正的语义_html5教程技巧
-
关于HTML5你必须知道的28个新特性,新技巧以及新技术_html5教程技巧
-
html5适合移动应用开发的12大特性_html5教程技巧
-
字中字效果的实现【html5实例】_html5教程技巧
-
html5 table标签的样式介绍(另附html5 table css居中的实例)
-
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例_html5教程技巧
-
HTML5使用Audio标签实现歌词同步的效果