HTML5音频：createMediaElementSource破坏音频输出

Question

我正在学习WebGL, 我正在参考this教程从mp3文件中提取频率以进行可视化。

我已经成功实现了播放mp3文件的功能。但是，如果我尝试使用createMediaElementSource连接到AudioContext的分析器来获取频率数据，则此功能不起作用。

Fiddle

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

非常感谢任何关于这个问题的建议。谢谢。

- An Illusion

---

浏览器控制台中是否有关于CORS限制的提示？ - Alex Paramonov

不，它没有涉及到CORS。 - An Illusion

Answer 1

没有声音是因为在一个元素上创建createMediaElementSource时，它会断开输出。这样可以让您分析或处理音频，而不必将其未经处理地输出。您需要做的就是：

audioSrc.connect(audioCtx.destination);

当您将audioSrc连接到分析器后。

- cwilso

---

非常感谢。这个小错误搞砸了一个非常愉快的周六晚上。 - An Illusion

尝试过这个方法，但在我的情况下并没有帮助 - 仍然没有声音。 - DataGreed

@DataGreed，如果你正在使用scriptProcessor或类似的东西，请记得将inputBuffer中的数据复制到outputBuffer中。 - BartMao

我也尝试过这个，但没有效果。没有脚本处理器。 - willbeing