Vue使用Vue-APlayer实现语音播放、下载功能

最新推荐文章于 2023-05-24 09:58:58 发布

92huahua

最新推荐文章于 2023-05-24 09:58:58 发布

阅读量981

点赞数 1

分类专栏： javascript 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/126519466

版权

javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

html模块

<template>
  <div class="page-content voiceSettings">
    <div class="page-content variableManage">
        <Button class="try-btn" v-if="!playing" type="primary" @click="playVideo()">试听</Button>
        <Button class="try-btn" v-else-if="playing>0" disabled type="primary">试听</Button>
        <Button class="stop-btn" v-else icon="md-pause" type="primary" @click="stopPlayVideo">停止</Button>
    </div>
    <aplayer
      ref="audio"
      id="audio"
      :music="musicAll"
      :controls="false"
      :autoplay="false"
      :mini="true"
      @ended="playEndVideo"
    ></aplayer>
</div>

<script>
import './index.scss'
import Aplayer from 'vue-aplayer'
// import utils from '@/libs/utils.js'
import { setTimeout } from 'timers'
export default {
  name: 'voiceSettings',
  data () {
    return {
      record: '',
      recordType: [],
      voice: '',
      volume: 50,
      voiceSpeed: 0,
      voiceType: [],
      musicAll: { src: '#' },
      playing: 0,
      isPlay: false,
    }
  },
  components: {
    Aplayer
  },
  created () {
    this.init()
  },
  methods: {
    //下载事件封装
    downLoadBlob (blob, filename = '') {
      let a = document.createElement('a')
      a.download = filename
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.click()
      a.remove()
      window.URL.revokeObjectURL(url)
    },
    getVoiceFromText (value) {
      let params = {
        volume: this.volume,
        speaker: this.voice,
        recordName: this.record,
        voiceSpeed: this.voiceSpeed,
        text: this.example
      }
      this.$api.getVoiceFromText(params, { responseType: 'blob' }).then(res => {
        //这里是下载逻辑
        if (value === 1) {
          // utils.downLoadBlob(res.file, res.filename)
           this.downLoadBlob(res.file, res.filename)
        } else {
           //这里是播放逻辑
          let src = window.URL.createObjectURL(res.file)
          this.musicAll = { src }
          if (this.musicAll.src.length > 1) {
            setTimeout(() => {
              this.$refs.audio.play()
            }, 150)
          }
        }
      }).catch(res => {
        console.log(res)
      })
    },
    playVideo: utils.debounce(async function (wordsFileId) {
      let vm = this
      this.playing = wordsFileId || -1
      this.getVoiceFromText(vm)
    }, 500),
    stopPlayVideo () {
      this.playing = 0
      this.$refs.audio.pause()
    },
    playEndVideo () {
      this.playing = 0
    },
    download () {
      this.getVoiceFromText(1)
    }
  }
}
</script>