Javascript :: processing.js Animation nicht

Question

Laden

Ich habe ein Formular für die Benutzereingabe:

<form> 
    <textarea onfocus="clearContents(this);" id="chat" cols="50" rows="5"> </textarea> 
    <button type="button" onclick="animate_song();">talk</button> 
</form> 

Meine ideia ist Dateien Eingangstrigger Audio und Animation dinamically haben:

<audio id="audio" src=" "></audio> 

<canvas id="animaton" data-processing-sources=" "></canvas> 

<script src="scripts/processing.min.js"></script> 
<script src="scripts/soundEngine.js"></script> 

Ich habe beide Audio-und Animations-Engines innerhalb der gleichen Funktion, unten. (Audio-Wiedergabe wird ausgelöst in Ordnung.)

function animate_song(){ 

    var id = Song.prototype.lyricsIntersect(input); 

    document.getElementById("animation").setAttribute(
     "data-processing-sources", 'sketches' + '/' + id + '.' + 'pde'); 

    var playback = 'http://127.0.0.1:8000/audio' + '/' + id + '.wav'; 

    var request = new XMLHttpRequest(); 
    request.open("GET", playback, true); 
    request.responseType = "blob"; 

    request.onload = function() { 
     if (this.status == 200) { 
      var audio = document.getElementById("audio"); 
      var src = URL.createObjectURL(this.response); 
      audio.src = src; 
      audio.load(); 
      audio.play(); 
     } 
    } 
    request.send(); 
    }; 

Aber Animation von dieser Funktion nicht geladen wird, wenn auch nur in dem Dokument html vorbelastet, wie in:

<canvas data-processing-sources="sketches/song.pde"></canvas> 

Warum das ist, was Ich mache falsch?

Answer 1

Die Verarbeitungsbibliothek sucht automatisch nach <canvas>, und in diesem Fall wurde keine Quelle gefunden. Daher muss am Ende der Funktion die Methode Processing.loadSketchFromSources verwendet werden, die das Attribut <canvas> setzt.

function animate_song(){ 

     var id = Song.prototype.lyricsIntersect(input); 

     var sketch = 'http://127.0.0.1:8000/sketches' + '/' + id + '.pde'; 

     var request = new XMLHttpRequest(); 
     request.open("GET", sketch, true); 
     request.responseType = "blob"; 

     request.onload = function() { 
      if (this.status == 200) { 
       var animation = document.getElementById("animation"); 
       var src = URL.createObjectURL(this.response); 
       animation.src = src; 
       animation.setAttribute("data-processing-sources", 'sketches' + '/' + id + '.' + 'pde'); 
      } 
     } 
     request.send(); 

     Processing.loadSketchFromSources('animation', ['sketches' + '/' + id + '.' + 'pde']); 
    }