0
私はカルーセルにオーディオプレーヤーの負荷で読み込む可能性のあるシステムを持っています。私は、WebオーディオAPIを使用して、プレーヤーの後ろにEQビジュアルエフェクトを提供しましたが、これはすべてうまくいきます...しかし、これを再生することで、あなたはオーディオコン一度（通常は約6回）、1つのオーディオ・コンテキストを作成し、それを使用して、使用するメディア・エレメント・ソースを1つしか持たないという欠点があります。複数のオーディオプレーヤーとウェブオーディオAPI
私が知りたいのは、離れている場合、私は1つのコンテキストを持つことができますが、その時点で再生しているオーディオプレーヤーに応じてオーディオソースを変更することです。私はAudioBufferSourceNodeに探したが、私はこの作業を取得することができます正確にどのように、この文脈ではわからないしてきた
$('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();
}
});
：
以下は私のコードです。
私は基本的にオーディオプレーヤーをカルーセルに追加します。カルーセルの各スライドでは、キャンバスにスライド固有のオーディオバーを表示します。
これに関するアイデアは、正しい方向に私を置くのはすばらしいことでしょう。