@94ai/nf-audio 3.1.13

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

@@ -0,0 +1,480 @@
+import { ref, watch, onUnmounted } from "vue-demi";
+import { normalizeComponent } from "@94ai/vue2-runtime-helpers";
+import { Message } from "element-ui";
+const __sfc_main = {};
+__sfc_main.props = {
+  visible: [Boolean, String]
+};
+__sfc_main.setup = (__props, __ctx) => {
+  const emits = __ctx.emit;
+  const props = __props;
+  const reference = ref();
+  const popperRef = ref();
+  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() {
+    emits("update:visible", true);
+  }
+  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__ */ 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: {},
+  data() {
+    return {
+      multipleArray: ["1.0", "1.25", "1.5", "1.75", "2.0"],
+      speed: ""
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    handleDown() {
+      this.$emit("down");
+    },
+    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"
+    }
+  }, [_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"
+    },
+    slot: "reference"
+  }, [_vm._v("倍速")])]), _c("div", {
+    staticClass: "btn-item",
+    on: {
+      "click": _vm.handleDown
+    }
+  }, [_vm._v("下载")])], 1), _c("div", {
+    staticClass: "more-icon",
+    attrs: {
+      "slot": "reference"
+    },
+    slot: "reference"
+  }, [_c("i", {
+    staticClass: "iconfont icon-gengduo1 more-btn"
+  })])])], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ 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: {
+    audioSrc: {
+      type: String,
+      default: ""
+    },
+    backSecond: {
+      type: Number,
+      default: 3
+    },
+    forwardSecond: {
+      type: Number,
+      default: 10
+    },
+    startTime: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      duration: "00:00",
+      currentDuration: "00:00",
+      audio: "",
+      volume: 0.8,
+      paused: true,
+      showVolumePanel: false,
+      volumeVisible: false,
+      volumeValue: 80,
+      speed: 1
+    };
+  },
+  mounted() {
+    this.audio = this.$refs.audio;
+  },
+  methods: {
+    //后退
+    handleBack() {
+      if (this.audio.currentTime > this.backSecond) {
+        this.audio.currentTime = this.audio.currentTime - this.backSecond;
+      }
+    },
+    //前进
+    handleForward() {
+      if (this.audio.duration - this.audio.currentTime > this.forwardSecond) {
+        this.audio.currentTime = this.audio.currentTime + 10;
+      }
+    },
+    //暂停或播放
+    handlePauseOrPlay() {
+      if (this.audio.readyState >= 2) {
+        this.audio.paused ? this.audio.play() : this.audio.pause();
+        this.audio.playbackRate = this.speed;
+        this.paused = !this.paused;
+      } else {
+        console.log("Audio is not ready yet.");
+        Message.warning("音频还未加载完成");
+      }
+    },
+    //视频在可以播放时触发
+    getDuration() {
+      this.duration = this.timeFormat(this.$refs.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)
+        return;
+      this.currentDuration = this.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";
+        this.paused = false;
+      }
+    },
+    handleAudioEnded() {
+      console.log("音频播放完毕！");
+      this.paused = true;
+    },
+    //点击进度条更新进度
+    clickProgress(e) {
+      if (this.duration === "00:00") {
+        Message.warning("音频还未加载完成");
+        return false;
+      }
+      if (!this.audio.paused) {
+        this.updateProgress(e.offsetX);
+      }
+    },
+    //更新进度
+    updateProgress(MoveX) {
+      let clickProgress = MoveX / this.$refs.progress.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";
+    },
+    //鼠标弹起
+    handleMouseup() {
+      if (this.duration === "00:00") {
+        Message.warning("音频还未加载完成");
+        return false;
+      }
+      const timer = setTimeout(() => {
+        this.audio.play();
+        this.paused = false;
+        clearTimeout(timer);
+      }, 200);
+      this.$once("hook:beforeDestroy", () => {
+        clearTimeout(timer);
+      });
+    },
+    //调整进度
+    handleMousedown() {
+      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);
+      document.addEventListener("mouseup", () => {
+        document.removeEventListener("mousemove", moveX);
+      });
+    },
+    rangeVolume(val) {
+      console.log(val);
+    },
+    /** 设置倍速播放 */
+    changeSpeed(command) {
+      const audioPlayer = this.$refs.audio;
+      if (audioPlayer) {
+        audioPlayer.playbackRate = command;
+      }
+      this.speed = command;
+    },
+    downRecord() {
+      this.$emit("downloadCallback");
+    },
+    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";
+      }
+    },
+    jumpToTime() {
+      this.audio.pause();
+      const formatStartT = this.timeFormat(this.startTime);
+      if (this.duration === "00:00") {
+        Message.warning("音频还未加载完成");
+        return false;
+      }
+      if (formatStartT >= this.duration) {
+        this.audio.currentTime = this.duration;
+        this.currentDuration = this.timeFormat(this.audio.currentTime);
+        this.calcMoveX();
+        this.audio.play();
+        console.error("开始时间不能大于总时长");
+        return false;
+      } else if (formatStartT >= "00:00" && formatStartT < this.duration) {
+        this.audio.currentTime = this.startTime;
+        this.currentDuration = this.timeFormat(this.audio.currentTime);
+        this.calcMoveX();
+        this.audio.play();
+      } else {
+        this.audio.currentTime = 0;
+        this.currentDuration = this.timeFormat(this.audio.currentTime);
+        this.calcMoveX();
+        this.audio.play();
+      }
+    }
+  },
+  watch: {
+    volumeValue(val) {
+      this.volume = val / 100;
+      this.audio.volume = val / 100;
+    }
+  }
+};
+var _sfc_render = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", {
+    staticClass: "nf-audio-strip"
+  }, [_c("audio", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: false,
+      expression: "false"
+    }],
+    ref: "audio",
+    attrs: {
+      "controls": "",
+      "crossOrigin": "anonymous",
+      "src": _vm.audioSrc
+    },
+    on: {
+      "canplay": _vm.getDuration,
+      "timeupdate": _vm.updateTime,
+      "ended": _vm.handleAudioEnded
+    }
+  }), _c("div", {
+    staticClass: "nf-fast"
+  }, [_c("i", {
+    staticClass: "iconfont icon-zanting1 nf-fast-icon",
+    on: {
+      "click": _vm.jumpToTime
+    }
+  })]), _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
+    },
+    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"
+        })];
+      },
+      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;
+      },
+      expression: "volumeValue"
+    }
+  })], 1)], 1), _c("div", {
+    staticClass: "option"
+  }, [_c("moreBtn", {
+    on: {
+      "down": function($event) {
+        return _vm.downRecord();
+      },
+      "speed": _vm.changeSpeed
+    }
+  })], 1)])]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+const NfAudio = __component__.exports;
+NfAudio.install = (app) => {
+  app.component("nf-audio", NfAudio);
+};
+export {
+  NfAudio as default
+};

