Javascript Frage

Javascript Frage | PSD-Tutorials.de

Erstellt von consansri, 07.09.2019.

  1. consansri

    consansri Noch nicht viel geschrieben

    Dabei seit:
    07.09.2019
    Beiträge:
    1
    Javascript Frage
    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;
    }
    }
    }
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. traumfantasie

    traumfantasie will dazulernen Kreativ-Flatrate-User

    475
    Dabei seit:
    15.06.2009
    Beiträge:
    5.714
    Geschlecht:
    weiblich
    Ort:
    Leipzig
    Software:
    CS6, Cinema 4D R16, Win 8.1
    Kameratyp:
    Nikon D5100
    Javascript Frage
    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.
     
    #2      
Seobility SEO Tool
x
×
×