@94ai/nf-audio 3.1.37 → 3.1.39

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

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

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">
+        <span class="more-btn"></span>
+      </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>

package/package/nf-audio.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="nf-audio-strip">
+    <audio @canplay="getDuration" controls crossOrigin="anonymous" @timeupdate="updateTime" @ended="handleAudioEnded" v-show="false" ref="audio"
+           :src="audioSrc"/>
+    <div class="nf-fast">
+      <span class="nf-fast-icon" @click="jumpToTime"></span>
+      <!-- 以下是 快进/快退 功能 -->
+      <!-- 
+        <div>
+          <span class="pre" @click="handleBack">
+            <i class="el-icon-d-arrow-left"></i>
+            <span style="color: #C7C7C9;font-size: 13px;margin-left: 10px">-{{ backSecond }}s</span>
+          </span>
+          <span style="display:inline-block; height: 20px; width: 100px;"></span>
+          <span class="next" @click="handleForward">
+            <span style="color: #C7C7C9;font-size: 13px;margin-right: 10px">+{{ forwardSecond }}s </span>
+            <i class="el-icon-d-arrow-right"></i>
+          </span>
+        </div> 
+      -->
+    </div>
+    <div class="nf-audio">
+      <div class="play" @click="handlePauseOrPlay">
+        <span class="pause-icon" v-show="!paused"></span>
+        <span class="play-icon" v-show="paused"></span>
+      </div>
+      <div class="time">
+        <span class="startTime">{{ currentDuration }}</span>/
+        <span class="endTime">{{ duration }}</span>
+      </div>
+      <div class="progress" ref="progress" @click="clickProgress" @mouseup="handleMouseup">
+        <div class="currentProgress" ref="currentProgress">
+          <span class="circle" ref="circle" @mousedown="handleMousedown"></span>
+        </div>
+      </div>
+      <div class="nf-volume-panel">
+        <volumeTool :visible.sync="volumeVisible">
+          <template v-slot:reference>
+            <div class="volume" v-if="volume == 0"></div>
+            <div class="volume-mute" v-else></div>
+          </template>
+          <el-slider
+            v-model="volumeValue"
+            vertical
+            :min="0"
+            :max="100"
+            :show-tooltip="volumeVisible"
+            :class="volumeValue===0 ? 'volume-mute' : 'volume-phonic'"
+            @change="rangeVolume"
+            height="60px">
+          </el-slider>
+        </volumeTool>
+      </div>
+      <div class="option">
+        <moreBtn @down="downRecord()" @speed="changeSpeed" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import volumeTool from './volume-tool.vue'
+import moreBtn from './more-btn.vue'
+import { Message } from 'element-ui'
+
+export default {
+  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.0
+    }
+  },
+  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
+        console.log(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 //默认百分百音量
+      //监听音量的变化
+      // this.audio.addEventListener('volumechange',(volumeValue)=>{
+      //   console.log(this.audio.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 ) {
+      //当前移动的位置 = 当前移动的位置 / 当前进度条的可视长度    //this.$refs.progress.clientWidth 注意一定要拿总长度 否则会拿进度条已经走过的长度
+      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)
+      }
+      //获取当前鼠标的位置 X
+      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
+    }
+  }
+}
+</script>

package/package/style/css.ts

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

package/package/style/index.ts

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

package/package/volume-tool.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="nf-volume-tool" :class=" visible ? 'nf-tool-show':'nf-tool-hide'" @click="showPopper" >
+    <div ref="reference">
+      <slot name="reference"/>
+    </div>
+    <transition name="slide-fade">
+      <div ref="popperRef" class="nf-popper" v-show="visible" >
+        <slot/>
+      </div>
+    </transition>
+
+  </div>
+</template>
+
+<script setup>
+import { watch, ref ,onUnmounted} from 'vue-demi'
+
+const emits = defineEmits(['update:visible'])
+const props = defineProps({
+  visible: [Boolean, String]
+})
+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)
+})
+defineExpose({
+  showPopper
+})
+</script>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@94ai/nf-audio",
-  "version": "3.1.37",
+  "version": "3.1.39",
   "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.1.37",
+    "@94ai/nf-theme-chalk": "^1.0.0",
     "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": "14dfc729b9988003d4686b414e1e9c0aaa7c4dcd"
+  "gitHead": "2b60696b405feafbbaeed385e5bcf666ceefbf2c"
 }