Javascript 音频可视化工具的多个实例

这是我关于堆栈溢出的第一篇文章，但我以前曾多次将此站点用作资源

我通过观看教程学到了一些代码，效果非常好。该代码对传递的文件具有的任何音频进行可视化。然而，当我尝试制作音频可视化工具的第二个实例时，它并没有很好地工作，这是我所期望的。问题是我还没有弄清楚如何将代码从单一使用转换为多文件使用

如果需要更多的信息，请让我知道，我会提供它。我想我需要以某种方式改变事件侦听器，但我不知道如何改变

下面是我用来制作可视化工具的JavaScript：

//create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = "audio_file_goes_here.mp3";
audio.controls = true;
audio.loop = true;
audio.autoplay = false;
audio.crossOrigin = "anonymous";

// establish all the variables that the analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

// initilize the MP3 player after the pages loads all of the HTML into the window
window.addEventListener("load", initMp3Player, false);

function initMp3Player(){
  document.getElementById('audio_box').appendChild(audio);
  context = new AudioContext();
  analyser = context.createAnalyser();
  canvas = document.getElementById('analyser_render');
  ctx = canvas.getContext('2d');
  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}

//frameLooper animates nay style of graphics at 60fps based on browser
function frameLooper(){
  window.requestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#00CCFF";
  bars=100;
  for (var i = 0; i < bars; i++){
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2);
    ctx.fillRect (bar_x, canvas.height, bar_width, bar_height);
  }
}

---

可能有助于您创建一个有人可以编辑的代码示例，可能是在jsfiddle.net或codepen.io上。您尝试了什么？你遇到了什么特别的问题吗？人们不会为你重构一些代码。我刚挂了一支代码笔，可能会对这个问题有所帮助。现在我正在尝试让查看器的两个实例工作。我尝试将一些id切换到类，因为它们在尝试中被多次引用。问题是我试图提出的第二种观点被打破了。我在代码笔上做了一些工作，我成功地让两个音频可视化工具实例工作，但是代码完全湿了，因为我基本上把整个条目翻了一番。我将花一点时间研究如何使代码干燥一点。可能有助于您创建一个有人可以编辑的代码示例，可能是在jsfiddle.net或codepen.io上。您尝试了什么？你遇到了什么特别的问题吗？人们不会为你重构一些代码。我刚挂了一支代码笔，可能会对这个问题有所帮助。现在我正在尝试让查看器的两个实例工作。我尝试将一些id切换到类，因为它们在尝试中被多次引用。问题是我试图提出的第二种观点被打破了。我在代码笔上做了一些工作，我成功地让两个音频可视化工具实例工作，但是代码完全湿了，因为我基本上把整个条目翻了一番。我将花一点时间研究如何使代码干燥一点。

<div id="mp3_player">
                <div id="audio_box"> </div>
                <canvas id="analyser_render"> </div> 

div#mp3_player{
  width:510px; 
  height:70px; 
  background: #000;       
  padding:5px;
  margin:50px auto;
}
div#mp3_player > div > audio{
  width:500px; 
  background: #000;
  float:left;
}

div#mp3_player > canvas {
  width:500px;
  height:30px; 
  background:#002d3c;
  float:left;
}