Html5的audio標簽樣式怎么修改

本篇內(nèi)容介紹了“Html5的audio標簽樣式怎么修改”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

先給大家介紹下HTML5中的新元素標簽

src：音頻文件路徑。

autobuffer：設(shè)置是否在頁面加載時自動緩沖音頻。

autoplay：設(shè)置音頻是否自動播放。

loop：設(shè)置音頻是否要循環(huán)播放。

controls：屬性供添加播放、暫停和音量控件。

由于html5的流行，現(xiàn)在移動端大多數(shù)的需求都可以使用audio來播放音頻，但您可能只是需要很簡單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，所以我簡單的把它進行了封裝，效果如下:

作為技術(shù)實現(xiàn)，它的原理比較簡單，就是把原生的audio隱藏，然后用div來顯示播放器的效果，然后調(diào)用它的click事件來觸發(fā)play和stop,然后是時長duration,這個值有時能夠獲取，有時不行，比較坑，所以建議在audio標簽上自定義duration屬性存放時長，這時，如果組件獲取不到時會來取這個值。

復(fù)制代碼

代碼如下:

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

}

}

});

“Html5的audio標簽樣式怎么修改”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！