@94ai/nf-audio 8.3.16 → 8.3.19

package/lib/nf-audio.cjs.js

@@ -121,7 +121,61 @@ const _sfc_main = {
   },
   data() {
     return {
-      audioWorkletProcessor: `
+      audioWorkletProcessor: /Safari/i.test(navigator.userAgent) ? `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true;
+              this.sampleCount = 0;
+            }
+
+            handleMessage(event) {
+              const { command, start, end } = event.data;
+              if (command === 'start') {
+                this.end = false;
+              } else if (command === 'end') {
+                this.end = true;
+              }
+            }
+
+            process(inputs, outputs) {
+              // 1. 发送心跳消息（让主线程知道我还活着）
+              if (!this.end) {
+                this.port.postMessage({ command: 'tick' });
+              }
+
+              const input = inputs[0];
+              const output = outputs[0];
+
+              for (let channel = 0; channel < output.length; ++channel) {
+                const outputChannel = output[channel];
+
+                // 2. 【Safari 修复核心】
+                // 即使没有输入，也要产生极其微弱的“静音噪声”
+                // 这会强制 Safari 保持 AudioWorklet 的渲染管线开启
+                // 如果不加这个，Safari 可能会在几帧后停止调用 process
+                for (let i = 0; i < outputChannel.length; ++i) {
+                    // 生成 -100dB 到 -120dB 左右的随机噪声，人耳听不见
+                    // 但足以让 Safari 认为音频流是“活跃”的
+                    const noise = (Math.random() * 2 - 1) * 0.00001;
+
+                    // 如果有输入信号，则混合输入；如果没有输入（静音），则只输出噪声
+                    if (input.length > 0 && input[channel]) {
+                         outputChannel[i] = input[channel][i] + noise;
+                    } else {
+                         outputChannel[i] = noise;
+                    }
+                }
+              }
+
+              this.sampleCount += output[0].length;
+              // 3. 始终返回 true，保持节点存活
+              return true;
+            }
+          }
+          registerProcessor('tick', TickWorkletProcessor);
+          ` : `
           class TickWorkletProcessor extends AudioWorkletProcessor {
             constructor() {
               super();
@@ -296,33 +350,18 @@ const _sfc_main = {
       return window.location.protocol === "https:" || window.location.hostname === "localhost";
     },
     async startAudioCtx() {
-      var _a, _b, _c, _d;
+      var _a, _b;
       if (this.isHighPrecision()) {
         try {
           if (!this.audioCtx) {
-            const AudioCtx = window.AudioContext || window.webkitAudioContext;
-            this.audioCtx = new AudioCtx();
+            this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
             if (this.audioCtx.state === "suspended") {
               await this.audioCtx.resume();
             }
+            await ((_a = this.audioCtx.audioWorklet) == null ? void 0 : _a.addModule("data:application/javascript," + encodeURIComponent(this.audioWorkletProcessor)));
+            this.processor = new AudioWorkletNode(this.audioCtx, "tick");
             this.audioSource = this.audioCtx.createMediaElementSource(this.audio);
-            const blob = new Blob([this.audioWorkletProcessor], {
-              type: "application/javascript"
-            });
-            const workletUrl = URL.createObjectURL(blob);
-            try {
-              await ((_a = this.audioCtx.audioWorklet) == null ? void 0 : _a.addModule(workletUrl));
-              this.processor = new AudioWorkletNode(this.audioCtx, "tick");
-              this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
-            } catch (workletErr) {
-              if (this.debuglog) {
-                console.warn("AudioWorklet unavailable, falling back to direct output:", workletErr);
-              }
-              this.audioSource.connect(this.audioCtx.destination);
-              this.processor = null;
-            } finally {
-              URL.revokeObjectURL(workletUrl);
-            }
+            this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
             if ((_b = this.processor) == null ? void 0 : _b.port) {
               this.processor.port.onmessage = (event) => {
                 if (event.data.command === "tick") {
@@ -340,12 +379,12 @@ const _sfc_main = {
               };
             }
           } else {
-            await this.audioCtx.resume();
+            this.audioCtx.resume();
           }
         } catch (e) {
           console.log(e);
         }
-        (_d = (_c = this.processor) == null ? void 0 : _c.port) == null ? void 0 : _d.postMessage({
+        this.processor.port.postMessage({
           command: "start"
         });
       }

package/lib/nf-audio.esm-bundler.js

@@ -119,7 +119,61 @@ const _sfc_main = {
   },
   data() {
     return {
-      audioWorkletProcessor: `
+      audioWorkletProcessor: /Safari/i.test(navigator.userAgent) ? `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true;
+              this.sampleCount = 0;
+            }
+
+            handleMessage(event) {
+              const { command, start, end } = event.data;
+              if (command === 'start') {
+                this.end = false;
+              } else if (command === 'end') {
+                this.end = true;
+              }
+            }
+
+            process(inputs, outputs) {
+              // 1. 发送心跳消息（让主线程知道我还活着）
+              if (!this.end) {
+                this.port.postMessage({ command: 'tick' });
+              }
+
+              const input = inputs[0];
+              const output = outputs[0];
+
+              for (let channel = 0; channel < output.length; ++channel) {
+                const outputChannel = output[channel];
+
+                // 2. 【Safari 修复核心】
+                // 即使没有输入，也要产生极其微弱的“静音噪声”
+                // 这会强制 Safari 保持 AudioWorklet 的渲染管线开启
+                // 如果不加这个，Safari 可能会在几帧后停止调用 process
+                for (let i = 0; i < outputChannel.length; ++i) {
+                    // 生成 -100dB 到 -120dB 左右的随机噪声，人耳听不见
+                    // 但足以让 Safari 认为音频流是“活跃”的
+                    const noise = (Math.random() * 2 - 1) * 0.00001;
+
+                    // 如果有输入信号，则混合输入；如果没有输入（静音），则只输出噪声
+                    if (input.length > 0 && input[channel]) {
+                         outputChannel[i] = input[channel][i] + noise;
+                    } else {
+                         outputChannel[i] = noise;
+                    }
+                }
+              }
+
+              this.sampleCount += output[0].length;
+              // 3. 始终返回 true，保持节点存活
+              return true;
+            }
+          }
+          registerProcessor('tick', TickWorkletProcessor);
+          ` : `
           class TickWorkletProcessor extends AudioWorkletProcessor {
             constructor() {
               super();
@@ -294,33 +348,18 @@ const _sfc_main = {
       return window.location.protocol === "https:" || window.location.hostname === "localhost";
     },
     async startAudioCtx() {
-      var _a, _b, _c, _d;
+      var _a, _b;
       if (this.isHighPrecision()) {
         try {
           if (!this.audioCtx) {
-            const AudioCtx = window.AudioContext || window.webkitAudioContext;
-            this.audioCtx = new AudioCtx();
+            this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
             if (this.audioCtx.state === "suspended") {
               await this.audioCtx.resume();
             }
+            await ((_a = this.audioCtx.audioWorklet) == null ? void 0 : _a.addModule("data:application/javascript," + encodeURIComponent(this.audioWorkletProcessor)));
+            this.processor = new AudioWorkletNode(this.audioCtx, "tick");
             this.audioSource = this.audioCtx.createMediaElementSource(this.audio);
-            const blob = new Blob([this.audioWorkletProcessor], {
-              type: "application/javascript"
-            });
-            const workletUrl = URL.createObjectURL(blob);
-            try {
-              await ((_a = this.audioCtx.audioWorklet) == null ? void 0 : _a.addModule(workletUrl));
-              this.processor = new AudioWorkletNode(this.audioCtx, "tick");
-              this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
-            } catch (workletErr) {
-              if (this.debuglog) {
-                console.warn("AudioWorklet unavailable, falling back to direct output:", workletErr);
-              }
-              this.audioSource.connect(this.audioCtx.destination);
-              this.processor = null;
-            } finally {
-              URL.revokeObjectURL(workletUrl);
-            }
+            this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
             if ((_b = this.processor) == null ? void 0 : _b.port) {
               this.processor.port.onmessage = (event) => {
                 if (event.data.command === "tick") {
@@ -338,12 +377,12 @@ const _sfc_main = {
               };
             }
           } else {
-            await this.audioCtx.resume();
+            this.audioCtx.resume();
           }
         } catch (e) {
           console.log(e);
         }
-        (_d = (_c = this.processor) == null ? void 0 : _c.port) == null ? void 0 : _d.postMessage({
+        this.processor.port.postMessage({
           command: "start"
         });
       }

package/package/audio-safari.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Play Audio in Specified Range with AudioWorklet</title>
+</head>
+<body>
+<div style="display: flex;align-items: center">
+  <audio id="myAudio" src="./20170206081849_A100187_34f7e6b8-thumb.mp3" controls></audio>
+  <button onclick="playAudioInSpecifiedRange(1, 12)">Play Audio in Range 1-20 seconds</button>
+  <button onclick="endAudioInSpecifiedRange()">End Audio</button>
+</div>
+
+<script>
+let playAudioInSpecifiedRange
+let endAudioInSpecifiedRange
+
+
+addEventListener("DOMContentLoaded", async (event) => {
+  const audioWorkletProcessor = `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true;
+              this.sampleCount = 0;
+            }
+
+            handleMessage(event) {
+              const { command, start, end } = event.data;
+              if (command === 'start') {
+                this.end = false;
+              } else if (command === 'end') {
+                this.end = true;
+              }
+            }
+
+            process(inputs, outputs) {
+              // 1. 发送心跳消息（让主线程知道我还活着）
+              this.port.postMessage({ command: 'tick' });
+
+              const input = inputs[0];
+              const output = outputs[0];
+
+              for (let channel = 0; channel < output.length; ++channel) {
+                const outputChannel = output[channel];
+
+                // 2. 【Safari 修复核心】
+                // 即使没有输入，也要产生极其微弱的“静音噪声”
+                // 这会强制 Safari 保持 AudioWorklet 的渲染管线开启
+                // 如果不加这个，Safari 可能会在几帧后停止调用 process
+                for (let i = 0; i < outputChannel.length; ++i) {
+                    // 生成 -100dB 到 -120dB 左右的随机噪声，人耳听不见
+                    // 但足以让 Safari 认为音频流是“活跃”的
+                    const noise = (Math.random() * 2 - 1) * 0.00001;
+
+                    // 如果有输入信号，则混合输入；如果没有输入（静音），则只输出噪声
+                    if (input.length > 0 && input[channel]) {
+                         outputChannel[i] = input[channel][i] + noise;
+                    } else {
+                         outputChannel[i] = noise;
+                    }
+                }
+              }
+
+              this.sampleCount += output[0].length;
+              // 3. 始终返回 true，保持节点存活
+              return !this.end;
+            }
+          }
+          registerProcessor('tick', TickWorkletProcessor);
+          `
+
+  let ctx
+  let processor
+  let source
+
+  endAudioInSpecifiedRange = async () => {
+    myAudio.pause()
+    if (processor) {
+      processor.port.postMessage({ command: 'end' });
+    }
+    if (ctx && ctx.state !== 'closed') {
+      // Safari 中 suspend 有时会导致状态异常，视情况使用
+      // ctx.suspend()
+    }
+  }
+
+  playAudioInSpecifiedRange = async (start, end) => {
+    // 1. 初始化 AudioContext (包含之前的 Safari 唤醒修复)
+    if (!ctx) {
+      const AudioContext = window.AudioContext || window.webkitAudioContext;
+      ctx = new AudioContext();
+
+      // 必须在用户交互栈中立即 resume
+      if (ctx.state === 'suspended') {
+        await ctx.resume();
+      }
+
+      await ctx.audioWorklet.addModule('data:application/javascript,' + encodeURIComponent(audioWorkletProcessor));
+
+      processor = new AudioWorkletNode(ctx, 'tick');
+      // 设置 bufferSize 为最小值，减少延迟，提高 process 调用频率
+      processor.port.onmessage = (event) => {
+        if (event.data.command === 'tick') {
+
+          // 检测是否超出范围
+          if (myAudio.currentTime > end) {
+            endAudioInSpecifiedRange();
+          }
+          // 调试用：每隔一段时间打印，避免刷屏
+          console.log(myAudio.currentTime);
+        }
+      };
+
+      source = ctx.createMediaElementSource(myAudio);
+      source.connect(processor).connect(ctx.destination);
+    } else {
+      if (ctx.state === 'suspended') {
+        await ctx.resume();
+      }
+    }
+    // 发送 start 命令给 Worklet
+    processor.port.postMessage({ command: 'start' });
+    // 2. 重置状态并开始
+    myAudio.currentTime = start;
+    // 3. 播放音频
+    await myAudio.play();
+
+    // // 4. 【额外保险】使用 requestAnimationFrame 监控时间
+    // // 既然 process 在 Safari 可能不可靠，我们用 RAF 作为兜底来检测结束时间
+    // const monitorLoop = () => {
+    //   if (myAudio.paused || myAudio.ended) return;
+    //
+    //   if (myAudio.currentTime > end) {
+    //     endAudioInSpecifiedRange();
+    //   } else {
+    //     requestAnimationFrame(monitorLoop);
+    //   }
+    // };
+    // requestAnimationFrame(monitorLoop);
+  }
+});
+</script>
+
+</body>
+</html>

package/package/nf-audio.vue

@@ -299,7 +299,61 @@ export default {
   },
   data() {
     return {
-      audioWorkletProcessor: `
+      audioWorkletProcessor: /Safari/i.test(navigator.userAgent) ? `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true;
+              this.sampleCount = 0;
+            }
+
+            handleMessage(event) {
+              const { command, start, end } = event.data;
+              if (command === 'start') {
+                this.end = false;
+              } else if (command === 'end') {
+                this.end = true;
+              }
+            }
+
+            process(inputs, outputs) {
+              // 1. 发送心跳消息（让主线程知道我还活着）
+              if (!this.end) {
+                this.port.postMessage({ command: 'tick' });
+              }
+
+              const input = inputs[0];
+              const output = outputs[0];
+
+              for (let channel = 0; channel < output.length; ++channel) {
+                const outputChannel = output[channel];
+
+                // 2. 【Safari 修复核心】
+                // 即使没有输入，也要产生极其微弱的“静音噪声”
+                // 这会强制 Safari 保持 AudioWorklet 的渲染管线开启
+                // 如果不加这个，Safari 可能会在几帧后停止调用 process
+                for (let i = 0; i < outputChannel.length; ++i) {
+                    // 生成 -100dB 到 -120dB 左右的随机噪声，人耳听不见
+                    // 但足以让 Safari 认为音频流是“活跃”的
+                    const noise = (Math.random() * 2 - 1) * 0.00001;
+
+                    // 如果有输入信号，则混合输入；如果没有输入（静音），则只输出噪声
+                    if (input.length > 0 && input[channel]) {
+                         outputChannel[i] = input[channel][i] + noise;
+                    } else {
+                         outputChannel[i] = noise;
+                    }
+                }
+              }
+
+              this.sampleCount += output[0].length;
+              // 3. 始终返回 true，保持节点存活
+              return true;
+            }
+          }
+          registerProcessor('tick', TickWorkletProcessor);
+          ` : `
           class TickWorkletProcessor extends AudioWorkletProcessor {
             constructor() {
               super();
@@ -484,29 +538,15 @@ export default {
       if (this.isHighPrecision()) {
         try {
           if (!this.audioCtx) {
-            const AudioCtx = window.AudioContext || window.webkitAudioContext
-            this.audioCtx = new AudioCtx()
+            this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+            // 必须在用户交互栈中立即 resume
             if (this.audioCtx.state === 'suspended') {
-              await this.audioCtx.resume()
+              await this.audioCtx.resume();
             }
+            await this.audioCtx.audioWorklet?.addModule('data:application/javascript,' + encodeURIComponent(this.audioWorkletProcessor))
+            this.processor = new AudioWorkletNode(this.audioCtx, 'tick')
             this.audioSource = this.audioCtx.createMediaElementSource(this.audio)
-            // 使用 Blob URL 替代 data URI，提升 Safari 兼容性
-            const blob = new Blob([this.audioWorkletProcessor], { type: 'application/javascript' })
-            const workletUrl = URL.createObjectURL(blob)
-            try {
-              await this.audioCtx.audioWorklet?.addModule(workletUrl)
-              this.processor = new AudioWorkletNode(this.audioCtx, 'tick')
-              this.audioSource.connect(this.processor).connect(this.audioCtx.destination)
-            } catch (workletErr) {
-              if (this.debuglog) {
-                console.warn('AudioWorklet unavailable, falling back to direct output:', workletErr)
-              }
-              // AudioWorklet 不可用时，直接连接到 destination，保证有声音
-              this.audioSource.connect(this.audioCtx.destination)
-              this.processor = null
-            } finally {
-              URL.revokeObjectURL(workletUrl)
-            }
+            this.audioSource.connect(this.processor).connect(this.audioCtx.destination)
             if (this.processor?.port) {
               this.processor.port.onmessage = (event) => {
                 if (event.data.command === 'tick') {
@@ -524,12 +564,12 @@ export default {
               }
             }
           } else {
-            await this.audioCtx.resume()
+            this.audioCtx.resume()
           }
         } catch (e) {
           console.log(e)
         }
-        this.processor?.port?.postMessage({ command: 'start' })
+        this.processor.port.postMessage({ command: 'start' })
       }
     },
     pause() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-audio",
-  "version": "8.3.16",
+  "version": "8.3.19",
   "description": "> TODO: description",
   "keywords": [],
   "author": "liuxiangxiang <liuxiangxiang@94ai.com>",
@@ -14,8 +14,8 @@
     "url": "http://94ai.gitlab.com/zoujiahe/common-ui.git"
   },
   "dependencies": {
-    "@94ai/nf-message": "^8.3.16",
-    "@94ai/nf-theme-chalk": "^8.3.16",
+    "@94ai/nf-message": "^8.3.19",
+    "@94ai/nf-theme-chalk": "^8.3.19",
     "vue-demi": "^0.14.5"
   },
   "peerDependenciesMeta": {
@@ -31,5 +31,5 @@
   "types": "lib/index.d.ts",
   "main": "lib/nf-audio.cjs.js",
   "module": "lib/nf-audio.esm-bundler.js",
-  "gitHead": "75e563768bd7105b7e6ac7c4ca438a318941469b"
+  "gitHead": "ec206eadc7ca1a279e552ac22b51c29a5e71b326"
 }