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

处理库自动查找 <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']);
    }

Javascript :: processing.js 动画未加载

Javascript :: processing.js animation not loading

html

javascript

audio

processing