简单做了一个语言翻译的功能

//html部分
<template>
  <div style="background-color:#F6F6F6 ;height:100vh;">
    <header><van-icon name="arrow-left" class="iconreturn" @click="$router.go(-1)" />{{ $t('function.votra') }}</header>
    <div class="speakbg">
      <img src="../../../assets/speak.png" class="imgk" @touchstart="beginspeak" @touchend="endspeak" id="imgs"
        ref="btnRef">
      <!-- <img src="../../../assets/speak.png" class="imgk" @click="endspeak" id="imgs" ref="btnRef"> -->

      <p class="wkspeak">欢迎使用语音模式 </p>
      <P class="beginspeak" v-if="speakopen">请轻点图标开始/暂停说话</P>
      <P class="beginspeak" v-else>正在聆听中，请稍等</P>

      <!-- <p class="release" @click="hearlongs">播放语音</p> -->
      <!-- <div id="my_camera"></div> -->
    </div>
    <div class="resultbg">
      <div class="result"><el-input type="textarea" class="textareaone" v-model="textone" resize="false" :readonly="true">

        </el-input>
        <span class="result-titles">原语音内容</span>
        <el-button class="result-release" @click="releaseMusic" type="text"><img
            src='../../../assets/release.png'></el-button>

      </div>
      <div class="results"><el-input type="textarea" class="textareaone" v-model="texttwo" resize="false"
          :readonly="true"></el-input>
        <span class="results-title">转译内容</span>
        <span class="results-lan" @click="openLanChoose"><img :src="imgs">{{ lan }}<i
            class="el-icon-arrow-down"></i></span>
        <el-button class="results-release" @click="releaseNewMusic" type="text"><img
            src='../../../assets/release.png'></el-button>
      </div>
    </div>

    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" title="语言切换" />
  </div>
</template>
<script >
import Recorder from 'js-audio-recorder';
import lanList from '../../../utils/laug'
export default {
  props: {
  },
  data() {
    return {
      textone: '',
      texttwo: '',
      show: false,
      values: 'zh-cn',
      lan: '英语',
      speakopen: true,
      speaker: 'en-US-RogerNeural',
      actions: lanList.lanList.countryList,
      imgs: require('../../../assets/country/UK.png'),
      recorder: new Recorder({
        sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
        sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
        // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
      })
    };
  },
  watch: {

  },
  mounted() {
  console.log(this.actions)

  },
  methods: {
    beginspeak() {
      this.textone = '';
      this.texttwo = '';
      Recorder.getPermission().then(
        () => {
          console.log("开始录音");
          this.speakopen = false;
          this.recorder.start(); // 开始录音
        },
        (error) => {
          this.$message({
            message: error.message,
            type: "info",
          });
          console.log(`${error.name} : ${error.message}`);
        }
      );
    },
    endspeak() {
      // 暂停录音
      this.speakopen = true;
      // 获取录音结果
      // this.recorderEx.getPlayTime();
      this.recorder.stop();
      const wavBlob = this.recorder.getWAVBlob() // blob格式
      // this.recorder.downloadWAV('翻译');
      const newbolb = new Blob([wavBlob], { type: 'audio/wav' })
      //获取当时时间戳作为文件名
      const fileOfBlob = new File([newbolb], new Date().getTime() + '.wav')
      console.log(fileOfBlob)
      this.file = fileOfBlob;
      this.lanChangeText();
    },

    onSelect(val) {
      console.log(val, 'askdjsa');
      this.lan = val.cname;
      this.imgs = val.img;
      this.values = val.type;
      this.getVals(this.textone)
      this.speaker = val.speaker;
      //  this.getVal(val);
    },
    getWAVRecordAudioData() {
      var wavBlob = this.recorder.getWAVBlob();
    },
    openLanChoose() {
      this.actions.map((item,index)=>{
      item.name = item.cname
    })
      this.show = true;
    },
    releaseMusic() {
      this.recorder.play()
    },
    hearlongs() {
      recorder.play()
    },
    releaseNewMusic() {
      this.$axios({
        url: this.loginbases + '/textToSpeek/222.mp3',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        responseType: 'arraybuffer',
        data: {
          voice: this.speaker,
          rate: '+0%',
          volume: '+10%',
          text: this.texttwo
        }
      }).then((res) => {
        console.log(res)
        this.dataurl = this.getObjectURL(res.data, 'audio/mp3');
        console.log(this.dataurl)
        var player = new Audio(this.dataurl);
        player.play()

      })
    },
    // 将返回的流数据转换为url
    getObjectURL(file, type) {
      return window.URL.createObjectURL(new Blob([file], { type }))
    },

    //调用语音转换文字的功能
    lanChangeText() {
      this.$axios({
        url: this.loginbases + '/audioToText',
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: {
          file: this.file
        }
      }).then((res) => {
        console.log(res.data.data)
        this.texttwo = res.data.data;
        this.getVal(this.texttwo)

      })

    },
    getVal(val) {
      this.$axios({
        url: this.loginbases + '/translation',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          text: val,
          dest: this.values

        }
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {

          this.textone = res.data.data;
        }
      })


    },
    getVals(val) {
      this.$axios({
        url: this.loginbases + '/translation',
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          text: val,
          dest: this.values

        }
      }).then((res) => {
        console.log(res)
        if (res.data.code == 200) {

          this.texttwo = res.data.data;
        }
      })


    },



  },
  mounted() {


  },

};

