JS使用AudioContext播放音乐

直接通过audio标签播放音乐已经在主流浏览器中不被允许，如下方所示（无论火狐浏览器还是谷歌浏览器中都会报错）：

但是我们仍可以通过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');
}

效果如下（火狐浏览器中可以直接播放出声音来；至少现在在谷歌浏览器中不报错了）：

作者：艾孜尔江

__EOF__

本文作者：艾孜尔江
本文链接：https://www.cnblogs.com/ezhar/p/13267754.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！