audio h5,audio自定义样式

　　H5活动需要插入音频，但需要自定义风格，所以我自己写的。

　　html

　　XML/HTML代码将内容复制到剪贴板！- cur表示当前时间，max表示总持续时间，input表示进度条-span class= cur /span input type= range min=0 max=100 class= range value=0 span class= max /spancss

　　代码将内容复制到剪贴板/*进度条*/。范围{宽度：5.875雷姆；身高：0.15雷姆；背景：# 2386e4边框半径：0.25雷姆；-WebKit-外观：无！重要；位置：绝对；顶部：3.55雷姆；左：6雷姆；}/*进度滑块*/。范围：-WebKit-slider-thumb { width:0.5 rem；身高：0.5雷姆；背景：# fffborder:1 px solid # f 18900；光标：指针；边框半径：0.25雷姆；-WebKit-外观：无！重要；}js

　　代码将内容复制到剪贴板//将秒转换为00:00格式函数Time Tostr (time) {varm=0，s=0，_ m= 00 ，_ s= 00time=math . floor(time 600)；m=Math.floor(时间/60)；s=math . floor(time `)；_s=s10？0的：s“”；_m=m10？0“m:m”；return _ m : _ s；}//触发播放事件$(。玩’)。On (click ，function(){ var audio=document . getelementbyid( ao )；音频.播放()；setInterval(function(){ vart=parse int(audio . current time)；$(.范围)。attr({ max :751 })；$(.max’)。html(time tostr(751))；$(.范围)。val(t)；$(.cur’)。text(time tostr(t))；},1000);});//监视器滑块，可以拖动$(。范围)。On (change ，function(){ document . getelementbyid( ao )。currenttime=this.value$(.范围)。val(this . value)；});以上基本可以实现自定义音频播放，但是在拖动进度条的时候有一个问题。电脑上可以，手机上可以拖。但音频总时长比正常播放短几分钟，导致拖动进度后播放不准确。通过测试发现，手机上获得的时长与电脑上不同，导致滑动后播放位置不准确。原因是因为上传的音频是我压缩的，我拿到手机上的时长和正常的不一样。所以音频压缩后，它在手机上的时长会发生变化(电脑上不会)，以后要注意。如果有什么方法可以在手机上压缩音频或者获得正常时长，请告诉我，哈哈。

　　这个关于h5定制音频的简短谈话(问题和解决方案)是边肖分享的所有内容。希望能给你一个参考和支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。