JavaScript 函数中的 JQuery 函数 :: 处理.js.

JQuery function inside JavaScript function :: Processing.js

本文关键字：函数 处理 js JavaScript JQuery      更新时间：2023-09-26

在以下函数中，当用户在聊天中输入输入时，将触发音频。（它正在工作）

 function play_song() {
    var id = Song.prototype.lyricsIntersect(input);
    var aud = document.getElementById(id);
    console.log(id);
    aud.play();
    //(cont)

（网页）

 <form>
 <textarea onfocus="clearContents(this);" id="chat" cols="50" rows="5"></textarea>
 <button type="button" onclick="play_song();">talk</button>
</form>
<audio id="songName" src="audio/songName.wav" preload="auto"></audio>

在同一个函数中，我有这个JQuery块，用于触发同一首歌曲的相应动画（以编程方式创建处理草图）。

    //(cont)
    $('#chat').on("onclick", function(event){
          console.log(event);
          var $canvas = $("<canvas>")
         .attr("data-processing-sources", "aud")
         .appendTo("body");
            });
    };

（网页）

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

我认为处理草图是attributes，但我不确定。

问题：

如何将var aud传递给JQuery函数？

对音频和动画使用一个函数是实现目标的最有效方法吗？

这似乎是影响 JavaScript 处理草图的一种非常迂回的方式。你可以只编写直接调用你的处理代码的JavaScript。

处理.js 参考有一个示例，该示例正是这样做的：

从处理代码到 JavaScript 比 反其道而行之，因为 JavaScript 是由 Processing创建的.js 解析器不直接在全局对象上公开。相反，你会得到 使用 Processing.instances 属性进行访问。

处理构造函数跟踪它创建的实例，并且 使它们使用 getInstanceById（） 方法可用。默认情况下， 当 具有数据处理源属性时，其 ID 为 用作处理实例的唯一标识符。如果没有 ID 属性，您可以使用 Processing.instances[0]。

在具有对相应处理实例的引用后，您可以 可以像这样调用它：

 <!DOCTYPE html>
 <html>
 <head>
     <title>Hello Web - Controlling Processing from JavaScript</title>
     <script src="processing-1.3.6.min.js"></script>
 </head>
 <body>
     <canvas id="sketch" data-processing-sources="controlling.pde"></canvas>
     <button onclick="startSketch();">
         Start</button>
     <button onclick="stopSketch();">
         Stop</button>
     <script type="application/javascript">
         var processingInstance;
         function startSketch() {
             switchSketchState(true);
         }
         function stopSketch() {
             switchSketchState(false);
         }
         function switchSketchState(on) {
             if (!processingInstance) {
                 processingInstance = Processing.getInstanceById('sketch');
             }
             if (on) {
                 processingInstance.loop();  // call Processing loop() nction
             } else {
                 processingInstance.noLoop(); // stop animation, call noLoop()
             }
         }
     </script>
 </body>
 </html>

这里 DOM 中的两个按钮用于允许用户启动或 停止正在运行的处理草图。它们控制处理实例 （您可能在一个页面中有多个，或隐藏在div 中）直接从 JavaScript，调用处理函数：loop（） 和 noLoop（）。这 处理函数在其他地方有很好的记录。

相关文章：