Javascript:：processing.js动画未加载

我有一个用户输入表单：

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

但是，只有在

html

文档中预加载动画时，此函数才会加载动画，如：

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

---

这是为什么，我做错了什么？

Processing lib会自动查找

，在本例中，它找不到源代码。因此，必须在设置

属性的函数末尾使用方法

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

---

听起来您有两个不同的代码源，一个是javascript，另一个是pde文件。看起来两者可以互操作，但可能需要为此目的而设计。也许这个链接会让你走上正确的方向。啊，我知道更可能的问题是什么了。似乎正在加载处理库，但找不到源，因为您稍后要通过单击按钮添加它。这可能就是你想要的答案。

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

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