@94ai/nf-audio 3.3.67 → 3.3.69

package/lib/nf-audio.cjs.js

@@ -35,7 +35,7 @@ const _sfc_main = {
     },
     unloadTip: {
       type: String,
-      default: "音频还未加载完成"
+      default: "音频资源暂无法播放"
     },
     disabled: {
       type: Boolean,
@@ -373,7 +373,7 @@ const _sfc_main = {
     },
     betweenPlay() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;
@@ -388,10 +388,19 @@ const _sfc_main = {
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - this.$refs.progressBar.clientWidth / 2 + "px";
       this.pause();
     },
+    getOffsetX(ev) {
+      const e = ev || window.event;
+      const srcObj = e.target || e.srcElement;
+      if (e.offsetX) {
+        return e.offsetX;
+      }
+      const rect = srcObj.getBoundingClientRect();
+      return e.clientX - rect.left;
+    },
     //点击进度条更新进度
     clickProgress(e) {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           if (!this.paused) {
             nfMessage.Message.warning(this.unloadTip);
           }
@@ -399,8 +408,8 @@ const _sfc_main = {
           this.betweenPlaying = false;
           return false;
         }
-        this.updateProgress(e.offsetX);
-        this.$emit("updateProgress", e.offsetX);
+        this.updateProgress(this.getOffsetX(e));
+        this.$emit("updateProgress", this.getOffsetX(e));
       }
     },
     //更新进度
