Html5 audio標(biāo)簽樣式的修改
發(fā)布時間：2016-01-28 15:52:52 作者：佚名 
我要評論
我要評論這篇文章主要介紹了Html5標(biāo)簽audio的樣式修改 ,對html5 audio標(biāo)簽樣式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
先給大家介紹下HTML5中的新元素標(biāo)簽
src：音頻文件路徑。
autobuffer：設(shè)置是否在頁面加載時自動緩沖音頻。
autoplay：設(shè)置音頻是否自動播放。
loop：設(shè)置音頻是否要循環(huán)播放。
controls：屬性供添加播放、暫停和音量控件。
由于html5的流行，現(xiàn)在移動端大多數(shù)的需求都可以使用audio來播放音頻，但您可能只是需要很簡單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，所以我簡單的把它進行了封裝，效果如下:
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('');
}
}
});
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標(biāo)簽上自定義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('');
}
}
});
以上內(nèi)容給大家介紹了Html5 audio標(biāo)簽樣式的修改 ，希望對大家有所幫助。
相關(guān)文章
- HTML5 Audio標(biāo)簽?zāi)軌蛑С謜av, mp3, ogg, acc, webm等格式，但有個很重要的音樂文件格式midi(擴展名mid)卻在各大瀏覽器中都沒有內(nèi)置的支持。這篇文章給大家介紹html5中audio2018-08-24
html5結(jié)合audioplayer.js插件實現(xiàn)的響應(yīng)式觸摸音頻播放器特效源碼
是一款結(jié)合了audioplayer.js插件實現(xiàn)的支持手機移動客戶端的，可觸摸式的音頻播放器效果，pc客戶端，手機客戶端均可使用，當(dāng)然了，它只支持高版本瀏覽器，因為它是html5制2018-01-02HTML5使用Audio標(biāo)簽實現(xiàn)歌詞同步的效果
HTML5的最強大之處莫過于對媒體文件的處理，如利用一個簡單的vedio標(biāo)簽就可以實現(xiàn)視頻播放。類似地,在HTML5中也有對應(yīng)的處理音頻文件的標(biāo)簽，那就是audio標(biāo)簽。通過本文給2016-03-17使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法
這篇文章主要介紹了使用HTML5在網(wǎng)頁中嵌入音頻和視頻播放的基本方法,2016-02-22
基于HTML5 audio的Material design風(fēng)格音頻播放器特效源碼
這是一款基于HTML5 audio的Material design風(fēng)格音頻播放器jQuery插件的特效源碼。該音頻播放器可以設(shè)置音頻播放列表，歡迎下載2015-11-26- 這篇文章主要介紹了HTML5中audio標(biāo)簽的使用,在各瀏覽器中添加音頻播放控件,需要的朋友可以參考下2015-09-24
HTML5音頻播放器(Amazing Audio Player Enterprise) V3.2 漢化特別安裝
Amazing Audio Player Enterprise是一款能夠幫助用戶快速的制作出一個HTML5音樂播放器的小工具，做好的播放器可以作為插件整合到Wordpress博客系統(tǒng)中去2015-08-25HTML5 audio標(biāo)簽使用js進行播放控制實例
這篇文章主要介紹了HTML5 audio標(biāo)簽使用js進行播放控制實例,本文直接給出代碼實例,演示了獲取播放時間、播放、暫停、靜音等控制方法,需要的朋友可以參考下2015-04-24解決HTML5中的audio在手機端和微信端的不能自動播放問題
這篇文章主要介紹了解決HTML5中的audio在手機端和微信端的不能自動播放問題,需要的朋友可以參考下2019-11-04
