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