@94ai/nf-audio 3.3.55 → 3.3.59

package/lib/nf-audio.cjs.js

@@ -81,10 +81,19 @@ const _sfc_main = {
     initVolumnValue: {
       type: Number,
       default: 0.8
+    },
+    betweenStart: {
+      type: Number,
+      default: 0
+    },
+    betweenEnd: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
+      betweenPlaying: false,
       // 播放还是暂停
       paused: true,
       moveMin: 0,
@@ -110,11 +119,20 @@ const _sfc_main = {
     }
   },
   mounted() {
-    this.speed = this.initSpeedValue;
     this.volume = this.initVolumnValue;
     this.volumeValue = this.initVolumnValue * 100;
+    this.syncSpeed();
   },
   methods: {
+    locationToTime(time) {
+      this.betweenPlaying = false;
+      this.jumpToTime(time);
+    },
+    syncSpeed() {
+      if (this.speed != this.initSpeedValue) {
+        this.speed = this.initSpeedValue;
+      }
+    },
     docClick(e) {
       if (this.$refs.popperRef.contains(e.target) || this.$refs.reference.contains(e.target)) {
         return;
@@ -130,9 +148,13 @@ const _sfc_main = {
     handleBack() {
       if (this.audio.currentTime - this.backSecond <= 0) {
         this.jumpToTime(0);
+        this.betweenPlaying = false;
+        this.$emit("back", 0);
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.currentTime - this.backSecond);
+          this.betweenPlaying = false;
+          this.$emit("back", this.audio.currentTime - this.backSecond);
         }
       }
     },
@@ -140,9 +162,13 @@ const _sfc_main = {
     handleForward() {
       if (this.audio.currentTime + this.forwardSecond <= this.audio.duration) {
         this.jumpToTime(this.audio.currentTime + this.forwardSecond);
+        this.betweenPlaying = false;
+        this.$emit("forward", this.audio.currentTime + this.forwardSecond);
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.duration);
+          this.betweenPlaying = false;
+          this.$emit("forward", this.audio.duration);
         }
       }
     },
@@ -153,12 +179,25 @@ const _sfc_main = {
           this.audio.paused ? this.audio.play() : this.audio.pause();
           this.audio.playbackRate = this.speed;
           this.paused = !this.paused;
+          this.betweenPlaying = false;
+          this.$emit("pauseOrPlay", this.paused);
         } else {
           console.log("Audio is not ready yet.");
           nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
         }
       }
     },
+    pause() {
+      this.audio.pause();
+      this.paused = true;
+      this.betweenPlaying = false;
+    },
+    play() {
+      this.audio.play();
+      this.paused = false;
+      this.betweenPlaying = false;
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration);
@@ -174,6 +213,20 @@ 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) {
+        this.betweenPlaying = true;
+        this.jumpToTime(this.betweenStart);
       }
     },
     handleAudioEnded() {
@@ -186,10 +239,12 @@ const _sfc_main = {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         if (!this.audio.paused) {
           this.updateProgress(e.offsetX);
+          this.$emit("updateProgress", e.offsetX);
         }
       }
     },
