vue2中前端實現(xiàn)語音播報的詳細(xì)過程

更新時間：2024年07月24日 14:41:33 作者：李析鳶

vue中語音播報,目前本人寫的過程中,遇到了兩種情況,第一種是后端直接返回一個mp3的播放url,第二種就是播報的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說一下如何實現(xiàn),感興趣的朋友一起看看吧

一、播報情況說明

vue中語音播報，目前本人寫的過程中，遇到了兩種情況，第一種是后端直接返回一個mp3的播放url，第二種就是播報的內(nèi)容需要前端自己拼接的，關(guān)于兩種方法，我都說一下如何實現(xiàn)

1、后端直接返回mp3播放的url，

從后端拿到的url，以后，可以直接使用new Audio來創(chuàng)建，以下是我的代碼，這樣寫就可以直接播報了

// 這里的OPERATION_BASE_URL，是我的項目基地址
// alarmAudioUrl是后端返回的語音url地址
    let AlarmAudioUrl = OPERATION_BASE_URL + "/" + alarmAudioUrl;
      let mp3 = new Audio(AlarmAudioUrl);
      mp3.play();
      let times = undefined;
      mp3.oncanplay = () => {
        times = mp3.duration;
      };

2、前端自己拼接文字信息來播報

語音播報的文字是前端自己拼接的，此時就要用另一種方法，貼上我的代碼，我就自己重新開一個項目demo，

<template>
  <div>
    <button @click="playVoice">播放語音</button>
  </div>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {
      message :'小朋友，你是否有很多問號,hhhhhhhhhhhhhhhhhhhhhh'
    };
  },
  methods: {
    playVoice() {
    // message 假設(shè)message是你拼接好的文本信息
      this.handleSpeak(this.message ); // 傳入需要播放的文字
    },
    // 語音播報的函數(shù)
    // 比如你從后端接收完數(shù)據(jù)，并且自己拼接好以后，就可以直接調(diào)這個方法，傳入你的文本，就可以播放了
    handleSpeak(text) {
      msg.text = text; // 文字內(nèi)容: 小朋友，你是否有很多問號
      msg.lang = 'zh-CN'; // 使用的語言:中文
      msg.volume = 1; // 聲音音量：1
      msg.rate = 1; // 語速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
  },
};
</script>

到此這篇關(guān)于vue2中前端實現(xiàn)語音播報的詳細(xì)過程的文章就介紹到這了,更多相關(guān)vue語音播報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: