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/

如果你想要第二个链接的完整代码，我可以把它放到GitHub上。

我使用了以下代码来初始化音频：

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();
  });
}