的Javascript :: processing.js動畫不加載

我對用戶輸入的形式：的Javascript :: processing.js動畫不加載

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

我IDEIA是有輸入觸發音頻和動畫文件dinamically：

<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>

我把兩音頻和動畫引擎在同一功能下面。（音頻播放被觸發好吧。）

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(); 
    };

但動畫沒有被這個功能加載，只要預裝html文件中，如：

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

這是爲什麼，是什麼我做錯了？

來源

2016-03-25 data_garden

這聽起來像你有兩個不同的代碼源，一個是javascript，另一個是pde文件。看起來兩者可以互操作，但可能需要爲此目的而設計。也許這個鏈接會讓你朝着正確的方向前進。 http://processingjs.org/articles/jsQuickStart.html#accessingprocessingfromjs – Nolo

啊，我看到更可能的問題是什麼。看起來處理庫正在加載，並且因爲您稍後通過單擊按鈕添加它而沒有找到源。這可能是你正在尋找的答案。 http://stackoverflow.com/questions/11178450/dynamically-unload-a-processing-js-sketch-from-canvas – Nolo

處理庫自動查找<canvas>，在這種情況下，它找不到任何來源。因此，必須在設置<canvas>屬性的函數的末尾使用方法Processing.loadSketchFromSources。

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']); 
    }

來源

2016-03-27 06:03:17

的Javascript :: processing.js動畫不加載

回答

相關問題