Javascript Frage

[consansri]

Hallo,

ich bin gerade daran einen Audiovisualizer für einen eigenen Webplayer zu programmieren.
Mein Ziel ist es auf einem Canvas Objekt immer die Frequenzen des gerade spielenden Audio Objekts anzuzeigen.

Zur Erklärung:
Immer wenn Play gedrückt wird die initPlayer Funktion mit dem entsprechenden audioElement aufgerufen.

Code des Visualizers:

var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];

function initPlayer(audio){

document.getElementById('audioselect').appendChild(audio);
context = new AudioContext(); //DIE ANZAHL IST AUF 6 BESCHRÄNKT

analyser = context.createAnalyser();
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');

try{
source = context.createMediaElementSource(audio); //WIE KANN ICH DAS SOURCE ELEMENT IMMER WIEDER NEU ERSTELLEN BZW. DIE VERBINDUNG MIT DER VORHERIGEN SOURCE NODE ENTFERNEN?
source.connect(analyser);
}catch(e){console.log(e);}
analyser.connect(context.destination);

new frameLooper();
}
//loop Grafik
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 = '#333'; //Color of the Bars
bars = 400;
for (var i = 0; i < bars; i++){
bar_x = i * 6;
bar_width = 5;
bar_height = -(fbc_array / 2);
//fillRect(x,y,width,height)
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}

Und hier noch der Code aus dem die Funktion ausgeführt wird:
function aselect(snmbr){
var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];

if(!audio[snmbr].paused){
audio[snmbr].pause();
document.getElementById("a"+snmbr).style.backgroundColor="rgba(241,241,241, .8)";
document.getElementById("at"+snmbr).style.color="#333";
} else if(audio[snmbr].paused){
audio[snmbr].play();
new initPlayer(audio[snmbr], snmbr); // AUFRUF
audio[snmbr].volume = document.getElementById("currentvolume").value/100;
new playtime(snmbr);
}
for(var i=0;i < audio.length; i++){
if(i != snmbr){
audio.pause();
audio.currentTime = 0;
}
}
}

 

[traumfantasie]

Ich habe keine Ahnung von dem Thema.
Aber ich glaube, wenn du eine Frage stellst was dein Problem ist, kann man dir bestimmt besser helfen.
Nur ein gutgemeinter Rat.
Schönes Wochenende.