@@ -205,6 +260,7 @@ const _sfc_main = {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         this.audio.play();
@@ -265,6 +321,7 @@ const _sfc_main = {
         this.audio.pause();
         if (this.audio.duration === 0) {
           nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         if (time >= this.audio.duration) {
@@ -287,13 +344,16 @@ const _sfc_main = {
           this.calcMoveX();
           this.audio.play();
         }
+        this.$emit("jumpToTime", time);
       }
     }
   },
   watch: {
     initSpeedValue: {
       handle() {
-        this.speed = this.initSpeedValue;
+        if (this.speed != this.initSpeedValue) {
+          this.speed = this.initSpeedValue;
+        }
       }
     },
     initVolumnValue: {
@@ -342,14 +402,14 @@ var _sfc_render = function render() {
       "timeupdate": _vm.updateTime,
       "ended": _vm.handleAudioEnded
     }
-  }), _vm.jumpTime ? _vm._t("jump", function() {
+  }), typeof _vm.jumpTime === "undefined" ? _vm._t("jump", function() {
     return [_c("div", {
       staticClass: "nf-audio-fast"
     }, [_c("i", {
       staticClass: "iconfont icon-zanting1 nf-audio-fast-icon",
       on: {
         "click": function($event) {
-          return _vm.jumpToTime(_vm.jumpTime);
+          return _vm.locationToTime(_vm.jumpTime);
         }
       }
     })])];
@@ -549,7 +609,7 @@ var _sfc_render = function render() {
           return _c("div", {
             key: index,
             staticClass: "nf-audio-btn-item",
-            class: _vm.speed === item ? "active" : "",
+            class: _vm.speed == item ? "active" : "",
             on: {
               "click": function($event) {
                 return _vm.changeSpeed(item);

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

@@ -79,10 +79,19 @@ const _sfc_main = {
     initVolumnValue: {
       type: Number,
       default: 0.8
+    },
+    betweenStart: {
+      type: Number,
+      default: 0
+    },
+    betweenEnd: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
+      betweenPlaying: false,
       // 播放还是暂停
       paused: true,
       moveMin: 0,
@@ -108,11 +117,20 @@ const _sfc_main = {
     }
   },
   mounted() {
-    this.speed = this.initSpeedValue;
     this.volume = this.initVolumnValue;
     this.volumeValue = this.initVolumnValue * 100;
+    this.syncSpeed();
   },
   methods: {
+    locationToTime(time) {
+      this.betweenPlaying = false;
+      this.jumpToTime(time);
+    },
+    syncSpeed() {
+      if (this.speed != this.initSpeedValue) {
+        this.speed = this.initSpeedValue;
+      }
+    },
     docClick(e) {
       if (this.$refs.popperRef.contains(e.target) || this.$refs.reference.contains(e.target)) {
         return;
@@ -128,9 +146,13 @@ const _sfc_main = {
     handleBack() {
       if (this.audio.currentTime - this.backSecond <= 0) {
         this.jumpToTime(0);
+        this.betweenPlaying = false;
+        this.$emit("back", 0);
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.currentTime - this.backSecond);
+          this.betweenPlaying = false;
+          this.$emit("back", this.audio.currentTime - this.backSecond);
         }
       }
     },
@@ -138,9 +160,13 @@ const _sfc_main = {
     handleForward() {
       if (this.audio.currentTime + this.forwardSecond <= this.audio.duration) {
         this.jumpToTime(this.audio.currentTime + this.forwardSecond);
+        this.betweenPlaying = false;
+        this.$emit("forward", this.audio.currentTime + this.forwardSecond);
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.duration);
+          this.betweenPlaying = false;
+          this.$emit("forward", this.audio.duration);
         }
       }
     },
@@ -151,12 +177,25 @@ const _sfc_main = {
           this.audio.paused ? this.audio.play() : this.audio.pause();
           this.audio.playbackRate = this.speed;
           this.paused = !this.paused;
+          this.betweenPlaying = false;
+          this.$emit("pauseOrPlay", this.paused);
         } else {
           console.log("Audio is not ready yet.");
           Message.warning(this.unloadTip);
+          this.paused = true;
         }
       }
     },
+    pause() {
+      this.audio.pause();
+      this.paused = true;
+      this.betweenPlaying = false;
+    },
+    play() {
+      this.audio.play();
+      this.paused = false;
+      this.betweenPlaying = false;
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration);
@@ -172,6 +211,20 @@ 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) {
+        this.betweenPlaying = true;
+        this.jumpToTime(this.betweenStart);
       }
     },
     handleAudioEnded() {
@@ -184,10 +237,12 @@ const _sfc_main = {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         if (!this.audio.paused) {
           this.updateProgress(e.offsetX);
+          this.$emit("updateProgress", e.offsetX);
         }
       }
     },
@@ -203,6 +258,7 @@ const _sfc_main = {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         this.audio.play();
@@ -263,6 +319,7 @@ const _sfc_main = {
         this.audio.pause();
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
         if (time >= this.audio.duration) {
@@ -285,13 +342,16 @@ const _sfc_main = {
           this.calcMoveX();
           this.audio.play();
         }
+        this.$emit("jumpToTime", time);
       }
     }
   },
   watch: {
     initSpeedValue: {
       handle() {
-        this.speed = this.initSpeedValue;
+        if (this.speed != this.initSpeedValue) {
+          this.speed = this.initSpeedValue;
+        }
       }
     },
     initVolumnValue: {
@@ -340,14 +400,14 @@ var _sfc_render = function render() {
       "timeupdate": _vm.updateTime,
       "ended": _vm.handleAudioEnded
     }
-  }), _vm.jumpTime ? _vm._t("jump", function() {
+  }), typeof _vm.jumpTime === "undefined" ? _vm._t("jump", function() {
     return [_c("div", {
       staticClass: "nf-audio-fast"
     }, [_c("i", {
       staticClass: "iconfont icon-zanting1 nf-audio-fast-icon",
       on: {
         "click": function($event) {
-          return _vm.jumpToTime(_vm.jumpTime);
+          return _vm.locationToTime(_vm.jumpTime);
         }
       }
     })])];
@@ -547,7 +607,7 @@ var _sfc_render = function render() {
           return _c("div", {
             key: index,
             staticClass: "nf-audio-btn-item",
-            class: _vm.speed === item ? "active" : "",
+            class: _vm.speed == item ? "active" : "",
             on: {
               "click": function($event) {
                 return _vm.changeSpeed(item);

package/package/nf-audio.vue

@@ -16,10 +16,10 @@
     />
 
     <!--    跳帧 -->
-    <slot name="jump" v-if="jumpTime">
+    <slot name="jump" v-if="typeof jumpTime === 'undefined'">
       <div class="nf-audio-fast">
         <i class="iconfont icon-zanting1 nf-audio-fast-icon"
-           @click="jumpToTime(jumpTime)"
+           @click="locationToTime(jumpTime)"
         />
       </div>
     </slot>
@@ -136,7 +136,7 @@
                       <div v-for="(item,index) in multipleArray"
                            :key="index"
                            class="nf-audio-btn-item"
-                           :class="speed===item?'active':''"
+                           :class="speed==item?'active':''"
                            @click="changeSpeed(item)"
                       >
                         {{ speedPreDesc }}{{ item }}
@@ -237,10 +237,19 @@ export default {
     initVolumnValue: {
       type: Number,
       default: 0.8
+    },
+    betweenStart: {
+      type: Number,
+      default: 0
+    },
+    betweenEnd: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
+      betweenPlaying: false,
       // 播放还是暂停
       paused: true,
       moveMin: 0,
@@ -270,11 +279,20 @@ export default {
     }
   },
   mounted() {
-    this.speed = this.initSpeedValue
     this.volume = this.initVolumnValue
     this.volumeValue = this.initVolumnValue * 100
+    this.syncSpeed()
   },
   methods: {
+    locationToTime(time) {
+      this.betweenPlaying = false
+      this.jumpToTime(time)
+    },
+    syncSpeed() {
+      if (this.speed != this.initSpeedValue) {
+        this.speed = this.initSpeedValue
+      }
+    },
     docClick(e) {
       //如果点击的是音量 或者 是音量面板 则 不隐藏音量面板
       if (this.$refs.popperRef.contains(e.target) || this.$refs.reference.contains(e.target)) {
@@ -291,9 +309,13 @@ export default {
     handleBack() {
       if (this.audio.currentTime - this.backSecond <= 0) {
         this.jumpToTime(0)
+        this.betweenPlaying = false
+        this.$emit('back', 0)
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.currentTime - this.backSecond)
+          this.betweenPlaying = false
+          this.$emit('back', this.audio.currentTime - this.backSecond)
         }
       }
     },
@@ -301,9 +323,13 @@ export default {
     handleForward() {
       if (this.audio.currentTime + this.forwardSecond <= this.audio.duration) {
         this.jumpToTime(this.audio.currentTime + this.forwardSecond)
+        this.betweenPlaying = false
+        this.$emit('forward', this.audio.currentTime + this.forwardSecond)
       } else {
         if (this.audio.currentTime < this.audio.duration) {
           this.jumpToTime(this.audio.duration)
+          this.betweenPlaying = false
+          this.$emit('forward', this.audio.duration)
         }
       }
     },
@@ -315,12 +341,25 @@ export default {
           this.audio.paused ? this.audio.play() : this.audio.pause()
           this.audio.playbackRate = this.speed
           this.paused = !this.paused
+          this.betweenPlaying = false
+          this.$emit('pauseOrPlay', this.paused)
         } else {
           console.log('Audio is not ready yet.')
           Message.warning(this.unloadTip)
+          this.paused = true
         }
       }
     },
+    pause() {
+      this.audio.pause()
+      this.paused = true
+      this.betweenPlaying = false
+    },
+    play() {
+      this.audio.play()
+      this.paused = false
+      this.betweenPlaying = false
+    },
     //视频在可以播放时触发
     getDuration() {
       this.totalTime = timeFormat(this.audio.duration)
@@ -330,15 +369,29 @@ export default {
     //进度条发生变化时触发
     updateTime() {
       if (!this.$refs.progressContainer) return
+      // 设置当前时间
       this.currentTime = timeFormat(this.audio.currentTime)
-      //如果不是正在移动 和 没有暂停播放就执行
+
       if (!this.audio.paused) {
-        // 设置当前时间
         let MoveX = this.$refs.progressContainer.clientWidth * (this.audio.currentTime / this.audio.duration)
-        //播放时更新距离
+        // 播放时更新距离
         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) {
+        this.betweenPlaying = true
+        this.jumpToTime(this.betweenStart)
       }
     },
     handleAudioEnded() {
@@ -351,11 +404,13 @@ export default {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
+          this.paused = true
           return false
         }
         //如果不是正在移动 和 没有暂停播放就执行
         if (!this.audio.paused) {
           this.updateProgress(e.offsetX)
+          this.$emit('updateProgress', e.offsetX)
         }
       }
     },
@@ -374,6 +429,7 @@ export default {
       if (!this.disabled) {
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
+          this.paused = true
           return false
         }
         this.audio.play()
@@ -441,6 +497,7 @@ export default {
         this.audio.pause()
         if (this.audio.duration === 0) {
           Message.warning(this.unloadTip)
+          this.paused = true
           return false
         }
         if (time >= this.audio.duration) {
@@ -463,13 +520,16 @@ export default {
           this.calcMoveX()
           this.audio.play()
         }
+        this.$emit('jumpToTime', time)
       }
     }
   },
   watch: {
     initSpeedValue: {
       handle() {
-        this.speed = this.initSpeedValue
+        if (this.speed != this.initSpeedValue) {
+          this.speed = this.initSpeedValue
+        }
       }
     },
     initVolumnValue: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-audio",
-  "version": "3.3.55",
+  "version": "3.3.59",
   "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.55",
+    "@94ai/nf-theme-chalk": "^3.3.59",
     "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": "cc3f63b52b5840e0550cd66ec9264185a77012f2"
+  "gitHead": "9cd2d16299eb3af079f18087e46bccea92df39f6"
 }