package/lib/nf-audio.vue.d.ts

@@ -0,0 +1,51 @@
+declare const _default: import("vue").DefineComponent<{
+    audioSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    backSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    forwardSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {}, {
+    duration: string;
+    currentDuration: string;
+    audio: string;
+    volume: number;
+    paused: boolean;
+    showVolumePanel: boolean;
+    volumeVisible: boolean;
+    volumeValue: number;
+    speed: number;
+}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    audioSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    backSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    forwardSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    audioSrc: string;
+    backSecond: number;
+    forwardSecond: number;
+    startTime: number;
+}>;
+export default _default;

package/lib/style/css.d.ts

@@ -0,0 +1 @@
+

package/lib/style/css.js

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/css/nf-audio.css'

package/lib/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/style/index.js

@@ -0,0 +1 @@
+import '@94ai/nf-theme-chalk/lib/nf-audio.scss'

package/lib/volume-tool.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue-demi").DefineComponent<{}, {
+    showPopper: typeof showPopper;
+    $emit: (event: "update:visible", ...args: any[]) => void;
+    visible?: string | boolean | undefined;
+    $props: {
+        readonly visible?: string | boolean | undefined;
+    };
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue-demi").ExtractPropTypes<{}>>, {}>, {
+    reference?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & (new () => {
+    $scopedSlots: S;
+});

package/package/index.ts

@@ -0,0 +1,8 @@
+import NfAudio from './nf-audio.vue'
+import { Vue2, PluginObject } from 'vue-demi'
+
+NfAudio.install = (app: typeof Vue2) => {
+  app!.component('nf-audio', NfAudio)
+}
+
+export default NfAudio as typeof NfAudio & PluginObject<undefined>

package/package/more-btn.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="more-btn-box">
+    <el-popover placement="right" popper-class="audio-popover">
+      <div class="audio-btn-list">
+        <el-popover placement="right" popper-class="audio-popover">
+          <div class="audio-btn-list">
+            <div v-for="(item,index) in multipleArray" :key="index" class="btn-item" :class="speed===item?'active':''" @click="handleSpeed(item)">x {{ item }}</div>
+          </div>
+          <div slot="reference" class="btn-item">倍速</div>
+        </el-popover>
+        <div class="btn-item" @click="handleDown">下载</div>
+      </div>
+      <div slot="reference" class="more-icon">
+        <i class="iconfont icon-gengduo1 more-btn"/>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'more-btn',
+  components: {},
+  data() {
+    return {
+      multipleArray: ['1.0', '1.25', '1.5', '1.75', '2.0'],
+      speed: ''
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleDown() {
+      this.$emit('down')
+    },
+    handleSpeed(speed) {
+      this.speed = speed
+      this.$emit('speed', speed)
+    }
+  }
+}
+
+</script>