HTML5 WebAudioAPI-實例(二)

簡單播放實例1：

var url='../content/audio/海闊天空.mp3';
if (!window.AudioContext) {
    alert('您的瀏覽器不支持AudioContext');
} else {
    //創建上下文
    var ctx = new AudioContext();
    //使用Ajax獲取音頻文件
            
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';//配置數據的返回類型
    //加載完成
    request.onload = function () {
        var arraybuffer = request.response;
        ctx.decodeAudioData(arraybuffer, function (buffer) {
            //處理成功返回的數據類型為AudioBuffer 
            console.info(buffer);

            //創建AudioBufferSourceNode對象
            var source = ctx.createBufferSource();
            source.buffer = buffer;
            source.connect(ctx.destination);
            //指定位置開始播放
            source.start(0);

        }, function (e) {
            console.info('處理出錯');
        });
    }
    request.send();
}

 實例2，帶暫停：

<div class="container">
    <button class="btn btn-primary" id="playBtn">
        <i class="glyphicon glyphicon-pause"></i>
    </button>
</div>
<script>
    var url='../content/audio/海闊天空.mp3';
    if (!window.AudioContext) {
        alert('您的瀏覽器不支持AudioContext');
    } else {
        //創建上下文
        var ctx = new AudioContext();
        var source = null;
        //使用Ajax獲取音頻文件
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';//配置數據的返回類型
        //加載完成
        request.onload = function () {
            var arraybuffer = request.response;
            ctx.decodeAudioData(arraybuffer, function (buffer) {
                //處理成功返回的數據類型為AudioBuffer 
                //console.info(buffer);

                //創建AudioBufferSourceNode對象
                source = ctx.createBufferSource();
                source.buffer = buffer;
                source.connect(ctx.destination);
                //指定位置開始播放
                source.start(0);
                console.info(source);

            }, function (e) {
                console.info('處理出錯');
            });
        }
        request.send();
            
        //綁定播放按鈕
        $('#playBtn').click(function () {
            var icon = $(this).find('i');;
            icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
            //停止播放
            source.stop();
        });
    }
       

</script>

 

說明：

WebAudio API主要是為音頻文件添加音效而設計的，但是它也可以用來播放音頻文件，這類似於HTML5 audio元素的功能，只是audio元素可以有控制界面，用戶可以點擊界面上的播放/停止按鈕來控制文件的播放，也可以拖動界面上的進度條來控制播放進度。而采用WebAudio API實現的音頻播放則沒有控制界面，但對於移動平台Android，IOS確實非常有用的，例如在Android平台上Chrome瀏覽器設置了gesture-requirement-for-media-playback屬性，意思是說不能通過調用audio元素的play函數實現音頻文件的播放，除了調用play函數之外，還必須要求用戶在屏幕上有一個手勢操作，該行為和蘋果的IOS上的行為一致。

使用WebAudio播放音頻文件的效率問題

前面介紹了如何使用WebAudio來播放音頻文件，但是需要注意的是不要輕易采用WebAudio的該功能，因為當音頻文件較大時，可能會影響程序的執行效率。首先，如果我們在程序中采用XMLHttpRequest去下載文件時，這是一個比較耗時的操作，具體的時間取決於當前的網絡環境和文件的大小，盡管程序中采用異步的下載方式，但是同樣會讓音頻的播放延遲。其次，程序需要調用WebAudio的decodeAudioData函數去解碼整個音頻文件，這里需要注意的是它需要一次性解碼整個文件后，才會觸發成功的回調函數，程序才能開始播放音頻文件，這又一次的增加了音頻文件播放的延遲，另外，由於整個文件的一次性解碼，整個解碼前和解碼后的文件都同時存放在內存中，這也引起了內存的巨大開銷（相比采用audio元素播放時，因為audio元素是一邊解碼一邊播放）。此時可能有朋友會質疑decodeAudioData API的實現有問題，其實該函數是為解碼比較短小的聲音文件而設計的，另外由於WebAudio對音頻的延時性特別關注，所以為了較少聲音的延時，在音效處理前要求把需要處理的音頻文件裝載進內存。

所以如果需要使用WebAudio播放文件，又比較關注效率問題時，建議把音頻文件的大小縮小一些，或者分解成若干小的文件再分別加載解碼播放。

更多：HTML5 WebAudioAPI簡介(一)