HTML音频分析器阻止音乐播放

Question

我正在尝试使用原生音频API为音乐播放器创建可视化工具。一切都运行良好，除非我连接分析仪，音乐停止播放。

在此处查看，只需上传一个audiofile即可开始。

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