@94ai/nf-audio 3.3.53 → 3.3.59

package/lib/nf-audio.cjs.js

@@ -1,221 +1,175 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vueDemi = require("vue-demi");
-const vue2RuntimeHelpers = require("@94ai/vue2-runtime-helpers");
 const nfMessage = require("@94ai/nf-message");
-const __sfc_main = {};
-__sfc_main.props = {
-  visible: [Boolean, String],
-  disabled: [Boolean]
-};
-__sfc_main.setup = (__props, __ctx) => {
-  const emits = __ctx.emit;
-  const props = __props;
-  const reference = vueDemi.ref();
-  const popperRef = vueDemi.ref();
-  vueDemi.watch(() => props.visible, (newValue) => {
-    if (newValue) {
-      window.addEventListener("mousedown", docClick);
-    } else {
-      window.removeEventListener("mousedown", docClick);
-    }
-  });
-  function docClick(e) {
-    if (popperRef.value.contains(e.target) || reference.value.contains(e.target)) {
-      return;
-    }
-    emits("update:visible", false);
-  }
-  function showPopper() {
-    if (!props.disabled) {
-      emits("update:visible", true);
-    }
-  }
-  vueDemi.onUnmounted(() => {
-    emits("update:visible", false);
-  });
-  return Object.assign({
-    reference,
-    popperRef,
-    showPopper
-  }, {
-    showPopper
-  });
-};
-const _sfc_main$2 = __sfc_main;
-var _sfc_render$2 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  _vm._self._setupProxy;
-  return _c("div", {
-    staticClass: "nf-volume-tool",
-    class: _vm.visible ? "nf-tool-show" : "nf-tool-hide",
-    on: {
-      "click": _vm.showPopper
-    }
-  }, [_c("div", {
-    ref: "reference"
-  }, [_vm._t("reference")], 2), _c("transition", {
-    attrs: {
-      "name": "slide-fade"
-    }
-  }, [_c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.visible,
-      expression: "visible"
-    }],
-    ref: "popperRef",
-    staticClass: "nf-popper"
-  }, [_vm._t("default")], 2)])], 1);
-};
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ vue2RuntimeHelpers.normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
-const volumeTool = __component__$2.exports;
-const _sfc_main$1 = {
-  name: "more-btn",
-  components: {},
+const vue2RuntimeHelpers = require("@94ai/vue2-runtime-helpers");
+function timeFormat(value) {
+  const minute = parseInt(String(value / 60));
+  const second = parseInt(String(value % 60));
+  return (minute >= 10 ? minute : "0" + minute) + ":" + (second >= 10 ? second : "0" + second);
+}
+const _sfc_main = {
+  name: "nf-audio",
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      multipleArray: ["1.0", "1.25", "1.5", "1.75", "2.0"],
-      speed: ""
-    };
-  },
-  mounted() {
-  },
-  methods: {
-    handleDown() {
-      this.$emit("down");
+    size: {
+      type: String
     },
-    handleSpeed(speed) {
-      this.speed = speed;
-      this.$emit("speed", speed);
-    }
-  }
-};
-var _sfc_render$1 = function render2() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "more-btn-box"
-  }, [_c("el-popover", {
-    attrs: {
-      "placement": "right",
-      "popper-class": "audio-popover",
-      "disabled": _vm.disabled
-    }
-  }, [_c("div", {
-    staticClass: "audio-btn-list"
-  }, [_c("el-popover", {
-    attrs: {
-      "placement": "right",
-      "popper-class": "audio-popover"
-    }
-  }, [_c("div", {
-    staticClass: "audio-btn-list"
-  }, _vm._l(_vm.multipleArray, function(item, index) {
-    return _c("div", {
-      key: index,
-      staticClass: "btn-item",
-      class: _vm.speed === item ? "active" : "",
-      on: {
-        "click": function($event) {
-          return _vm.handleSpeed(item);
-        }
-      }
-    }, [_vm._v("x " + _vm._s(item))]);
-  }), 0), _c("div", {
-    staticClass: "btn-item",
-    attrs: {
-      "slot": "reference"
+    speedDesc: {
+      type: String,
+      default: "倍速"
     },
-    slot: "reference"
-  }, [_vm._v("倍速")])]), _c("div", {
-    staticClass: "btn-item",
-    on: {
-      "click": _vm.handleDown
-    }
-  }, [_vm._v("下载")])], 1), _c("div", {
-    staticClass: "more-icon",
-    attrs: {
-      "slot": "reference"
+    downloadDesc: {
+      type: String,
+      default: "下载"
+    },
+    speedPreDesc: {
+      type: String,
+      default: "x "
+    },
+    crossTimeTip: {
+      type: String,
+      default: "开始时间不能大于总时长"
+    },
+    unloadTip: {
+      type: String,
+      default: "音频还未加载完成"
     },
-    slot: "reference"
-  }, [_c("i", {
-    staticClass: "iconfont icon-gengduo1 more-btn"
-  })])])], 1);
-};
-var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ vue2RuntimeHelpers.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
-const moreBtn = __component__$1.exports;
-const _sfc_main = {
-  name: "nf-audio",
-  components: {
-    volumeTool,
-    moreBtn
-  },
-  props: {
     disabled: {
       type: Boolean,
       default: false
     },
-    showMoreBtn: {
+    background: {
       type: Boolean,
       default: true
     },
-    showJumpToTime: {
+    // 音频地址
+    src: {
+      type: String,
+      default: ""
+    },
+    // 更多功能
+    showMoreBtn: {
       type: Boolean,
       default: true
     },
-    audioSrc: {
-      type: String,
-      default: ""
+    // 跳转时间
+    jumpTime: {
+      type: Number,
+      default: 0
     },
+    // 快退秒数
     backSecond: {
       type: Number,
-      default: 3
+      default: 0
     },
+    // 快进秒数
     forwardSecond: {
       type: Number,
-      default: 10
+      default: 0
+    },
+    // 速度调整
+    multipleArray: {
+      type: Array,
+      default() {
+        return ["1.0", "1.25", "1.5", "1.75", "2.0", "2.5", "3.0", "3.5", "4.0"];
+      }
+    },
+    // 默认速度
+    initSpeedValue: {
+      type: Number,
+      default: 1
+    },
+    initVolumnValue: {
+      type: Number,
+      default: 0.8
+    },
+    betweenStart: {
+      type: Number,
+      default: 0
     },
-    startTime: {
+    betweenEnd: {
       type: Number,
       default: 0
     }
   },
   data() {
     return {
-      duration: "00:00",
-      currentDuration: "00:00",
-      audio: "",
-      volume: 0.8,
+      betweenPlaying: false,
+      // 播放还是暂停
       paused: true,
-      showVolumePanel: false,
-      volumeVisible: false,
+      moveMin: 0,
+      moveMax: 0,
+      progressBarWidth: 0,
+      // 总播放时间
+      totalTime: "00:00",
+      // 当前播放时间
+      currentTime: "00:00",
+      // 调整播放音量比例
       volumeValue: 80,
+      // 音量
+      volume: 0.8,
+      // 音量调节面板
+      volumeVisible: false,
+      // 播放速度
       speed: 1
     };
   },
+  computed: {
+    audio() {
+      return this.$refs.audio;
+    }
+  },
   mounted() {
-    this.audio = this.$refs.audio;
+    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;
+      }
+      this.volumeVisible = false;
+    },
+    showPopper() {
+      if (!this.disabled) {
+        this.volumeVisible = !this.volumeVisible;
+      }
+    },
     //后退
     handleBack() {
-      if (this.audio.currentTime > this.backSecond) {
-        this.audio.currentTime = this.audio.currentTime - this.backSecond;
+      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);
+        }
       }
     },
     //前进
     handleForward() {
-      if (this.audio.duration - this.audio.currentTime > this.forwardSecond) {
-        this.audio.currentTime = this.audio.currentTime + 10;
+      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);
+        }
       }
     },
     //暂停或播放