</script>
<style lang="scss" scoped>
.pic {
  width: 200px;
  height: 200px;
}

.van-action-sheet {
  max-height: 30%;
}

.van-action-sheet__header {
  font-size: 10px;
  line-height: 3.6rem;
}

.van-action-sheet__header {
  background: rgba(244,238,235,0.5);
}
.van-action-sheet__item{
  background: rgba(244,238,235,0.5);
  color: #5F5650;
  font-weight: 400;
}
.van-action-sheet__item:hover{
  background:rgba(183,173,168,0.15);
  color: #2F2620;
  font-weight: 500;
}
// .van-action-sheet
.van-action-sheet__item {
  font-size: 10px;
  line-height: 3rem;
  padding: 5px 0;
}

.van-action-sheet__close {
  font-size: 10px;
  padding: 0 10px;
}

>>>.el-textarea__inner {
  height: 120px;
  background: #fff;
  font-size: 10px;
  border-radius: 6.4px;
  border: none;
  padding-top: 28px;
  margin-top: 10px;
  text-indent: 12px;

}

#my_camera {
  height: 100vh;
}

.iconreturn {
  position: absolute;
  left: 8px;
  top: 10px;
}

.speakbg {
  background-color: #fff;
  padding-bottom: 20px;
}

.imgk {
  width: 60px;
  height: 60px;
  margin-top: 52px;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wkspeak {
  margin-top: 3px;
  color: #B7ADA8;
}

.results {
  position: relative;

  &-title {
    position: absolute;
    left: 16px;
    top: 22px;
    font-size: 9px;
    color: #019EFF
  }

  &-release {
    position: absolute;
    top: 26px;
    left: 12px;
    font-size: 12px;
    color: #019EFF
  }

  &-lan {
    position: absolute;
    right: 10px;
    top: 25px;
    display: flex;
    color: #019EFF;
    font-size: 8px;
    line-height: 8px;

    img {
      width: 10px;
      height: 10px;
      padding: 0 4px;
      line-height: 4px;
      // position: absolute;
      right: 35px;
      margin-top: -2px;

    }

    i {
      margin-left: 2px;
    }
  }
}

.result {
  position: relative;

  &-titles {
    position: absolute;
    left: 16px;
    top: 22px;
    color: #FF6201;
    font-size: 9px;
  }

  &-release {
    position: absolute;
    top: 26px;
    left: 12px;
    font-size: 12px
  }

}

.beginspeak {
  color: #36291E;
  font-size: 12px;
  margin-top: 8px;
}
</style>