html中如何修改標籤的樣式

由於html5的流行，現在移動端大多數的需求都可以使用audio來播放音頻，但您可能只是需要很簡單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，那麼要怎麼改變這個樣式呢，其實它的原理比較簡單，就是把寫audio的時候不要用controls屬性，隱藏原生的audio， 然後用p之類標籤，定義css樣式美化起來用來顯示播放器的效果，最後用js捕捉audio事件，基本上就是src路徑、pause暫停、load載入、play播放這些。以下是一些audio標籤的相關API：

控制函數功能說明

load()：載入音訊、視訊軟體，通常不必調用，除非是動態產生的元素，用來在播放前預先載入

play()：載入並播放音訊、視訊文件，除非文件已經暫停在其他位置，否則預設重頭開始播放

pause()：暫停處於播放狀態的音訊、視訊檔案

audio 可腳本控制的特性值：

src：音訊檔案路徑。

autoplay：設定音訊是否自動播放（預設有此屬性為自動播放已載入的媒體檔案），或查詢是否已設定為autoplay

autobuffer：設定是否在頁面載入時自動緩衝音頻，如果設定了autoplay，則忽略此特性

loop：設定音訊是否要循環播放。 ，或查詢是否已設定為loop

currentTime：以s為單位傳回從開始播放到目前所花的時間，也可設定currentTime的值來跳到特定位置

controls ：顯示或隱藏使用者控制介面（屬性供新增播放、暫停和音量控制。）

volume：在0.0到1.0間設定音量值，或查詢目前音量值

muted：設定是否靜音

只讀屬性屬性說明

duration：取得媒體檔案的播放時長，以s為單位，如果無法取得，則為NaN

paused：如果媒體檔案暫停，則回傳true，否則回傳false

ended：如果媒體檔案播放完畢，則傳回true

startTime：傳回起始播放時間，一般是0.0，除非是緩衝過的媒體文件，並且一部分內容已經不在緩衝區

error：在發生了錯誤後返回的錯誤代碼

currentSrc：以字串形式傳回正在播放或已載入的文件，對應瀏覽器在source元素中選擇的文件

對於這些屬性，主流的瀏覽器都支援。可別以為就沒有了相容性，在音訊播放串流中，有兩個陣營。 firefox 和 opera 支援 ogg 音頻，safari 和 ie 支援 mp3。幸好Google的chrome都支援。

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

body{
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}

<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

作為技術實現，它的原理比較簡單，就是把原生的audio隱藏，然後用p來顯示播放器的效果，然後調用它的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(''); 
} 
} 
});

以上是html中如何修改標籤的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！