下面為大家帶來一篇淺談h5自訂audio(問題及解決)。內容還挺不錯的，現在就分享給大家，也給大家做個參考。
h5活動需要插入音頻，但又需要自訂樣式，於是自己寫咯
#html
css
/* 进度条 */ .range { width: 5.875rem; height: 0.15rem; background: #2386e4; border-radius: 0.25rem; -webkit-appearance: none !important; position: absolute; top: 3.55rem; left: 6rem; } /* 进度滑块 */ .range::-webkit-slider-thumb { width: 0.5rem; height: 0.5rem; background: #fff; border: 1px solid #f18900; cursor: pointer; border-radius: 0.25rem; -webkit-appearance: none !important; }
js
#//将秒数转为00:00格式 function timeToStr(time) { var m = 0, s = 0, _m = '00', _s = '00'; time = Math.floor(time % 3600); m = Math.floor(time / 60); s = Math.floor(time % 60); _s = s < 10 ? '0' + s : s + ''; _m = m < 10 ? '0' + m : m + ''; return _m + ":" + _s; } //触发播放事件 $('.play').on('click',function(){ var audio=document.getElementById('ao'); audio.play(); setInterval(function(){ var t=parseInt(audio.currentTime); $(".range").attr({'max':751}); $('.max').html(timeToStr(751)); $(".range").val(t); $('.cur').text(timeToStr(t)); },1000); }); //监听滑块，可以拖动 $(".range").on('change',function(){ document.getElementById('ao').currentTime=this.value;$(".range").val(this.value); });
以上基本上可以實作自訂音訊播放，但在拖曳進度條的時候出現了問題，電腦上是ok的，但是在手機上可以拖動，只不過音頻的總時長比正常播放少了好幾分鐘，導致拖動進度後播放不准確。透過測試發現手機上拿到的duration（總時長）跟電腦上不一樣，導致滑動後播放位置不準確。究其原因發現因為上傳的音訊被我壓縮了，所以在手機上拿到的duration就跟正常的不一樣。所以音訊經過壓縮後在手機上其duration就會變（電腦上不會），以後要注意。如果有什麼既可以壓縮音訊也可以在手機上拿到正常duration的方法，麻煩告知小弟，哈哈。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關建議：
以上是h5自訂audio的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
