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播放音頻檔案的效率問題