HTML5 Audio：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();*/ 

Fiddle with commented code

マイセットアップ：Windowsの10/Chrome52

この問題について何かアドバイスが高く評価されています。ありがとうございました。

Answer 1

要素にMediaElementSourceを作成すると、出力が切断されるため、サウンドはありません。 （これは、あなたが分析したり、それが同様の未処理出力されずにオーディオを処理させます。）すべてを行う必要がある：

audioSrc.connect(audioCtx.destination); 

を使用すると、アナライザにaudioSrcを接続した直後。