Html5中怎么修改audio標(biāo)簽樣式，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，微信小程序，十余年建站對(duì)成都社區(qū)文化墻等多個(gè)行業(yè)，擁有多年的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)。

先給大家介紹下HTML5中的新元素標(biāo)簽
src：音頻文件路徑。
autobuffer：設(shè)置是否在頁(yè)面加載時(shí)自動(dòng)緩沖音頻。
autoplay：設(shè)置音頻是否自動(dòng)播放。
loop：設(shè)置音頻是否要循環(huán)播放。
controls：屬性供添加播放、暫停和音量控件。
由于html5的流行，現(xiàn)在移動(dòng)端大多數(shù)的需求都可以使用audio來(lái)播放音頻，但您可能只是需要很簡(jiǎn)單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，所以我簡(jiǎn)單的把它進(jìn)行了封裝，效果如下:

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

代碼如下:

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

新聞標(biāo)題：Html5中怎么修改audio標(biāo)簽樣式-創(chuàng)新互聯(lián)
本文鏈接：http://jinyejixie.com/article14/eijge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、軟件開(kāi)發(fā)、外貿(mào)建站、品牌網(wǎng)站制作、商城網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)