Question

我的系统有可能将音频播放器加载到旋转木马中。我已经利用网络音频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();
}

});

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

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

任何有关这方面的想法都会让我走向正确的方向。

Answer 1

你的方向已经非常正确了。只需检查当前选择的音频播放器，然后更改分析仪分析的音频播放器。因此，当您转动caroussel时，您将获得所选音频播放器的ID，断开旧播放器并将新播放器连接到上下文。事实上，您正在使用的音频源是一种audioBufferSourceNode。您可以拥有任意数量的MediaElemetSources。因此，只需在需要时连接并断开连接。您可以仅使用element.disconnect（）断开连接，也可以在此处查看https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/disconnect

多个音频播放器和Web音频API

1 个答案: