HTML5音频：createMediaElementSource中断音频输出

Question

我正在学习webgl，并且正在阅读本教程，以从mp3文件中提取频率，以便可以对其进行可视化。

我有给定mp3文件的地方播放文件。但是，如果我尝试使用createMediaElementSource连接到AudioContext的分析仪来获取频率数据，则它将无法正常工作。

小提琴

JS：

window.onload = function(e) {       
    document.getElementById('music-files').addEventListener('change', selectMusic, false);
}

var musicFiles = [];
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audio;
var audioSrc;
var analyser;
var bufferLength;
var dataArray;

function selectMusic(e) {   
    musicFiles = e.target.files;    
}

function getFreq(){
    requestAnimationFrame(getFreq);
    analyser.getByteFrequencyData(dataArray);
    console.log(">>>>>>>>>>>>>>>");
    console.log(dataArray[240])
}

function play(){    
    var num = Math.floor(Math.random()*musicFiles.length);
    console.log("playing=" + num);
    var musicFile = URL.createObjectURL(musicFiles[num]); 
    $("#music").attr("src", musicFile);
    document.getElementById('music').play();

    audio = document.getElementById('music');
    audioSrc = audioCtx.createMediaElementSource(audio);    
    analyser = audioCtx.createAnalyser();
    audioSrc.connect(analyser);
    bufferLength = analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);
    getFreq();
}

function stop(){
    document.getElementById('music').pause();
}

如果您看一下小提琴，则可以选择一个mp3文件并单击播放，它将记录浏览器控制台中的一个频段，但没有声音（我的电脑上至少没有声音），这可能意味着它正在播放歌曲，但没有声音。但是，如果您在下面评论这些行，它就会播放这首歌，而且我可以听到。

摆弄注释代码

/*audioSrc = audioCtx.createMediaElementSource(audio);  
    analyser = audioCtx.createAnalyser();
    audioSrc.connect(analyser);
    bufferLength = analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);
    getFreq();*/

我的设置：Windows 10 / Chrome52

关于此问题的任何建议都将受到赞赏。谢谢。

Answer 1

之所以没有声音，是因为在元素上创建MediaMediaElementSource时，它会断开输出。（这将使您分析或处理音频，而无需将其也未经处理地输出。）您需要做的是：

audioSrc.connect(audioCtx.destination);

在将audioSrc连接到分析器之后。