你的位置:首页 > 软件开发 > 网页设计 > [js开源组件开发]html5标签audio的样式更改

[js开源组件开发]html5标签audio的样式更改

发布时间:2016-01-27 18:00:20
html5标签audio的样式更改由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下:作为技术实现,它的原理比较简单,就是把原生的au ...

html5标签audio的样式更改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以我简单的把它进行了封装,效果如下:

[js开源组件开发]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('');					}				}			});

原标题:[js开源组件开发]html5标签audio的样式更改

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。