Auf Thema antworten 2026

Beitrag

<blockquote data-quote="consansri" data-source="post: 2715699">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(&quot;aBleibBeiUns&quot;), document.getElementById(&quot;aOffline&quot;), document.getElementById(&quot;aLeuchtturm&quot;), document.getElementById(&quot;aImmerBegleiten&quot;), document.getElementById(&quot;aCan&#039;tHelpFallingInLove&quot;), document.getElementById(&quot;aDerGedanke&quot;), document.getElementById(&quot;aGefälltMir&quot;),document.getElementById(&quot;aGL713&quot;),document.getElementById(&quot;aDuBistDa&quot;),document.getElementById(&quot;aAllOfMe&quot;),document.getElementById(&quot;aCelloSuiteNo2&quot;),document.getElementById(&quot;aDerSchwan&quot;),document.getElementById(&quot;aRhapsodie&quot;)]; function initPlayer(audio){&nbsp;&nbsp;document.getElementById(&#039;audioselect&#039;).appendChild(audio);&nbsp;context = new AudioContext(); //DIE ANZAHL IST AUF 6 BESCHRÄNKT&nbsp;&nbsp;analyser = context.createAnalyser();&nbsp;canvas = document.getElementById(&#039;canvas&#039;);&nbsp;ctx = canvas.getContext(&#039;2d&#039;);&nbsp;&nbsp; &nbsp;try{&nbsp; source = context.createMediaElementSource(audio);&nbsp; //WIE KANN ICH DAS SOURCE ELEMENT IMMER WIEDER NEU ERSTELLEN BZW. DIE VERBINDUNG MIT DER VORHERIGEN SOURCE NODE ENTFERNEN?&nbsp; source.connect(analyser);&nbsp;}catch(e){console.log(e);}&nbsp;analyser.connect(context.destination);&nbsp; &nbsp;new frameLooper();&nbsp; }//loop Grafik function frameLooper(){&nbsp; &nbsp;window.requestAnimationFrame(frameLooper);&nbsp;fbc_array = new Uint8Array(analyser.frequencyBinCount); &nbsp;analyser.getByteFrequencyData(fbc_array);&nbsp;ctx.clearRect(0,0, canvas.width, canvas.height);&nbsp;ctx.fillStyle = &#039;#333&#039;; //Color of the Bars&nbsp;bars = 400;&nbsp;for (var i = 0; i &lt; bars; i++){&nbsp; bar_x = i * 6;&nbsp; bar_width = 5;&nbsp; bar_height = -(fbc_array / 2);&nbsp; //fillRect(x,y,width,height)&nbsp;&nbsp; &nbsp; ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); &nbsp;}&nbsp; }Und hier noch der Code aus dem die Funktion ausgeführt wird:function aselect(snmbr){ &nbsp;var audio = [document.getElementById(&quot;aBleibBeiUns&quot;), document.getElementById(&quot;aOffline&quot;), document.getElementById(&quot;aLeuchtturm&quot;), document.getElementById(&quot;aImmerBegleiten&quot;), document.getElementById(&quot;aCan&#039;tHelpFallingInLove&quot;), document.getElementById(&quot;aDerGedanke&quot;), document.getElementById(&quot;aGefälltMir&quot;),document.getElementById(&quot;aGL713&quot;),document.getElementById(&quot;aDuBistDa&quot;),document.getElementById(&quot;aAllOfMe&quot;),document.getElementById(&quot;aCelloSuiteNo2&quot;),document.getElementById(&quot;aDerSchwan&quot;),document.getElementById(&quot;aRhapsodie&quot;)]; &nbsp;if(!audio[snmbr].paused){&nbsp; &nbsp; audio[snmbr].pause(); &nbsp; document.getElementById(&quot;a&quot;+snmbr).style.backgroundColor=&quot;rgba(241,241,241, .8)&quot;;&nbsp; document.getElementById(&quot;at&quot;+snmbr).style.color=&quot;#333&quot;;&nbsp; &nbsp;} else if(audio[snmbr].paused){&nbsp;&nbsp; &nbsp; audio[snmbr].play();&nbsp;&nbsp; &nbsp; new initPlayer(audio[snmbr], snmbr); // AUFRUF&nbsp; audio[snmbr].volume = document.getElementById(&quot;currentvolume&quot;).value/100;&nbsp; new playtime(snmbr);&nbsp;}&nbsp;for(var i=0;i &lt; audio.length; i++){&nbsp; if(i != snmbr){&nbsp;&nbsp; &nbsp;&nbsp; audio.pause();&nbsp;&nbsp; audio.currentTime = 0;&nbsp; }&nbsp;} }</blockquote>

[QUOTE="consansri, post: 2715699"] 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[i] / 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[i].pause(); audio[i].currentTime = 0; } } }[/i][/i][/i] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?