Mehrere Audio-Player und die Web-Audio-API

Question

Ich habe ein System, das das Potenzial hat, in Last von Audio-Playern in ein Karussell zu laden. Ich habe die Web-Audio-API verwendet, um hinter dem Player einen visuellen EQ-Effekt zu erzeugen. Das funktioniert alles gut ... aber ich habe dabei festgestellt, dass Sie nur eine begrenzte Anzahl von Audio-Kontexten haben können einmal (normalerweise um 6), habe ich bei der Erstellung eines Audiokontextes den Haken, nur eine Medienelementquelle zu verwenden, was bedeutet, dass ich nur mit einem Player arbeiten kann.

Was ich gerne wissen würde ist, wenn es weg ist, kann ich einen Kontext haben, aber es muss die Audioquelle ändern, abhängig davon, welcher Audiospieler gerade spielt.

Unten ist mein Code:

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

}); 

Ich habe in den AudioBufferSourceNode suchen, aber nicht sicher, genau in diesem Zusammenhang, wie ich diese Arbeit bekommen kann.

Also füge ich im Grunde die Audio-Player in ein Karussell. Auf jeder Folie des Karussells möchte ich auf der Leinwand die Audioleisten für das spezifische Audio der Folien anzeigen.

Irgendwelche Ideen zu diesem wäre eine tolle, um mich in die richtige Richtung zu bringen.

Answer 1

Ihre Richtung ist schon ganz richtig. Überprüfen Sie einfach, welcher Audioplayer gerade ausgewählt ist und wechseln Sie den vom Analysator analysierten Audioplayer. Wenn Sie also das Caroussel drehen, erhalten Sie die ID des ausgewählten Audioplayers, trennen Sie den alten Player und verbinden Sie den neuen Player mit dem Kontext. Tatsächlich ist Ihre Audioquelle, mit der Sie bereits arbeiten, eine Art AudioBufferSourceNode. Sie können so viele MediaElemetSources haben, wie Sie möchten. Also verbinden und trennen Sie sie bei Bedarf. Sie können nur mit element.disconnect() trennen oder sehen Sie hier https://developer.mozilla.org/en-US/docs/Web/API/AudioNode/disconnect