濮阳杆衣贸易有限公司

主頁 > 知識庫 > 淺談h5自定義audio(問題及解決)

淺談h5自定義audio(問題及解決)

熱門標簽:杭州營銷電銷機器人供應商 高德地圖標注賓館位置 電視購物電銷外呼系統(tǒng) 貸款電銷人工和機器人哪個好 西寧智能外呼系統(tǒng)加盟 飛亞外呼系統(tǒng) 電話機器人如何 百應電銷機器人產業(yè) 聯通400電話申請

h5活動需要插入音頻,但又需要自定義樣式,于是自己寫咯

html

XML/HTML Code復制內容到剪貼板
  1. <!-- cur表示當前時間 max表示總時長 input表示進度條 -->  
  2. <span class='cur'></span><input type="range" min=0 max=100 class='range' value=0><span class='max'></span>  

css

CSS Code復制內容到剪貼板
  1. /* 進度條 */  
  2. .range {   
  3.     width: 5.875rem;   
  4.     height: 0.15rem;   
  5.     background#2386e4;   
  6.     border-radius: 0.25rem;   
  7.     -webkit-appearance: none !important;   
  8.     positionabsolute;   
  9.     top: 3.55rem;   
  10.     left: 6rem;    
  11. }   
  12. /* 進度滑塊 */  
  13. .range::-webkit-slider-thumb {   
  14.     width: 0.5rem;   
  15.     height: 0.5rem;   
  16.     background#fff;   
  17.     border1px solid #f18900;   
  18.     cursorpointer;   
  19.     border-radius: 0.25rem;   
  20.     -webkit-appearance: none !important;   
  21. }  

js

JavaScript Code復制內容到剪貼板
  1. //將秒數轉為00:00格式   
  2. function timeToStr(time) {   
  3.     var m = 0,   
  4.     s = 0,   
  5.     _m = '00',   
  6.     _s = '00';   
  7.     time = Math.floor(time % 3600);   
  8.     m = Math.floor(time / 60);   
  9.     s = Math.floor(time % 60);   
  10.     _s = s < 10 ? '0' + s : s + '';   
  11.     _m = m < 10 ? '0' + m : m + '';   
  12.     return _m + ":" + _s;   
  13. }   
  14. //觸發(fā)播放事件   
  15. $('.play').on('click',function(){   
  16.     var audio=document.getElementById('ao');   
  17.     audio.play();   
  18.     setInterval(function(){   
  19.         var t=parseInt(audio.currentTime);   
  20.     $(".range").attr({'max':751});   
  21.     $('.max').html(timeToStr(751));   
  22.         $(".range").val(t);   
  23.     $('.cur').text(timeToStr(t));   
  24.     },1000);   
  25. });   
  26. //監(jiān)聽滑塊,可以拖動   
  27. $(".range").on('change',function(){   
  28.     document.getElementById('ao').currentTime=this.value;$(".range").val(this.value);   
  29. });  

以上基本可以實現自定義音頻播放,但是在拖動進度條的時候出現了問題,電腦上是ok的,但是在手機上可以拖動,只不過音頻的總時長比正常播放少了好幾分鐘,導致拖動進度后播放不準確。通過測試發(fā)現手機上拿到的duration(總時長)跟電腦上不一樣,導致滑動后播放位置不準確。究其原因發(fā)現因為上傳的音頻被我壓縮了,所以在手機上拿到的duration就跟正常的不一樣。所以音頻經過壓縮后在手機上其duration就會變(電腦上不會),以后要注意。如果有什么既可以壓縮音頻也可以在手機上拿到正常duration的方法,麻煩告知小弟,哈哈。

關于這篇淺談h5自定義audio(問題及解決)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

標簽:安慶 煙臺 玉溪 內蒙古 邯鄲 晉中 牡丹江 撫州

巨人網絡通訊聲明:本文標題《淺談h5自定義audio(問題及解決)》,本文關鍵詞  淺談,自定義,audio,問題,;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《淺談h5自定義audio(問題及解決)》相關的同類信息!
  • 本頁收集關于淺談h5自定義audio(問題及解決)的相關信息資訊供網民參考!
  • 推薦文章
    宁晋县| 泸水县| 垣曲县| 怀化市| 镇宁| 右玉县| 镇平县| 绥化市| 济宁市| 永丰县| 宁海县| 博白县| 绥江县| 虎林市| 尼勒克县| 江安县| 阿城市| 宜宾县| 垣曲县| 泰和县| 鄂州市| 资源县| 贵州省| 和政县| 东宁县| 汾西县| 介休市| 静宁县| 乌什县| 双桥区| 大安市| 元氏县| 东莞市| 营口市| 聂拉木县| 新宁县| 黔南| 祁门县| 沈丘县| 伊宁县| 运城市|