顯示效果 幸好 text tel libs 通過 h5牛牛 audio 事件

Q1446595067官網：h5.haozibbs.com由於html5的流行，現在移動端大多數的需求都可以使用audio來播放音頻，但您可能只是需要很簡單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，那麽要怎麽改變這個樣式呢，其實它的原理比較簡單，就是把寫audio的時候不要用controls屬性，隱藏原生的audio， 然後用div之類標簽，定義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元素中選擇的文件

1
2
3
4
5
6
7

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

代碼如下：

HTML:

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

1
2

CSS:

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;
}

1
2
3
4
5
6
7
8
9
10

JavaScripy:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

通過以上方法，audio的樣式修改的問題就解決啦，你可以換成你想要的顯示效果。

h5牛牛源碼出售中 audio標簽的樣式修改