JS使用AudioContext播放音樂

1. 直接通過audio標簽播放音樂已經在主流瀏覽器中不被允許，如下方所示（無論火狐瀏覽器還是谷歌瀏覽器中都會報錯）：

2. 但是我們仍可以通過AudioContext的方式在大部分瀏覽器中播放音樂，代碼如下：

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
try {
    var context = new window.AudioContext();;
    var source = null;
    var audioBuffer = null;

    function stopSound() {
        if (source) {
            source.stop(0); //立即停止
        }
    }

    function playSound() {
        source = context.createBufferSource();
        source.buffer = audioBuffer;
        source.loop = true; //循環播放
        source.connect(context.destination);
        source.start(0); //立即播放
    }

    function initSound(arrayBuffer) {
        context.decodeAudioData(arrayBuffer, function(buffer) { //解碼成功時的回調函數
            audioBuffer = buffer;
            playSound();
        }, function(e) { //解碼出錯時的回調函數
            console.log('Error decoding file', e);
        });
    }

    function loadAudioFile(url) {
        var xhr = new XMLHttpRequest(); //通過XHR下載音頻文件
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) { //下載完成
            initSound(this.response);
        };
        xhr.send();
    }
    loadAudioFile('../Content/public/mp3/music2.mp3');
    $("#stop").click(function() {
        stopSound();
    });
} catch (e) {
    console.log('!Your browser does not support AudioContext');
}

3. 效果如下（火狐瀏覽器中可以直接播放出聲音來；至少現在在谷歌瀏覽器中不報錯了）：

作者：艾孜爾江