Javascript 多个音频播放器和web音频API

我有一个系统，可以将音频播放器加载到旋转木马中。我已经利用网络音频api提供了一个EQ的播放器背后的视觉效果，这是所有工作良好。。。然而，正是在玩这个游戏的过程中，我意识到你一次只能拥有有限数量的音频上下文（通常在6个左右），在创建一个音频上下文并使用它的过程中，我遇到了一个障碍，即只能使用一个媒体元素源，这意味着我只能在一个播放器上使用它

我想知道的是，如果有，我可以有一个上下文，但它改变音频源取决于什么音频播放器正在播放的时间

下面是我的代码：

$('audio').each(function(){

var frequencyData, bar_x, bar_width, bar_height, bars;

// the below ctx I can take out of here and make it global but then it will only accept one mediaElementSource which I need to change per audio player

var ctx = new AudioContext();
var canvas = $(this).find('canvas')[0];
var context = canvas.getContext('2d');
var audio = $(this).find('audio')[0];
var audioSrc = ctx.createMediaElementSource(audio);
var analyser = ctx.createAnalyser();
var img = $('#bwkzLogo img')[0];
// set the canvas height and width based on the size of its container
canvas.width = $('.item.active .bwkz-audio-wrapper').width();
canvas.height = $('.item.active .bwkz-audio-wrapper').height();

audioSrc.connect(analyser);
analyser.connect(ctx.destination);

function loopBars(){
    var grad = context.createLinearGradient(0,0,0,300)
    grad.addColorStop(1, '#000');
    grad.addColorStop(0, '#fff');
    requestAnimationFrame(loopBars);
    frequencyData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(frequencyData);
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.strokeStyle = grad;
    bars = 250; // set to a high value so the bars fill the fill canvas
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(frequencyData[i] / 2);
    }
    loopBars();
}

});

$（'audio'）。每个（函数（）{
var频率数据，条形图x，条形图宽度，条形图高度，条形图；
//下面的ctx我可以带出这里，使其成为全球性的，但它将只接受一个mediaElementSource，我需要改变每个音频播放器
var ctx=新的AudioContext（）；
var canvas=$（this.find（'canvas'）[0]；
var context=canvas.getContext（'2d'）；
var audio=$（this.find（'audio'）[0]；
var audioSrc=ctx.createMediaElementSource（音频）；
var Analyzer=ctx.createAnalyzer（）；
var img=$（'bwkzLogo img'）[0]；
//根据画布容器的大小设置画布的高度和宽度
canvas.width=$（'.item.active.bwkz音频包装器'）.width（）；
canvas.height=$（'.item.active.bwkz音频包装器'）.height（）；
音频SRC.连接（分析仪）；
分析仪连接（ctx目的地）；
函数loopbar（）{
var grad=context.createLinearGradient（0,0,0300）
渐变加色停止（1，#000'）；
渐变加色停止（0，#fff'）；
requestAnimationFrame（循环条）；
frequencyData=新的UINT8阵列（分析仪.frequencyBinCount）；
分析仪。GetByTefFrequencyData（频率数据）；
clearRect（0，0，canvas.width，canvas.height）
context.strokeStyle=grad；
bars=250；//设置为一个较高的值，以便条填充填充画布
对于（变量i=0；i

我一直在研究AudioBufferSourceNode，但不确定在这种情况下如何让它工作

因此，我基本上是将音频播放器添加到旋转木马中。在旋转木马的每张幻灯片上，我希望画布显示幻灯片特定音频的音频条

---

任何关于这一点的想法都会让我走上正确的方向。

你的方向已经非常正确了。只需检查当前选择的音频播放器，并更改分析仪分析的音频播放器。因此，当您打开caroussel时，您将获得所选音频播放器的id，断开旧播放器的连接，并将新播放器连接到上下文。事实上，您正在使用的音频源已经是一种audioBufferSourceNode。您可以拥有任意数量的MediaElemetSources。因此，只要在需要时连接并断开它们。只需使用element.disconnect（）即可断开连接，或者请参见此处

您的方向已经非常正确了。只需检查当前选择的音频播放器，并更改分析仪分析的音频播放器。因此，当您打开caroussel时，您将获得所选音频播放器的id，断开旧播放器的连接，并将新播放器连接到上下文。事实上，您正在使用的音频源已经是一种audioBufferSourceNode。您可以拥有任意数量的MediaElemetSources。因此，只要在需要时连接并断开它们。您可以仅使用element.disconnect（）断开连接，或参见此处