@@ -413,7 +422,7 @@ const _sfc_main = {
     //鼠标弹起
     handleMouseup() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;
@@ -434,12 +443,15 @@ const _sfc_main = {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
+        if (this.checkAudioEffectNull()) {
+          return;
+        }
         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;
+        this.moveMin = progressContainer.getBoundingClientRect().left;
+        this.moveMax = progressContainer.getBoundingClientRect().left + progressContainer.clientWidth;
         this.progressBarWidth = this.$refs.progressBar.clientWidth / 2;
         document.addEventListener("mousemove", this.moveX);
         document.addEventListener("mouseup", () => {
@@ -472,10 +484,13 @@ const _sfc_main = {
         this.$refs.progressBar.style.left = MoveX - this.$refs.progressBar.clientWidth / 2 + "px";
       }
     },
+    checkAudioEffectNull() {
+      return this.audio.duration === 0 || Number.isNaN(this.audio.duration);
+    },
     jumpToTime(time) {
       if (!this.disabled) {
         this.pauseAudio();
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           nfMessage.Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;

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

@@ -33,7 +33,7 @@ const _sfc_main = {
     },
     unloadTip: {
       type: String,
-      default: "音频还未加载完成"
+      default: "音频资源暂无法播放"
     },
     disabled: {
       type: Boolean,
@@ -371,7 +371,7 @@ const _sfc_main = {
     },
     betweenPlay() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;
@@ -386,10 +386,19 @@ const _sfc_main = {
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - this.$refs.progressBar.clientWidth / 2 + "px";
       this.pause();
     },
+    getOffsetX(ev) {
+      const e = ev || window.event;
+      const srcObj = e.target || e.srcElement;
+      if (e.offsetX) {
+        return e.offsetX;
+      }
+      const rect = srcObj.getBoundingClientRect();
+      return e.clientX - rect.left;
+    },
     //点击进度条更新进度
     clickProgress(e) {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           if (!this.paused) {
             Message.warning(this.unloadTip);
           }
@@ -397,8 +406,8 @@ const _sfc_main = {
           this.betweenPlaying = false;
           return false;
         }
-        this.updateProgress(e.offsetX);
-        this.$emit("updateProgress", e.offsetX);
+        this.updateProgress(this.getOffsetX(e));
+        this.$emit("updateProgress", this.getOffsetX(e));
       }
     },
     //更新进度
@@ -411,7 +420,7 @@ const _sfc_main = {
     //鼠标弹起
     handleMouseup() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;
@@ -432,12 +441,15 @@ const _sfc_main = {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
+        if (this.checkAudioEffectNull()) {
+          return;
+        }
         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;
+        this.moveMin = progressContainer.getBoundingClientRect().left;
+        this.moveMax = progressContainer.getBoundingClientRect().left + progressContainer.clientWidth;
         this.progressBarWidth = this.$refs.progressBar.clientWidth / 2;
         document.addEventListener("mousemove", this.moveX);
         document.addEventListener("mouseup", () => {
@@ -470,10 +482,13 @@ const _sfc_main = {
         this.$refs.progressBar.style.left = MoveX - this.$refs.progressBar.clientWidth / 2 + "px";
       }
     },
+    checkAudioEffectNull() {
+      return this.audio.duration === 0 || Number.isNaN(this.audio.duration);
+    },
     jumpToTime(time) {
       if (!this.disabled) {
         this.pauseAudio();
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip);
           this.paused = true;
           this.betweenPlaying = false;

package/package/nf-audio.vue

@@ -43,7 +43,7 @@
       </slot>
 
       <!--      快退-->
-      <slot name="fastBack" v-if="backSecond" >
+      <slot name="fastBack" v-if="backSecond">
         <el-tooltip class="nf-audio-pre"
                     placement="top"
                     :disabled="disabled"
@@ -173,7 +173,7 @@ export default {
       default: false
     },
     size: {
-      type: String,
+      type: String
     },
     speedDesc: {
       type: String,
@@ -193,7 +193,7 @@ export default {
     },
     unloadTip: {
       type: String,
-      default: '音频还未加载完成'
+      default: '音频资源暂无法播放'
     },
     disabled: {
       type: Boolean,
@@ -341,7 +341,7 @@ export default {
     try {
       this.audioCtx?.close()
     } catch (e) {
-    //
+      //
     } finally {
       this.audioCtx = undefined
     }
@@ -415,7 +415,7 @@ export default {
       if (!this.disabled) {
         if (this.audio.readyState >= 2) {
           // 如果音频资源已加载元数据或更多，可以播放
-          if(this.audio.paused) {
+          if (this.audio.paused) {
             this.playAudio()
           } else {
             this.pauseAudio()
@@ -433,7 +433,7 @@ export default {
     },
     suspendAudioCtx() {
       try {
-        this.processor?.port?.postMessage({ command: 'end' });
+        this.processor?.port?.postMessage({ command: 'end' })
       } catch (e) {
         //
       }
@@ -453,11 +453,11 @@ export default {
       if (this.isHighPrecision()) {
         try {
           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.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)
             if (this.processor?.port) {
               this.processor.port.onmessage = (event) => {
                 if (event.data.command === 'tick') {
@@ -472,15 +472,15 @@ export default {
                     }
                   }
                 }
-              };
+              }
             }
           } else {
             this.audioCtx.resume()
           }
-        } catch(e) {
+        } catch (e) {
           console.log(e)
         }
-        this.processor.port.postMessage({ command: 'start' });
+        this.processor.port.postMessage({ command: 'start' })
       }
     },
     pause() {
@@ -537,7 +537,7 @@ export default {
     },
     betweenPlay() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip)
           this.paused = true
           this.betweenPlaying = false
@@ -552,10 +552,19 @@ export default {
       this.$refs.progressBar.style.left = this.$refs.progressContainer.clientWidth - (this.$refs.progressBar.clientWidth / 2) + 'px'
       this.pause()
     },
+    getOffsetX(ev) {
+      const e = ev || window.event
+      const srcObj = e.target || e.srcElement
+      if (e.offsetX) {
+        return e.offsetX
+      }
+      const rect = srcObj.getBoundingClientRect()
+      return e.clientX - rect.left
+    },
     //点击进度条更新进度
     clickProgress(e) {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           if (!this.paused) {
             Message.warning(this.unloadTip)
           }
@@ -563,8 +572,8 @@ export default {
           this.betweenPlaying = false
           return false
         }
-        this.updateProgress(e.offsetX)
-        this.$emit('updateProgress', e.offsetX)
+        this.updateProgress(this.getOffsetX(e))
+        this.$emit('updateProgress', this.getOffsetX(e))
       }
     },
     //更新进度
@@ -580,7 +589,7 @@ export default {
     //鼠标弹起
     handleMouseup() {
       if (!this.disabled) {
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip)
           this.paused = true
           this.betweenPlaying = false
@@ -601,14 +610,17 @@ export default {
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
+        if (this.checkAudioEffectNull()) {
+          return
+        }
         this.pauseAudio()
         this.paused = true
         this.betweenPlaying = false
         const progressContainer = this.$refs.progressContainer
         //进度条 左 边距离页面左边的距离 移动最小值
-        this.moveMin = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft
+        this.moveMin = progressContainer.getBoundingClientRect().left
         //进度条 右 边距离页面左边的距离 移动最大值
-        this.moveMax = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft + progressContainer.clientWidth
+        this.moveMax = progressContainer.getBoundingClientRect().left + progressContainer.clientWidth
         //progressBar的宽度
         this.progressBarWidth = (this.$refs.progressBar.clientWidth / 2)
         //获取当前鼠标的位置 X
@@ -646,10 +658,13 @@ export default {
         this.$refs.progressBar.style.left = MoveX - (this.$refs.progressBar.clientWidth / 2) + 'px'
       }
     },
+    checkAudioEffectNull() {
+      return this.audio.duration === 0 || Number.isNaN(this.audio.duration)
+    },
     jumpToTime(time) {
       if (!this.disabled) {
         this.pauseAudio()
-        if (this.audio.duration === 0 || Number.isNaN(this.audio.duration)) {
+        if (this.checkAudioEffectNull()) {
           Message.warning(this.unloadTip)
           this.paused = true
           this.betweenPlaying = false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-audio",
-  "version": "3.3.67",
+  "version": "3.3.69",
   "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.67",
+    "@94ai/nf-theme-chalk": "^3.3.69",
     "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": "2c752dc6246ba8252562937829c091ae21cca8f2"
+  "gitHead": "e681a4e9428cd1c1d6ce91e4cf863c4cea49c7d2"
 }