vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)的操作方法

更新時間：2024年01月26日 11:33:32 作者：相與還

這篇文章主要介紹了vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

前言

時隔多日，自己已經(jīng)好久沒更新文章了；今年一直跟隨公司的政策[BEI YA ZHA]中，做了一個又一個的需求，反而沒有多少自己的時間，更別說突破自己

??º·(? ??????????? )?º·?（霧）

然后最近，我朋友突然和我說有沒有做過TTS，我第一反應是???

? •?•?……
一臉無辜

于是就出現(xiàn)我們今天主題的
什么是TTS？

去調(diào)查了一番，簡單的說就是一種語音文本互轉(zhuǎn)的技術(shù)
這里涉及到語音合成的概念.語音合成是通過機械的、電子的方法產(chǎn)生人造語音的技術(shù)。TTS技術(shù)（又稱文語轉(zhuǎn)換技術(shù)）隸屬于語音合成而WEB，也就是我們的瀏覽器，已經(jīng)給我們封裝好了TTS，能夠很方便的調(diào)用API，基本上，我們能夠使用原生的前端元素直接實現(xiàn)文本轉(zhuǎn)語音，語音轉(zhuǎn)文字

因此任何前端框架都可以使用該套邏輯實現(xiàn)TTS

WEB自帶TTS

它是有自己的官方文檔的，我們可以很輕易的就通過該API文檔來找到我們需要的實現(xiàn)的邏輯

WEB自帶TTS官方中文文檔API

基礎(chǔ)事件

文字轉(zhuǎn)語音基礎(chǔ)事件

這里給大家列出幾個常用的基礎(chǔ)事件，更多可訪問上面的API文檔

// 創(chuàng)建 SpeechSynthesisUtterance 對象
var speechUtterance = new SpeechSynthesisUtterance('Hello, how are you?');
// 創(chuàng)建 SpeechSynthesis 對象
var synthesis = window.speechSynthesis;
// 設置語音合成的事件處理函數(shù)
// 開始語音合成
speechUtterance.onstart = function(event) {
  console.log('Speech synthesis started.');
};
// 結(jié)束語音合成
speechUtterance.onend = function(event) {
  console.log('Speech synthesis ended.');
};
// 暫停語音合成
speechUtterance.onpause = function(event) {
  console.log('Speech synthesis paused.');
};
// 恢復語音合成
speechUtterance.onresume = function(event) {
  console.log('Speech synthesis resumed.');
};
// 分段語音合成
speechUtterance.onboundary = function(event) {
  console.log('Speech boundary reached at character index ' + event.charIndex + '.');
};
// 啟動語音合成
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  synthesis.speak(speechUtterance);
});

語音轉(zhuǎn)文字基礎(chǔ)事件

// 創(chuàng)建 SpeechRecognition 對象
var recognition = new window.SpeechRecognition();
// 設置語音識別的事件處理函數(shù)
// 開始語音識別
recognition.onstart = function(event) {
  console.log('Speech recognition started.');
};
// 結(jié)束語音識別
recognition.onend = function(event) {
  console.log('Speech recognition ended.');
};
// 識別到語音結(jié)果
recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  console.log('Recognized speech: ' + transcript);
};
// 啟動語音識別
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  recognition.start();
});

VUE項目

我有將本次研究的成果放到我的git上，以下為我項目中的截圖

還有一個文本跟隨朗讀變色的實際上是我朋友需要的研究的功能，其實界面是差不多的，結(jié)尾我會放出我項目的git鏈接,以供大家參考

語音轉(zhuǎn)文字

在我的項目中，vue實現(xiàn)語音轉(zhuǎn)文字的代碼如下:

界面

<template>
  <div>
    <el-page-header @back="goBack" content="語音轉(zhuǎn)文字"/>
    <div class="bank"></div>
    <el-card header="語音轉(zhuǎn)文字">
      <el-card>
        <el-input :readonly="true" id="word" v-model="word"></el-input>
      </el-card>
      <el-card>
        <el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">語音識別中...</span><span v-else>語音識別</span></el-button>
      </el-card>
    </el-card>
  </div>
</template>

邏輯

