簡單談談如何利用h5實現音頻的播放

作者：白狼 出處：http://www.manks.top/article/h5_audio本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

如何在網頁上進行音頻的播放？話題挺高大上，實際上的開發工作確實非常easy，只需要利用html5的一個標簽audio即可。

網頁上大多數音頻一般是通過插件falsh播放的。但是，並不是所有的瀏覽器對其都支持。

html5 規定了通過audio元素來包含音頻的標准方法。

當前audio支持的音頻格式以及具體細節，可參考w3c標准。本文我們來看看具體實現以及一些有處理。

我們首先做一個簡單的實現，播放單個語音。

//html

<button class="btn audio">
    播放語音
    <audio src="音頻地址"></audio>
</button>

　　

//javascript

$(".audio").on("click", function () {
    var $this = $(this),
        $audio = $this.find("audio");
    $audio.get(0).play();
});

 

對，你沒有看錯，就是這么簡單。

但是，想象一下我們現在的場景就是類似微信的聊天頁面，一個頁面大概有多個播放語音的按鈕，還用上面的代碼實現，你可以播放一下試試看。

效果不出所料的話所點擊的音頻會同時進行播放。

這顯然不是我們所要的。我們目前的實現方法是標記一個播放狀態，播放任意一個音頻之前判斷該狀態，如果該狀態顯示正在播放，只需要將其暫停，然后再播放新的音頻即可。

我們來看看具體實現。

var playing = false, currentAudio = null;
$(".audio").on("click", function () {
    var $audio = $(this).find("audio");
    if (playing) {
        playing = false;
        currentAudio.pause();
        currentAudio.currentTime = 0;
        currentAudio = null;
    }
    playing = true;
    currentAudio = $audio.get(0);
    currentAudio.play();
});

 

這次就如願了，在多音頻的狀態下實現了播放單個音頻不沖突的問題了。

問題總是那么多，尖銳的矛盾也隨之而來。

打開firebug，我們切換到Network欄看看，實際上我們的多個音頻在頁面上也是進行了加載，這樣用戶打開我們的網頁就會非常耗時，在網絡不好的情況下效果估計會更差。

我們來看看如何在不影響效果的前提下進行優化。

①、我們對audio進行了優化，實際的播放地址用屬性存儲

②、如此的話我們就有必要簡單的修改下javascript代碼即可

來看看具體實現

//html

<button class="btn audio">
    播放語音
    <audio data-src="音頻地址"></audio>
</button>
<button class="btn audio">
    播放語音
    <audio data-src="音頻地址"></audio>
</button>

 

//javascript

var playing = false, currentAudio = null;
$(".audio").on("click", function () {
    var $audio = $(this).find("audio");
    $audio.attr("src", $audio.data("src"));
    if (playing) {
        playing = false;
        currentAudio.pause();
        currentAudio.currentTime = 0;
        currentAudio = null;
    }
    playing = true;
    currentAudio = $audio.get(0);
    currentAudio.play();
});

 

簡單吧，我們只增加了一行代碼 $audio.attr("src", $audio.data("src")); 對於要播放的我們在點擊后才去加載。

我們打開firebug-Network驗證下，確實是點擊后才進行加載，這樣就達到我們優化的效果了。

有小伙伴想問了，我想實現像百度mp3的播放那樣，有播放倒計時。因為不屬於我們本文主題，具體細節實現可參考w3caudio屬性currentTime即可