@94ai/nf-audio 3.1.13

package/.eslintrc.cjs

@@ -0,0 +1,49 @@
+module.exports = {
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "vue/custom-event-name-casing": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        "ignores": [
+          "index"
+        ]
+      }
+    ],
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "prettier/prettier": [
+      "error",
+      {
+        "tabWidth": 2,
+        "singleQuote": true,
+        "semi": false,
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

package/README.md

@@ -0,0 +1,11 @@
+# `@94ai/nf-audio`
+
+> TODO: description
+
+## Usage
+
+```
+const nfAudio = require('@94ai/nf-audio');
+
+// TODO: DEMONSTRATE API
+```

package/components.d.ts

@@ -0,0 +1,8 @@
+export {}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        NfAudio: typeof import('@94ai/nf-audio/lib/nf-audio.vue')['default']
+        
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,147 @@
+import { PluginObject } from 'vue-demi';
+declare const _default: import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{
+    duration: string;
+    currentDuration: string;
+    audio: string;
+    volume: number;
+    paused: boolean;
+    showVolumePanel: boolean;
+    volumeVisible: boolean;
+    volumeValue: number;
+    speed: number;
+}, Readonly<import("vue-demi").ExtractPropTypes<{
+    audioSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    backSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    forwardSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, Readonly<import("vue-demi").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;
+}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue-demi").ExtractPropTypes<{
+    audioSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    backSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    forwardSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>> & import("vue-demi").ShallowUnwrapRef<{}> & {
+    duration: string;
+    currentDuration: string;
+    audio: string;
+    volume: number;
+    paused: boolean;
+    showVolumePanel: boolean;
+    volumeVisible: boolean;
+    volumeValue: number;
+    speed: number;
+} & import("vue/types/v3-component-options").ExtractComputedReturns<{}> & import("vue-demi").ComponentCustomProperties & Readonly<import("vue-demi").ExtractPropTypes<{
+    audioSrc: {
+        type: StringConstructor;
+        default: string;
+    };
+    backSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    forwardSecond: {
+        type: NumberConstructor;
+        default: number;
+    };
+    startTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, any, any, any, import("vue-demi").ComponentComputedOptions, import("vue-demi").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue-demi").ExtractPropTypes<{
+    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, {
+    audioSrc: string;
+    backSecond: number;
+    forwardSecond: number;
+    startTime: number;
+}> & {
+    props: {
+        audioSrc: {
+            type: StringConstructor;
+            default: string;
+        };
+        backSecond: {
+            type: NumberConstructor;
+            default: number;
+        };
+        forwardSecond: {
+            type: NumberConstructor;
+            default: number;
+        };
+        startTime: {
+            type: NumberConstructor;
+            default: number;
+        };
+    };
+} & PluginObject<undefined>;
+export default _default;

package/lib/more-btn.vue.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("vue").DefineComponent<{}, any, {
+    multipleArray: string[];
+    speed: string;
+}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/lib/nf-audio.cjs.js

@@ -0,0 +1,480 @@
+"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 elementUi = require("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 = 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() {
+    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: {},
+  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__ */ 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: {
+    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.");
+        elementUi.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") {
+        elementUi.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") {
+        elementUi.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") {
+        elementUi.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__ */ vue2RuntimeHelpers.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+const NfAudio = __component__.exports;
+NfAudio.install = (app) => {
+  app.component("nf-audio", NfAudio);
+};
+exports.default = NfAudio;