@94ai/nf-audio 3.3.60 → 3.3.62

package/lib/nf-audio.cjs.js

@@ -10,6 +10,10 @@ function timeFormat(value) {
 const _sfc_main = {
   name: "nf-audio",
   props: {
+    debuglog: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String
     },
@@ -56,6 +60,10 @@ const _sfc_main = {
       type: Number,
       default: 0
     },
+    showJumpTime: {
+      type: Boolean,
+      default: true
+    },
     // 快退秒数
     backSecond: {
       type: Number,
@@ -70,7 +78,7 @@ const _sfc_main = {
     multipleArray: {
       type: Array,
       default() {
-        return ["1.0", "1.25", "1.5", "1.75", "2.0", "2.5", "3.0", "3.5", "4.0"];
+        return ["1.0", "1.25", "1.5", "1.75", "2.0", "2.5", "3.0", "3.5", "4.0", "10.0"];
       }
     },
     // 默认速度
@@ -93,6 +101,45 @@ const _sfc_main = {
   },
   data() {
     return {
+      audioWorkletProcessor: `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true
+            }
+
+            handleMessage(event) {
+              const { command, start, end, currentTime } = event.data;
+              if (command === 'start') {
+                this.end = false
+              } else if (command === 'end') {
+                this.end = true
+              }
+            }
+
+            process(inputs, outputs) {
+              this.port.postMessage({
+                command: 'tick'
+              });
+              const input = inputs[0];
+              const output = outputs[0];
+              for (let channel = 0; channel < input.length; ++channel) {
+                const inputChannel = input[channel];
+                const outputChannel = output[channel];
+                for (let i = 0; i < inputChannel.length; ++i) {
+                  outputChannel[i] = inputChannel[i];
+                }
+              }
+              return !this.end;
+            }
+          }
+
+          registerProcessor('tick', TickWorkletProcessor);
+          `,
+      audioCtx: void 0,
+      audioSource: void 0,
+      processor: void 0,
       betweenPlaying: false,
       // 播放还是暂停
       paused: true,
@@ -123,6 +170,28 @@ const _sfc_main = {
     this.volumeValue = this.initVolumnValue * 100;
     this.syncSpeed();
   },
+  beforeDestroy() {
+    var _a, _b, _c, _d;
+    this.betweenPlaying = false;
+    try {
+      (_a = this.audioCtx) == null ? void 0 : _a.close();
+    } catch (e) {
+    } finally {
+      this.audioCtx = void 0;
+    }
+    try {
+      (_b = this.audioSource) == null ? void 0 : _b.disconnect();
+    } catch (e) {
+    } finally {
+      this.audioSource = void 0;
+    }
+    try {
+      (_d = (_c = this.processor) == null ? void 0 : _c.port) == null ? void 0 : _d.close();
+    } catch (e) {
+    } finally {
+      this.processor = void 0;
+    }
+  },
   methods: {
     locationToTime(time) {
       this.betweenPlaying = false;
@@ -176,8 +245,11 @@ const _sfc_main = {
     handlePauseOrPlay() {
       if (!this.disabled) {
         if (this.audio.readyState >= 2) {
-          this.audio.paused ? this.audio.play() : this.audio.pause();
-          this.audio.playbackRate = this.speed;
+          if (this.audio.paused) {
+            this.playAudio();
+          } else {
+            this.pauseAudio();
+          }
           this.paused = !this.paused;
           this.betweenPlaying = false;
           this.$emit("pauseOrPlay", this.paused);
@@ -185,19 +257,70 @@ const _sfc_main = {
           console.log("Audio is not ready yet.");
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
         }
       }
     },
+    suspendAudioCtx() {
+      var _a, _b, _c;
+      try {
+        (_b = (_a = this.processor) == null ? void 0 : _a.port) == null ? void 0 : _b.postMessage({
+          command: "end"
+        });
+      } catch (e) {
+      }
+      try {
+        (_c = this.audioCtx) == null ? void 0 : _c.suspend();
+      } catch (e) {
+      }
+    },
+    async startAudioCtx() {
+      if (!this.audioCtx) {
+        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        this.audioSource = this.audioCtx.createMediaElementSource(this.audio);
+        await this.audioCtx.audioWorklet.addModule("data:application/javascript," + encodeURIComponent(this.audioWorkletProcessor));
+        this.processor = new AudioWorkletNode(this.audioCtx, "tick");
+        this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
+        this.processor.port.onmessage = (event) => {
+          if (event.data.command === "tick") {
+            if (this.betweenPlaying) {
+              if (this.betweenStart && this.betweenEnd) {
+                if (this.debuglog) {
+                  console.log(this.audio.currentTime);
+                }
+                if (this.audio.currentTime >= this.betweenEnd) {
+                  this.pause();
+                }
+              }
+            }
+          }
+        };
+      } else {
+        this.audioCtx.resume();
+      }
+      this.processor.port.postMessage({
+        command: "start"
+      });
+    },
     pause() {
-      this.audio.pause();
+      this.pauseAudio();
       this.paused = true;
       this.betweenPlaying = false;
     },
-    play() {
-      this.audio.play();
+    async play() {
+      await this.playAudio();
       this.paused = false;
       this.betweenPlaying = false;
     },
+    pauseAudio() {
+      this.audio.pause();
+      this.suspendAudioCtx();
+    },
+    async playAudio() {
+      this.audio.playbackRate = this.speed;
+      await this.startAudioCtx();
+      this.audio.play();
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration);
@@ -213,18 +336,16 @@ const _sfc_main = {
         this.$refs.progressCurrent.style.width = MoveX + "px";
         this.$refs.progressBar.style.left = MoveX - this.$refs.progressBar.clientWidth / 2 + "px";
         this.paused = false;
-        if (this.betweenPlaying) {
-          if (this.betweenStart && this.betweenEnd) {
-            console.log(this.audio.currentTime, "this.audio.currentTime");
-            if (this.audio.currentTime >= this.betweenEnd) {
-              this.pause();
-            }
-          }
-        }
       }
     },
     betweenPlay() {
       if (!this.disabled) {
+        if (this.audio.duration === 0) {
+          nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
+          this.betweenPlaying = false;
+          return false;
+        }
         this.betweenPlaying = true;
         this.jumpToTime(this.betweenStart);
       }
@@ -232,7 +353,7 @@ const _sfc_main = {
     handleAudioEnded() {
       this.$refs.progressCurrent.style.width = this.$refs.progressContainer.clientWidth + "px";
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - this.$refs.progressBar.clientWidth / 2 + "px";
-      this.paused = true;
+      this.pause();
     },
     //点击进度条更新进度
     clickProgress(e) {
@@ -240,6 +361,7 @@ const _sfc_main = {
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
         if (!this.audio.paused) {
@@ -261,10 +383,10 @@ const _sfc_main = {
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
-        this.audio.play();
-        this.paused = false;
+        this.play();
       }
     },
     moveX(e) {
@@ -279,8 +401,9 @@ const _sfc_main = {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
-        this.audio.pause();
+        this.pauseAudio();
         this.paused = true;
+        this.betweenPlaying = false;
         const progressContainer = this.$refs.progressContainer;
         this.moveMin = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft;
         this.moveMax = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft + progressContainer.clientWidth;
@@ -318,17 +441,18 @@ const _sfc_main = {
     },
     jumpToTime(time) {
       if (!this.disabled) {
-        this.audio.pause();
+        this.pauseAudio();
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
         if (time >= this.audio.duration) {
           this.audio.currentTime = this.audio.duration;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
           if (time > this.audio.duration) {
             console.error(this.crossTimeTip);
           }
@@ -337,12 +461,12 @@ const _sfc_main = {
           this.audio.currentTime = time;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
         } else {
           this.audio.currentTime = 0;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
         }
         this.$emit("jumpToTime", time);
       }
@@ -402,7 +526,7 @@ var _sfc_render = function render() {
       "timeupdate": _vm.updateTime,
       "ended": _vm.handleAudioEnded
     }
-  }), typeof _vm.jumpTime === "undefined" ? _vm._t("jump", function() {
+  }), _vm.showJumpTime ? _vm._t("jump", function() {
     return [_c("div", {
       staticClass: "nf-audio-fast"
     }, [_c("i", {

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

@@ -8,6 +8,10 @@ function timeFormat(value) {
 const _sfc_main = {
   name: "nf-audio",
   props: {
+    debuglog: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String
     },
@@ -54,6 +58,10 @@ const _sfc_main = {
       type: Number,
       default: 0
     },
+    showJumpTime: {
+      type: Boolean,
+      default: true
+    },
     // 快退秒数
     backSecond: {
       type: Number,
@@ -68,7 +76,7 @@ const _sfc_main = {
     multipleArray: {
       type: Array,
       default() {
-        return ["1.0", "1.25", "1.5", "1.75", "2.0", "2.5", "3.0", "3.5", "4.0"];
+        return ["1.0", "1.25", "1.5", "1.75", "2.0", "2.5", "3.0", "3.5", "4.0", "10.0"];
       }
     },
     // 默认速度
@@ -91,6 +99,45 @@ const _sfc_main = {
   },
   data() {
     return {
+      audioWorkletProcessor: `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true
+            }
+
+            handleMessage(event) {
+              const { command, start, end, currentTime } = event.data;
+              if (command === 'start') {
+                this.end = false
+              } else if (command === 'end') {
+                this.end = true
+              }
+            }
+
+            process(inputs, outputs) {
+              this.port.postMessage({
+                command: 'tick'
+              });
+              const input = inputs[0];
+              const output = outputs[0];
+              for (let channel = 0; channel < input.length; ++channel) {
+                const inputChannel = input[channel];
+                const outputChannel = output[channel];
+                for (let i = 0; i < inputChannel.length; ++i) {
+                  outputChannel[i] = inputChannel[i];
+                }
+              }
+              return !this.end;
+            }
+          }
+
+          registerProcessor('tick', TickWorkletProcessor);
+          `,
+      audioCtx: void 0,
+      audioSource: void 0,
+      processor: void 0,
       betweenPlaying: false,
       // 播放还是暂停
       paused: true,
@@ -121,6 +168,28 @@ const _sfc_main = {
     this.volumeValue = this.initVolumnValue * 100;
     this.syncSpeed();
   },
+  beforeDestroy() {
+    var _a, _b, _c, _d;
+    this.betweenPlaying = false;
+    try {
+      (_a = this.audioCtx) == null ? void 0 : _a.close();
+    } catch (e) {
+    } finally {
+      this.audioCtx = void 0;
+    }
+    try {
+      (_b = this.audioSource) == null ? void 0 : _b.disconnect();
+    } catch (e) {
+    } finally {
+      this.audioSource = void 0;
+    }
+    try {
+      (_d = (_c = this.processor) == null ? void 0 : _c.port) == null ? void 0 : _d.close();
+    } catch (e) {
+    } finally {
+      this.processor = void 0;
+    }
+  },
   methods: {
     locationToTime(time) {
       this.betweenPlaying = false;
@@ -174,8 +243,11 @@ const _sfc_main = {
     handlePauseOrPlay() {
       if (!this.disabled) {
         if (this.audio.readyState >= 2) {
-          this.audio.paused ? this.audio.play() : this.audio.pause();
-          this.audio.playbackRate = this.speed;
+          if (this.audio.paused) {
+            this.playAudio();
+          } else {
+            this.pauseAudio();
+          }
           this.paused = !this.paused;
           this.betweenPlaying = false;
           this.$emit("pauseOrPlay", this.paused);
@@ -183,19 +255,70 @@ const _sfc_main = {
           console.log("Audio is not ready yet.");
           Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
         }
       }
     },
+    suspendAudioCtx() {
+      var _a, _b, _c;
+      try {
+        (_b = (_a = this.processor) == null ? void 0 : _a.port) == null ? void 0 : _b.postMessage({
+          command: "end"
+        });
+      } catch (e) {
+      }
+      try {
+        (_c = this.audioCtx) == null ? void 0 : _c.suspend();
+      } catch (e) {
+      }
+    },
+    async startAudioCtx() {
+      if (!this.audioCtx) {
+        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        this.audioSource = this.audioCtx.createMediaElementSource(this.audio);
+        await this.audioCtx.audioWorklet.addModule("data:application/javascript," + encodeURIComponent(this.audioWorkletProcessor));
+        this.processor = new AudioWorkletNode(this.audioCtx, "tick");
+        this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
+        this.processor.port.onmessage = (event) => {
+          if (event.data.command === "tick") {
+            if (this.betweenPlaying) {
+              if (this.betweenStart && this.betweenEnd) {
+                if (this.debuglog) {
+                  console.log(this.audio.currentTime);
+                }
+                if (this.audio.currentTime >= this.betweenEnd) {
+                  this.pause();
+                }
+              }
+            }
+          }
+        };
+      } else {
+        this.audioCtx.resume();
+      }
+      this.processor.port.postMessage({
+        command: "start"
+      });
+    },
     pause() {
-      this.audio.pause();
+      this.pauseAudio();
       this.paused = true;
       this.betweenPlaying = false;
     },
-    play() {
-      this.audio.play();
+    async play() {
+      await this.playAudio();
       this.paused = false;
       this.betweenPlaying = false;
     },
+    pauseAudio() {
+      this.audio.pause();
+      this.suspendAudioCtx();
+    },
+    async playAudio() {
+      this.audio.playbackRate = this.speed;
+      await this.startAudioCtx();
+      this.audio.play();
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration);
@@ -211,18 +334,16 @@ const _sfc_main = {
         this.$refs.progressCurrent.style.width = MoveX + "px";
         this.$refs.progressBar.style.left = MoveX - this.$refs.progressBar.clientWidth / 2 + "px";
         this.paused = false;
-        if (this.betweenPlaying) {
-          if (this.betweenStart && this.betweenEnd) {
-            console.log(this.audio.currentTime, "this.audio.currentTime");
-            if (this.audio.currentTime >= this.betweenEnd) {
-              this.pause();
-            }
-          }
-        }
       }
     },
     betweenPlay() {
       if (!this.disabled) {
+        if (this.audio.duration === 0) {
+          Message.warning(this.unloadTip);
+          this.paused = true;
+          this.betweenPlaying = false;
+          return false;
+        }
         this.betweenPlaying = true;
         this.jumpToTime(this.betweenStart);
       }
@@ -230,7 +351,7 @@ const _sfc_main = {
     handleAudioEnded() {
       this.$refs.progressCurrent.style.width = this.$refs.progressContainer.clientWidth + "px";
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - this.$refs.progressBar.clientWidth / 2 + "px";
-      this.paused = true;
+      this.pause();
     },
     //点击进度条更新进度
     clickProgress(e) {
@@ -238,6 +359,7 @@ const _sfc_main = {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
         if (!this.audio.paused) {
@@ -259,10 +381,10 @@ const _sfc_main = {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
-        this.audio.play();
-        this.paused = false;
+        this.play();
       }
     },
     moveX(e) {
@@ -277,8 +399,9 @@ const _sfc_main = {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
-        this.audio.pause();
+        this.pauseAudio();
         this.paused = true;
+        this.betweenPlaying = false;
         const progressContainer = this.$refs.progressContainer;
         this.moveMin = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft;
         this.moveMax = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft + progressContainer.clientWidth;
@@ -316,17 +439,18 @@ const _sfc_main = {
     },
     jumpToTime(time) {
       if (!this.disabled) {
-        this.audio.pause();
+        this.pauseAudio();
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
           this.paused = true;
+          this.betweenPlaying = false;
           return false;
         }
         if (time >= this.audio.duration) {
           this.audio.currentTime = this.audio.duration;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
           if (time > this.audio.duration) {
             console.error(this.crossTimeTip);
           }
@@ -335,12 +459,12 @@ const _sfc_main = {
           this.audio.currentTime = time;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
         } else {
           this.audio.currentTime = 0;
           this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
-          this.audio.play();
+          this.playAudio();
         }
         this.$emit("jumpToTime", time);
       }
@@ -400,7 +524,7 @@ var _sfc_render = function render() {
       "timeupdate": _vm.updateTime,
       "ended": _vm.handleAudioEnded
     }
-  }), typeof _vm.jumpTime === "undefined" ? _vm._t("jump", function() {
+  }), _vm.showJumpTime ? _vm._t("jump", function() {
     return [_c("div", {
       staticClass: "nf-audio-fast"
     }, [_c("i", {

package/package/audio.html

@@ -0,0 +1,90 @@
+<!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(10, 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
+            }
+
+            handleMessage(event) {
+              const { command, start, end } = event.data;
+              if (command === 'start') {
+                this.end = false
+              } else if (command === 'end') {
+                this.end = true
+              }
+            }
+
+            process(inputs, outputs) {
+              this.port.postMessage({
+                command: 'tick'
+              });
+              const input = inputs[0];
+              const output = outputs[0];
+              for (let channel = 0; channel < input.length; ++channel) {
+                const inputChannel = input[channel];
+                const outputChannel = output[channel];
+                for (let i = 0; i < inputChannel.length; ++i) {
+                  outputChannel[i] = inputChannel[i];
+                }
+              }
+              return !this.end;
+            }
+          }
+          registerProcessor('tick', TickWorkletProcessor);
+          `
+  let ctx
+  let processor
+  let source
+
+  endAudioInSpecifiedRange = async () => {
+    myAudio.pause()
+    processor.port.postMessage({ command: 'end' });
+    ctx.suspend()
+  }
+
+  playAudioInSpecifiedRange = async (start, end) => {
+    if (!ctx) {
+      ctx = new (window.AudioContext || window.webkitAudioContext)();
+      await ctx.audioWorklet.addModule('data:application/javascript,' + encodeURIComponent(audioWorkletProcessor));
+      processor = new AudioWorkletNode(ctx, 'tick');
+      source = ctx.createMediaElementSource(myAudio);
+      source.connect(processor).connect(ctx.destination);
+      processor.port.onmessage = (event) => {
+        if (event.data.command === 'tick') {
+          if (myAudio.currentTime > end) {
+            myAudio.pause()
+            endAudioInSpecifiedRange()
+          }
+          console.log(myAudio.currentTime)
+        }
+      };
+    } else {
+      ctx.resume()
+    }
+    processor.port.postMessage({ command: 'start' });
+    myAudio.currentTime = start
+    await myAudio.play();
+  }
+});
+</script>
+
+</body>
+</html>

package/package/nf-audio.vue

@@ -16,7 +16,7 @@
     />
 
     <!--    跳帧 -->
-    <slot name="jump" v-if="typeof jumpTime === 'undefined'">
+    <slot name="jump" v-if="showJumpTime">
       <div class="nf-audio-fast">
         <i class="iconfont icon-zanting1 nf-audio-fast-icon"
            @click="locationToTime(jumpTime)"
@@ -166,6 +166,10 @@ import { timeFormat } from './util'
 export default {
   name: 'nf-audio',
   props: {
+    debuglog: {
+      type: Boolean,
+      default: false
+    },
     size: {
       type: String,
     },
@@ -212,6 +216,10 @@ export default {
       type: Number,
       default: 0
     },
+    showJumpTime: {
+      type: Boolean,
+      default: true
+    },
     // 快退秒数
     backSecond: {
       type: Number,
@@ -226,7 +234,7 @@ export default {
     multipleArray: {
       type: Array,
       default() {
-        return ['1.0', '1.25', '1.5', '1.75', '2.0', '2.5', '3.0', '3.5', '4.0']
+        return ['1.0', '1.25', '1.5', '1.75', '2.0', '2.5', '3.0', '3.5', '4.0', '10.0']
       }
     },
     // 默认速度
@@ -249,6 +257,45 @@ export default {
   },
   data() {
     return {
+      audioWorkletProcessor: `
+          class TickWorkletProcessor extends AudioWorkletProcessor {
+            constructor() {
+              super();
+              this.port.onmessage = this.handleMessage.bind(this);
+              this.end = true
+            }
+
+            handleMessage(event) {
+              const { command, start, end, currentTime } = event.data;
+              if (command === 'start') {
+                this.end = false
+              } else if (command === 'end') {
+                this.end = true
+              }
+            }
+
+            process(inputs, outputs) {
+              this.port.postMessage({
+                command: 'tick'
+              });
+              const input = inputs[0];
+              const output = outputs[0];
+              for (let channel = 0; channel < input.length; ++channel) {
+                const inputChannel = input[channel];
+                const outputChannel = output[channel];
+                for (let i = 0; i < inputChannel.length; ++i) {
+                  outputChannel[i] = inputChannel[i];
+                }
+              }
+              return !this.end;
+            }
+          }
+
+          registerProcessor('tick', TickWorkletProcessor);
+          `,
+      audioCtx: undefined,
+      audioSource: undefined,
+      processor: undefined,
       betweenPlaying: false,
       // 播放还是暂停
       paused: true,
@@ -283,6 +330,30 @@ export default {
     this.volumeValue = this.initVolumnValue * 100
     this.syncSpeed()
   },
+  beforeDestroy() {
+    this.betweenPlaying = false
+    try {
+      this.audioCtx?.close()
+    } catch (e) {
+    //
+    } finally {
+      this.audioCtx = undefined
+    }
+    try {
+      this.audioSource?.disconnect()
+    } catch (e) {
+      //
+    } finally {
+      this.audioSource = undefined
+    }
+    try {
+      this.processor?.port?.close()
+    } catch (e) {
+      //
+    } finally {
+      this.processor = undefined
+    }
+  },
   methods: {
     locationToTime(time) {
       this.betweenPlaying = false
@@ -338,8 +409,11 @@ export default {
       if (!this.disabled) {
         if (this.audio.readyState >= 2) {
           // 如果音频资源已加载元数据或更多，可以播放
-          this.audio.paused ? this.audio.play() : this.audio.pause()
-          this.audio.playbackRate = this.speed
+          if(this.audio.paused) {
+            this.playAudio()
+          } else {
+            this.pauseAudio()
+          }
           this.paused = !this.paused
           this.betweenPlaying = false
           this.$emit('pauseOrPlay', this.paused)
@@ -347,25 +421,72 @@ export default {
           console.log('Audio is not ready yet.')
           Message.warning(this.unloadTip)
           this.paused = true
+          this.betweenPlaying = false
         }
       }
     },
+    suspendAudioCtx() {
+      try {
+        this.processor?.port?.postMessage({ command: 'end' });
+      } catch (e) {
+        //
+      }
+      try {
+        this.audioCtx?.suspend()
+      } catch (e) {
+        //
+      }
+    },
+    async startAudioCtx() {
+      if (!this.audioCtx) {
+        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        this.audioSource = this.audioCtx.createMediaElementSource(this.audio);
+        await this.audioCtx.audioWorklet.addModule('data:application/javascript,' + encodeURIComponent(this.audioWorkletProcessor));
+        this.processor = new AudioWorkletNode(this.audioCtx, 'tick');
+        this.audioSource.connect(this.processor).connect(this.audioCtx.destination);
+        this.processor.port.onmessage = (event) => {
+          if (event.data.command === 'tick') {
+            if (this.betweenPlaying) {
+              if (this.betweenStart && this.betweenEnd) {
+                if (this.debuglog) {
+                  console.log(this.audio.currentTime)
+                }
+                if (this.audio.currentTime >= this.betweenEnd) {
+                  this.pause()
+                }
+              }
+            }
+          }
+        };
+      } else {
+        this.audioCtx.resume()
+      }
+      this.processor.port.postMessage({ command: 'start' });
+    },
     pause() {
-      this.audio.pause()
+      this.pauseAudio()
       this.paused = true
       this.betweenPlaying = false
     },
-    play() {
-      this.audio.play()
+    async play() {
+      await this.playAudio()
       this.paused = false
       this.betweenPlaying = false
     },
+    pauseAudio() {
+      this.audio.pause()
+      this.suspendAudioCtx()
+    },
+    async playAudio() {
+      this.audio.playbackRate = this.speed
+      await this.startAudioCtx()
+      this.audio.play()
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration)
       this.audio.volume = this.volume
     },
-
     //进度条发生变化时触发
     updateTime() {
       if (!this.$refs.progressContainer) return
@@ -378,18 +499,16 @@ export default {
         this.$refs.progressCurrent.style.width = MoveX + 'px'
         this.$refs.progressBar.style.left = MoveX - (this.$refs.progressBar.clientWidth / 2) + 'px'
         this.paused = false
-        if (this.betweenPlaying) {
-          if (this.betweenStart && this.betweenEnd) {
-            console.log(this.audio.currentTime, 'this.audio.currentTime')
-            if (this.audio.currentTime >= this.betweenEnd) {
-              this.pause()
-            }
-          }
-        }
       }
     },
     betweenPlay() {
       if (!this.disabled) {
+        if (this.audio.duration === 0) {
+          Message.warning(this.unloadTip)
+          this.paused = true
+          this.betweenPlaying = false
+          return false
+        }
         this.betweenPlaying = true
         this.jumpToTime(this.betweenStart)
       }
@@ -397,7 +516,7 @@ export default {
     handleAudioEnded() {
       this.$refs.progressCurrent.style.width = this.$refs.progressContainer.clientWidth + 'px'
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - (this.$refs.progressBar.clientWidth / 2) + 'px'
-      this.paused = true
+      this.pause()
     },
     //点击进度条更新进度
     clickProgress(e) {
@@ -405,6 +524,7 @@ export default {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
           this.paused = true
+          this.betweenPlaying = false
           return false
         }
         //如果不是正在移动 和 没有暂停播放就执行
@@ -430,10 +550,10 @@ export default {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
           this.paused = true
+          this.betweenPlaying = false
           return false
         }
-        this.audio.play()
-        this.paused = false
+        this.play()
       }
     },
     moveX(e) {
@@ -448,8 +568,9 @@ export default {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
-        this.audio.pause()
+        this.pauseAudio()
         this.paused = true
+        this.betweenPlaying = false
         const progressContainer = this.$refs.progressContainer
         //进度条 左 边距离页面左边的距离 移动最小值
         this.moveMin = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft
@@ -494,17 +615,18 @@ export default {
     },
     jumpToTime(time) {
       if (!this.disabled) {
-        this.audio.pause()
+        this.pauseAudio()
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
           this.paused = true
+          this.betweenPlaying = false
           return false
         }
         if (time >= this.audio.duration) {
           this.audio.currentTime = this.audio.duration
           this.currentTime = timeFormat(this.audio.currentTime)
           this.calcMoveX()
-          this.audio.play()
+          this.playAudio()
           if (time > this.audio.duration) {
             console.error(this.crossTimeTip)
           }
@@ -513,12 +635,12 @@ export default {
           this.audio.currentTime = time
           this.currentTime = timeFormat(this.audio.currentTime)
           this.calcMoveX()
-          this.audio.play()
+          this.playAudio()
         } else {
           this.audio.currentTime = 0
           this.currentTime = timeFormat(this.audio.currentTime)
           this.calcMoveX()
-          this.audio.play()
+          this.playAudio()
         }
         this.$emit('jumpToTime', time)
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-audio",
-  "version": "3.3.60",
+  "version": "3.3.62",
   "description": "> TODO: description",
   "keywords": [],
   "author": "liuxiangxiang <liuxiangxiang@94ai.com>",
@@ -14,7 +14,7 @@
     "url": "http://94ai.gitlab.com/zoujiahe/common-ui.git"
   },
   "dependencies": {
-    "@94ai/nf-theme-chalk": "^3.3.60",
+    "@94ai/nf-theme-chalk": "^3.3.62",
     "vue-demi": "^0.14.5"
   },
   "peerDependenciesMeta": {
@@ -30,5 +30,5 @@
   "types": "lib/index.d.ts",
   "main": "lib/nf-audio.cjs.js",
   "module": "lib/nf-audio.esm-bundler.js",
-  "gitHead": "29cda3344f971577a22be62897195114e3cdd761"
+  "gitHead": "eb66eba98360c212306e6c23a786e75bce214924"
 }