javascript - Javascript::Processing.js动画未加载

Question

我有一个供用户输入的表格:

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

我的想法是让输入能够动态触发音频和动画文件:

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

为什么会这样，我做错了什么？

Answer 1

处理lib会自动查找<canvas>，在这种情况下，它找不到源。因此，必须在设置Processing.loadSketchFromSources属性的函数末尾使用<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']);
    }