Html5 audio标签样式的修改
发布时间：2016-01-28 15:52:52 作者：佚名 
我要评论
我要评论这篇文章主要介绍了Html5标签audio的样式修改 ,对html5 audio标签样式相关知识感兴趣的朋友一起学习吧
先给大家介绍下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标签样式的修改 ，希望对大家有所帮助。
相关文章
- HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式，但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。这篇文章给大家介绍html5中audio2018-08-24
html5结合audioplayer.js插件实现的响应式触摸音频播放器特效源码
是一款结合了audioplayer.js插件实现的支持手机移动客户端的，可触摸式的音频播放器效果，pc客户端，手机客户端均可使用，当然了，它只支持高版本浏览器，因为它是html5制2018-01-02- HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签。通过本文给2016-03-17
- 这篇文章主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法,2016-02-22
基于HTML5 audio的Material design风格音频播放器特效源码
这是一款基于HTML5 audio的Material design风格音频播放器jQuery插件的特效源码。该音频播放器可以设置音频播放列表，欢迎下载2015-11-26- 这篇文章主要介绍了HTML5中audio标签的使用,在各浏览器中添加音频播放控件,需要的朋友可以参考下2015-09-24
HTML5音频播放器(Amazing Audio Player Enterprise) V3.2 汉化特别安装
Amazing Audio Player Enterprise是一款能够帮助用户快速的制作出一个HTML5音乐播放器的小工具，做好的播放器可以作为插件整合到Wordpress博客系统中去2015-08-25- 这篇文章主要介绍了HTML5 audio标签使用js进行播放控制实例,本文直接给出代码实例,演示了获取播放时间、播放、暂停、静音等控制方法,需要的朋友可以参考下2015-04-24
解决HTML5中的audio在手机端和微信端的不能自动播放问题
这篇文章主要介绍了解决HTML5中的audio在手机端和微信端的不能自动播放问题,需要的朋友可以参考下2019-11-04
最新评论