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

Javascript :: processing.js动画未加载

1 个答案: