@94ai/nf-audio 3.1.13

package/package/nf-audio.vue

@@ -0,0 +1,286 @@
+<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">
+      <i class="iconfont icon-zanting1 nf-fast-icon" @click="jumpToTime" />
+      <!-- 以下是 快进/快退 功能 -->
+      <!--
+        <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">
+        <i class="iconfont icon-zanting2 pause-icon" v-show="!paused"/>
+        <i class="iconfont icon-bofang1 play-icon" v-show="paused"/>
+      </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>
+            <i class="iconfont icon-yinliang_guanbi volume-mute" v-if="volume == 0" />
+            <i class="iconfont icon-yinliang_kaiqi volume" v-else/>
+          </template>
+          <el-slider
+            v-model="volumeValue"
+            vertical
+            :min="0"
+            :max="100"
+            :show-tooltip="volumeVisible"
+            :class="volumeValue===0 ? 'volume-mute-slider' : '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
+      } 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,51 @@
+<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

@@ -0,0 +1,34 @@
+{
+  "name": "@94ai/nf-audio",
+  "version": "3.1.13",
+  "description": "> TODO: description",
+  "keywords": [],
+  "author": "liuxiangxiang <liuxiangxiang@94ai.com>",
+  "homepage": "https://oss.xccjh.top/common-ui/#/ai-index",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://94ai.gitlab.com/zoujiahe/common-ui.git"
+  },
+  "dependencies": {
+    "@94ai/nf-theme-chalk": "^3.1.13",
+    "vue-demi": "^0.14.5"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "element-ui": ">=2.13.2",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "types": "lib/index.d.ts",
+  "main": "lib/nf-audio.cjs.js",
+  "module": "lib/nf-audio.esm-bundler.js",
+  "gitHead": "a8c56183ccc8e979008e2d38bfde2d7d1448654c"
+}

package/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    // 这个工具可以实现自动添加CSS3前缀
+    autoprefixer: {
+      overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
+    },
+  },
+}