由於html5的流行,現在移動端大多數的需求都可以使用audio來播放音頻,但您可能只是需要很簡單的播放/停止效果,但不同的瀏覽器上的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(''); } } });