<script>
export default {
  name: "AudioToWord",
  data() {
    return {
      word: "",
      isListening: false, // 判斷是否在語音監(jiān)聽中
    }
  },
  methods: {
    audioCHangeWord() { 
      var that = this;
      that.word = "";
      // 創(chuàng)建SpeechRecognition對象
      // eslint-disable-next-line no-undef
      var recognition = new webkitSpeechRecognition();
      if (!recognition) { 
        // eslint-disable-next-line no-undef
        recognition = new SpeechRecognition();
      }
      // 設置語言
      recognition.lang = 'zh-CN';
      // 開始語音識別
      recognition.start();
      that.isListening = true;
      // 監(jiān)聽識別結(jié)果
      recognition.onresult = function (event) {
        var result = event.results[0][0].transcript;
        that.word = result;
      };
      // 監(jiān)聽錯誤事件
      recognition.onerror = function (event) {
        that.isListening = false;
        that.$message("監(jiān)聽語音失敗:"+event.error);
        console.error(event.error);
      };
      // 監(jiān)聽結(jié)束事件（包括識別成功、識別錯誤和用戶停止）
      recognition.onend = function () {
        that.isListening = false;
        console.log("語音識別停止");
      };
    },
    goBack() {
      this.$router.push({ path: "/entry" })
    }
  }
}
</script>

文字轉(zhuǎn)語音

界面

<template>
  <div>
    <el-page-header @back="goBack" content="文字轉(zhuǎn)語音"/>
    <div class="bank"></div>
    <el-card header="文字轉(zhuǎn)語音">
      <el-input
        id="word"
        type="textarea"
        placeholder="請輸入文本"
        v-model="word"
        maxlength="300"
        rows="4"
        show-word-limit
      >
      </el-input>
      <div class="bank"></div>
      <el-card>
        <el-button @click="changeToAudio" type="primary">轉(zhuǎn)為語音</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
          <el-button @click="pause" type="warning">暫停</el-button>
          <el-button @click="resume" type="success">繼續(xù)</el-button>
          <el-button @click="cancel" type="info">取消</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
        <el-button @click="getvoice" type="primary">獲取語音合成數(shù)據(jù)(F12)</el-button>
      </el-card>
    </el-card>
  </div>
</template>

邏輯

<script>
export default {
  name: "WordToAudio",
  data() {
    return {
      word: "",
      isPaused: false, // 判斷是否暫停
    }
  },
  methods: {
    // 選
    changeToAudio() {
      if (!this.word) {
        this.$message("請輸入文本");
        return;
      }
      if (this.isPaused) {
        this.$message("當前語音已暫停,請點擊繼續(xù)!");
        return;
      } else if (window.speechSynthesis.speaking) {
        this.$message("當前已有正在播放的語音!");
        return;
      }
      // 為了防止在暫停狀態(tài)下轉(zhuǎn)語音，調(diào)用前設置繼續(xù)播放
      window.speechSynthesis.resume();
      // 設置播放
      var textArea = document.getElementById('word');
      var range = document.createRange();
      range.selectNodeContents(textArea);
      var speech = new SpeechSynthesisUtterance();
      speech.text = this.word; // 內(nèi)容
      speech.lang = "zh-cn"; // 語言
      speech.voiceURI = "Microsoft Huihui - Chinese (Simplified, PRC)"; // 聲音和服務
      // eslint-disable-next-line no-irregular-whitespace
      speech.volume = 0.7; // 聲音的音量區(qū)間范圍是??0???到??1默認是??1??
      // eslint-disable-next-line no-irregular-whitespace
      speech.rate = 1; // 語速，數(shù)值，默認值是??1???，范圍是??0.1???到??10???，表示語速的倍數(shù)，例如??2??表示正常語速的兩倍
      // eslint-disable-next-line no-irregular-whitespace
      speech.pitch = 1; // 表示說話的音高，數(shù)值，范圍從??0???（最?。┑??2???（最大）。默認值為??1??。
      window.speechSynthesis.speak(speech);
      var highlight = document.createElement('span');
      highlight.style.backgroundColor = 'red';
      range.surroundContents(highlight);
    },
    // 暫停
    pause() {
      this.isPaused = true;
      window.speechSynthesis.pause();
    },
    // 繼續(xù)
    resume() {
      this.isPaused = false;
      window.speechSynthesis.resume();
    },
    // 取消
    cancel() {
      window.speechSynthesis.cancel();
    },
    getvoice() {
      console.log(window.speechSynthesis.getVoices());
    },
    goBack() { 
      this.$router.push({path: "/entry"})
    }
  }
}
</script>
<style>
.bank {
  padding: 10px;
}
</style>

git鏈接

WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)git