@@ -225,168 +179,210 @@ 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("音频还未加载完成");
+          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.duration = this.timeFormat(this.$refs.audio.duration);
+      this.totalTime = timeFormat(this.audio.duration);
       this.audio.volume = this.volume;
     },
-    //将单位为秒的的时间转换成mm:ss的形式
-    timeFormat(number) {
-      let minute = parseInt(number / 60);
-      let second = parseInt(number % 60);
-      minute = minute >= 10 ? minute : "0" + minute;
-      second = second >= 10 ? second : "0" + second;
-      return minute + ":" + second;
-    },
     //进度条发生变化时触发
     updateTime() {
-      if (!this.$refs.progress)
+      if (!this.$refs.progressContainer)
         return;
-      this.currentDuration = this.timeFormat(this.audio.currentTime);
+      this.currentTime = timeFormat(this.audio.currentTime);
       if (!this.audio.paused) {
-        let MoveX = this.$refs.progress.clientWidth * (this.audio.currentTime / this.audio.duration);
-        this.$refs.currentProgress.style.width = MoveX + "px";
-        this.$refs.circle.style.left = MoveX - this.$refs.circle.clientWidth / 2 + "px";
+        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() {
-      console.log("音频播放完毕！");
+      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;
     },
     //点击进度条更新进度
     clickProgress(e) {
       if (!this.disabled) {
-        if (this.duration === "00:00") {
-          nfMessage.Message.warning("音频还未加载完成");
+        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);
         }
       }
     },
     //更新进度
     updateProgress(MoveX) {
-      let clickProgress = MoveX / this.$refs.progress.clientWidth;
+      const clickProgress = MoveX / this.$refs.progressContainer.clientWidth;
       this.audio.currentTime = this.audio.duration * clickProgress;
-      this.$refs.currentProgress.style.width = MoveX + "px";
-      this.$refs.circle.style.left = MoveX - this.$refs.circle.clientWidth / 2 + "px";
+      this.$refs.progressCurrent.style.width = MoveX + "px";
+      this.$refs.progressBar.style.left = MoveX - this.$refs.progressBar.clientWidth / 2 + "px";
     },
     //鼠标弹起
     handleMouseup() {
       if (!this.disabled) {
-        if (this.duration === "00:00") {
-          nfMessage.Message.warning("音频还未加载完成");
+        if (this.audio.duration === 0) {
+          nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
-        const timer = setTimeout(() => {
-          this.audio.play();
-          this.paused = false;
-          clearTimeout(timer);
-        }, 200);
-        this.$once("hook:beforeDestroy", () => {
-          clearTimeout(timer);
-        });
+        this.audio.play();
+        this.paused = false;
       }
     },
+    moveX(e) {
+      if (e.pageX >= this.moveMax) {
+        return;
+      } else if (e.pageX <= this.moveMin) {
+        return;
+      }
+      this.$refs.progressBar.style.left = e.pageX - this.moveMin - this.progressBarWidth + "px";
+      this.updateProgress(e.pageX - this.moveMin);
+    },
     //调整进度
     handleMousedown() {
       if (!this.disabled) {
         this.audio.pause();
         this.paused = true;
-        let progress = this.$refs.progress;
-        let moveMin = progress.offsetParent.offsetLeft + progress.offsetLeft;
-        let moveMax = progress.offsetParent.offsetLeft + progress.offsetLeft + progress.clientWidth;
-        let circleWidth = this.$refs.circle.clientWidth / 2;
-        let moveX = (e) => {
-          if (e.pageX >= moveMax) {
-            return;
-          } else if (e.pageX <= moveMin) {
-            return;
-          }
-          this.$refs.circle.style.left = e.pageX - moveMin - circleWidth + "px";
-          this.updateProgress(e.pageX - moveMin);
-        };
-        document.addEventListener("mousemove", moveX);
+        const progressContainer = this.$refs.progressContainer;
+        this.moveMin = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft;
+        this.moveMax = progressContainer.offsetParent.offsetLeft + progressContainer.offsetLeft + progressContainer.clientWidth;
+        this.progressBarWidth = this.$refs.progressBar.clientWidth / 2;
+        document.addEventListener("mousemove", this.moveX);
         document.addEventListener("mouseup", () => {
-          document.removeEventListener("mousemove", moveX);
+          document.removeEventListener("mousemove", this.moveX);
         });
       }
     },
-    rangeVolume(val) {
-      console.log(val);
+    volumeChange(val) {
+      this.$emit("volumeChange", val);
     },
     /** 设置倍速播放 */
-    changeSpeed(command) {
+    changeSpeed(speed) {
       if (!this.disabled) {
-        const audioPlayer = this.$refs.audio;
-        if (audioPlayer) {
-          audioPlayer.playbackRate = command;
+        if (this.audio) {
+          this.audio.playbackRate = speed;
         }
-        this.speed = command;
+        this.speed = speed;
+        this.$emit("speedChange", speed);
       }
     },
-    downRecord() {
+    downRecord(e) {
       if (!this.disabled) {
-        this.$emit("downloadCallback");
+        this.$emit("download", e);
       }
     },
     calcMoveX() {
       if (!this.audio.paused) {
-        let MoveX = this.$refs.progress.clientWidth * (this.audio.currentTime / this.audio.duration);
-        this.$refs.currentProgress.style.width = MoveX + "px";
-        this.$refs.circle.style.left = MoveX - this.$refs.circle.clientWidth / 2 + "px";
+        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";
       }
     },
-    jumpToTime() {
+    jumpToTime(time) {
       if (!this.disabled) {
         this.audio.pause();
-        const formatStartT = this.timeFormat(this.startTime);
-        if (this.duration === "00:00") {
-          nfMessage.Message.warning("音频还未加载完成");
+        if (this.audio.duration === 0) {
+          nfMessage.Message.warning(this.unloadTip);
+          this.paused = true;
           return false;
         }
-        if (formatStartT >= this.duration) {
-          this.audio.currentTime = this.duration;
-          this.currentDuration = this.timeFormat(this.audio.currentTime);
+        if (time >= this.audio.duration) {
+          this.audio.currentTime = this.audio.duration;
+          this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
           this.audio.play();
-          console.error("开始时间不能大于总时长");
+          if (time > this.audio.duration) {
+            console.error(this.crossTimeTip);
+          }
           return false;
-        } else if (formatStartT >= "00:00" && formatStartT < this.duration) {
-          this.audio.currentTime = this.startTime;
-          this.currentDuration = this.timeFormat(this.audio.currentTime);
+        } else if (time >= 0 && time < this.audio.duration) {
+          this.audio.currentTime = time;
+          this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
           this.audio.play();
         } else {
           this.audio.currentTime = 0;
-          this.currentDuration = this.timeFormat(this.audio.currentTime);
+          this.currentTime = timeFormat(this.audio.currentTime);
           this.calcMoveX();
           this.audio.play();
         }
+        this.$emit("jumpToTime", time);
       }
     }
   },
   watch: {
+    initSpeedValue: {
+      handle() {
+        if (this.speed != this.initSpeedValue) {
+          this.speed = this.initSpeedValue;
+        }
+      }
+    },
+    initVolumnValue: {
+      handle() {
+        this.volume = this.initVolumnValue;
+        this.volumeValue = this.initVolumnValue * 100;
+      }
+    },
+    volumeVisible(val) {
+      if (val) {
+        window.addEventListener("mousedown", this.docClick);
+      } else {
+        window.removeEventListener("mousedown", this.docClick);
+      }
+    },
     volumeValue(val) {
       this.volume = val / 100;
       this.audio.volume = val / 100;
     }
   }
 };
-var _sfc_render = function render3() {
+var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", {
-    staticClass: "nf-audio-strip",
+    staticClass: "nf-audio",
     class: {
-      disabled: _vm.disabled
+      disabled: _vm.disabled,
+      [_vm.size]: true,
+      background: _vm.background
     }
   }, [_c("audio", {
     directives: [{
@@ -399,120 +395,252 @@ var _sfc_render = function render3() {
     attrs: {
       "controls": "",
       "crossOrigin": "anonymous",
-      "src": _vm.audioSrc
+      "src": _vm.src
     },
     on: {
       "canplay": _vm.getDuration,
       "timeupdate": _vm.updateTime,
       "ended": _vm.handleAudioEnded
     }
-  }), _vm.showJumpToTime ? _c("div", {
-    staticClass: "nf-fast"
-  }, [_c("i", {
-    staticClass: "iconfont icon-zanting1 nf-fast-icon",
-    on: {
-      "click": _vm.jumpToTime
-    }
-  })]) : _vm._e(), _c("div", {
-    staticClass: "nf-audio"
-  }, [_c("div", {
-    staticClass: "play",
-    on: {
-      "click": _vm.handlePauseOrPlay
-    }
-  }, [_c("i", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.paused,
-      expression: "!paused"
-    }],
-    staticClass: "iconfont icon-zanting2 pause-icon"
-  }), _c("i", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.paused,
-      expression: "paused"
-    }],
-    staticClass: "iconfont icon-bofang1 play-icon"
-  })]), _c("div", {
-    staticClass: "time"
-  }, [_c("span", {
-    staticClass: "startTime"
-  }, [_vm._v(_vm._s(_vm.currentDuration))]), _vm._v("/ "), _c("span", {
-    staticClass: "endTime"
-  }, [_vm._v(_vm._s(_vm.duration))])]), _c("div", {
-    ref: "progress",
-    staticClass: "progress",
-    on: {
-      "click": _vm.clickProgress,
-      "mouseup": _vm.handleMouseup
-    }
-  }, [_c("div", {
-    ref: "currentProgress",
-    staticClass: "currentProgress"
-  }, [_c("span", {
-    ref: "circle",
-    staticClass: "circle",
-    on: {
-      "mousedown": _vm.handleMousedown
-    }
-  })])]), _c("div", {
-    staticClass: "nf-volume-panel"
-  }, [_c("volumeTool", {
-    attrs: {
-      "visible": _vm.volumeVisible,
-      "disabled": _vm.disabled
-    },
-    on: {
-      "update:visible": function($event) {
-        _vm.volumeVisible = $event;
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "reference",
-      fn: function() {
-        return [_vm.volume == 0 ? _c("i", {
-          staticClass: "iconfont icon-yinliang_guanbi volume-mute"
-        }) : _c("i", {
-          staticClass: "iconfont icon-yinliang_kaiqi volume"
-        })];
+  }), 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.locationToTime(_vm.jumpTime);
+        }
+      }
+    })])];
+  }) : _vm._e(), _c("div", {
+    staticClass: "nf-audio-body"
+  }, [_vm._t("play", function() {
+    return [_c("div", {
+      staticClass: "nf-audio-play",
+      on: {
+        "click": _vm.handlePauseOrPlay
+      }
+    }, [_c("i", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: !_vm.paused,
+        expression: "!paused"
+      }],
+      staticClass: "iconfont icon-zanting2 nf-audio-pause-icon"
+    }), _c("i", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: _vm.paused,
+        expression: "paused"
+      }],
+      staticClass: "iconfont icon-bofang1 nf-audio-play-icon"
+    })])];
+  }, {
+    "paused": _vm.paused
+  }), _vm._t("time", function() {
+    return [_c("div", {
+      staticClass: "nf-audio-time"
+    }, [_c("span", {
+      staticClass: "startTime"
+    }, [_vm._v(_vm._s(_vm.currentTime))]), _vm._v("/ "), _c("span", {
+      staticClass: "endTime"
+    }, [_vm._v(_vm._s(_vm.totalTime))])])];
+  }, {
+    "currentTime": _vm.currentTime,
+    "totalTime": _vm.totalTime
+  }), _vm.backSecond ? _vm._t("fastBack", function() {
+    return [_c("el-tooltip", {
+      staticClass: "nf-audio-pre",
+      attrs: {
+        "placement": "top",
+        "disabled": _vm.disabled
+      }
+    }, [_c("span", {
+      staticStyle: {
+        "color": "#C7C7C9",
+        "font-size": "13px"
       },
-      proxy: true
-    }])
-  }, [_c("el-slider", {
-    class: _vm.volumeValue === 0 ? "volume-mute-slider" : "volume-phonic",
-    attrs: {
-      "vertical": "",
-      "min": 0,
-      "max": 100,
-      "show-tooltip": _vm.volumeVisible,
-      "height": "60px"
-    },
-    on: {
-      "change": _vm.rangeVolume
-    },
-    model: {
-      value: _vm.volumeValue,
-      callback: function($$v) {
-        _vm.volumeValue = $$v;
+      attrs: {
+        "slot": "content"
       },
-      expression: "volumeValue"
-    }
-  })], 1)], 1), _vm.showMoreBtn ? _c("div", {
-    staticClass: "option"
-  }, [_c("moreBtn", {
-    attrs: {
-      "disabled": _vm.disabled
-    },
-    on: {
-      "down": function($event) {
-        return _vm.downRecord();
+      slot: "content"
+    }, [_vm._v(" -" + _vm._s(_vm.backSecond) + "s ")]), _c("nf-button", {
+      staticStyle: {
+        "padding": "3px",
+        "border-radius": "50%"
       },
-      "speed": _vm.changeSpeed
-    }
-  })], 1) : _vm._e()])]);
+      attrs: {
+        "type": "text",
+        "disabled": _vm.disabled
+      },
+      on: {
+        "click": _vm.handleBack
+      }
+    }, [_c("i", {
+      staticClass: "el-icon-d-arrow-left"
+    })])], 1)];
+  }) : _vm._e(), _vm._t("progress", function() {
+    return [_c("div", {
+      ref: "progressContainer",
+      staticClass: "nf-audio-progress-container",
+      on: {
+        "click": _vm.clickProgress,
+        "mouseup": _vm.handleMouseup
+      }
+    }, [_c("div", {
+      ref: "progressCurrent",
+      staticClass: "nf-audio-progress-current"
+    }, [_c("span", {
+      ref: "progressBar",
+      staticClass: "nf-audio-progress-bar",
+      on: {
+        "mousedown": _vm.handleMousedown
+      }
+    })])])];
+  }), _vm.forwardSecond ? _vm._t("fastForward", function() {
+    return [_c("el-tooltip", {
+      staticClass: "nf-audio-next",
+      attrs: {
+        "disabled": _vm.disabled
+      }
+    }, [_c("span", {
+      staticStyle: {
+        "color": "#C7C7C9",
+        "font-size": "13px"
+      },
+      attrs: {
+        "slot": "content"
+      },
+      slot: "content"
+    }, [_vm._v(" +" + _vm._s(_vm.forwardSecond) + "s ")]), _c("nf-button", {
+      staticStyle: {
+        "padding": "3px",
+        "border-radius": "50%"
+      },
+      attrs: {
+        "type": "text",
+        "disabled": _vm.disabled
+      },
+      on: {
+        "click": _vm.handleForward
+      }
+    }, [_c("i", {
+      staticClass: "el-icon-d-arrow-right"
+    })])], 1)];
+  }) : _vm._e(), _vm._t("volume", function() {
+    return [_c("div", {
+      staticClass: "nf-audio-volume-tool",
+      class: _vm.volumeVisible ? "nf-audio-tool-show" : ""
+    }, [_c("div", {
+      ref: "reference",
+      on: {
+        "click": _vm.showPopper
+      }
+    }, [_vm.volume == 0 ? _vm._t("volume-mute", function() {
+      return [_c("i", {
+        staticClass: "iconfont icon-yinliang_guanbi nf-audio-volume-mute"
+      })];
+    }) : _vm._t("volume-unmute", function() {
+      return [_c("i", {
+        staticClass: "iconfont icon-yinliang_kaiqi nf-audio-volume-unmute"
+      })];
+    })], 2), _c("transition", {
+      attrs: {
+        "name": "nf-audio-slide-fade"
+      }
+    }, [_c("div", {
+      directives: [{
+        name: "show",
+        rawName: "v-show",
+        value: _vm.volumeVisible,
+        expression: "volumeVisible"
+      }],
+      ref: "popperRef",
+      staticClass: "nf-audio-volume-popper"
+    }, [_c("el-slider", {
+      attrs: {
+        "vertical": "",
+        "min": 0,
+        "max": 100,
+        "show-tooltip": _vm.volumeVisible,
+        "height": "60px"
+      },
+      on: {
+        "change": _vm.volumeChange
+      },
+      model: {
+        value: _vm.volumeValue,
+        callback: function($$v) {
+          _vm.volumeValue = $$v;
+        },
+        expression: "volumeValue"
+      }
+    })], 1)])], 1)];
+  }, {
+    "volume": _vm.volume,
+    "volumeVisible": _vm.volumeVisible
+  }), _vm.showMoreBtn ? _vm._t("more", function() {
+    return [_c("div", {
+      staticClass: "nf-audio-more-btn-box"
+    }, [_c("el-popover", {
+      attrs: {
+        "placement": "right",
+        "popper-class": "nf-audio-popover",
+        "append-to-body": false,
+        "disabled": _vm.disabled
+      }
+    }, [_vm._t("more-btn-list", function() {
+      return [_c("div", {
+        staticClass: "nf-audio-btn-list"
+      }, [_c("el-popover", {
+        attrs: {
+          "placement": "right",
+          "popper-class": "nf-audio-popover",
+          "append-to-body": false,
+          "disabled": _vm.disabled
+        }
+      }, [_vm._t("speed-btn-list", function() {
+        return [_c("div", {
+          staticClass: "nf-audio-btn-list"
+        }, _vm._l(_vm.multipleArray, function(item, index) {
+          return _c("div", {
+            key: index,
+            staticClass: "nf-audio-btn-item",
+            class: _vm.speed == item ? "active" : "",
+            on: {
+              "click": function($event) {
+                return _vm.changeSpeed(item);
+              }
+            }
+          }, [_vm._v(" " + _vm._s(_vm.speedPreDesc) + _vm._s(item) + " ")]);
+        }), 0)];
+      }), _c("div", {
+        staticClass: "nf-audio-btn-item",
+        attrs: {
+          "slot": "reference"
+        },
+        slot: "reference"
+      }, [_vm._v(_vm._s(_vm.speedDesc))])], 2), _c("div", {
+        staticClass: "nf-audio-btn-item",
+        on: {
+          "click": _vm.downRecord
+        }
+      }, [_vm._v(_vm._s(_vm.downloadDesc))])], 1)];
+    }), _c("div", {
+      staticClass: "nf-audio-more-icon-container",
+      attrs: {
+        "slot": "reference"
+      },
+      slot: "reference"
+    }, [_c("i", {
+      staticClass: "iconfont icon-gengduo1 nf-audio-more-icon"
+    })])], 2)], 1)];
+  }, {
+    "showMoreBtn": _vm.showMoreBtn
+  }) : _vm._e()], 2)], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ vue2RuntimeHelpers.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);