zoukankan      html  css  js  c++  java
  • [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改

    由于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('');
    					}
    				}
    			});
    

      

  • 相关阅读:
    Android 测试工具集01
    Android ImageView的ScaleType属性
    Android Webview与Html5交互
    Java Notes 00
    Android 显示原理简介
    Android开发在路上:少去踩坑,多走捷径
    Android_Dialog cancle 和dismiss 区别
    SpringMVC框架
    Redis持久化
    Redis集群
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/audio.html
Copyright © 2011-2022 走看看