HTMLオーディオアナライザで音楽が再生されないようにする

Question

ネイティブオーディオAPIを使用して、音楽プレーヤーのビジュアライザを作成しようとしています。すべてがうまくいきます。アナライザーを付けても音楽は止まります。

こちらをご覧ください。開始するには、オーディオファイルをアップロードしてください。

https://codepen.io/jane-fox/pen/RgjgJN

audioSource = audioCtx.createMediaElementSource(audio); 
audioSource.connect(analyser); 

アナライザが接続されるまでその音楽は罰金果たし参照するには、これらのラインアウトのコメント。

アナライザ/ビジュアルエフェクトが音楽を乱すのを止めるにはどうすればよいですか？

Answer 1

私はしませんが長すぎる前にアナライザを作りました： https://codepen.io/Cooorsin/pen/zKPbEm と http://simple-music-player.corsins.space/

あなたは、第2リンクのコード全体をしたい場合、私はあなたのためのGitHubの上に置くことができます。あなたがaudioCtx.destinationにごaudioSouceを接続する必要があり

function initAudio(src){ 
    var AudioContext = window.AudioContext || window.webkitAudioContext; 
    audioContext = new AudioContext(); 
    analyser = audioContext.createAnalyser(); 

    //analyser.smoothingTimeConstant = 1; 
    analyser.fftSize = barAmount; 

    audio = new Audio(); 
    audio.src = src; 


    audio.addEventListener('canplay', function(){ 
     sourceNode = audioContext.createMediaElementSource(audio); 
     sourceNode.connect(analyser); 
     sourceNode.connect(audioContext.destination); 
     audio.play(); 
    }); 
}