基于JS實現(xiàn)文字轉(zhuǎn)語音即文本朗讀

更新時間：2023年10月20日 10:32:34 作者：itclanCoder

這篇文章主要為大家詳細介紹了JavaScript如何利用SpeechSynthesis實現(xiàn)文字轉(zhuǎn)語音即文本朗讀的功能,感興趣的小伙伴可以跟隨小編一起學習一下

前言

平時在做項目的過程中，有遇到場景是客戶要求播放語音的場景，比如:無障礙朗讀,整篇文章實現(xiàn)朗讀,文字轉(zhuǎn)語音,文字轉(zhuǎn)語音播放等等。

在不使用第三方API接口的情況下,這里需要js來實現(xiàn)文字轉(zhuǎn)語音播放的功能。能想到的也就是利用html5的個API：SpeechSynthesis。

SpeechSynthesis用于將指定文字合成為對應的語音.也包含一些配置項,指定如何去閱讀(語言,音量,音調(diào))等等

SpeechSynthesis實例對象屬性

lang 獲取并設置話語的語言
pitch 獲取并設置話語的音調(diào)(值越大越尖銳,越低越低沉)
rate 獲取并設置說話的速度(值越大語速越快,越小語速越慢)
text 獲取并設置說話時的文本
voice 獲取并設置說話的聲音
volume 獲取并設置說話的音量

SpeechSynthesis方法

speak() 將對應的實例添加到語音隊列中
cancel() 刪除隊列中所有的語音.如果正在播放,則直接停止
pause()暫停語音
resume() 恢復暫停的語音
getVoices 獲取支持的語言數(shù)組. 注意:必須添加在voiceschanged事件中才能生效

實例對象中的方法

onstart – 語音合成開始時候的回調(diào)。
onpause – 語音合成暫停時候的回調(diào)。
onresume – 語音合成重新開始時候的回調(diào)。
onend – 語音合成結(jié)束時候的回調(diào)

簡單實現(xiàn)

如果想讓瀏覽器讀出“書以啟智,技于謀生,活出斜杠”的聲音，可以下面的js代碼：

let utterThis = new SpeechSynthesisUtterance('書以啟智,技于謀生,活出斜杠');
speechSynthesis.speak(utterThis);

實現(xiàn)這個語音朗讀,需要用構(gòu)造器函數(shù)SpeechSynthesisUtterance方法,實例對象下,調(diào)用speak方法,即可實現(xiàn)語音的播報

除了使用speak方法，我們還可以實例對象屬性text，因此上面的代碼也可以寫成

let utterThis = new SpeechSynthesisUtterance();
utterThis.text = '書以啟智,技于謀生,活出斜杠';
utterThis.lang = 'en-US';//漢語
utterThis.rate = 0.7;//語速
speechSynthesis.speak(utterThis);

具體實例代碼

<template>
    <div class="speech-wrap">
       <div>
            <span class="demonstration">音量</span>
            <el-slider @input="handleVoinceInput" v-model="voinceValue"  vertical height="200px"></el-slider>
       </div>
       <div>
             <el-input class="inseret-input" clearable placeholder="請輸入內(nèi)容" v-model="input"></el-input>
             <el-select @change="handleSelectChange" v-model="selectVal" slot="prepend" placeholder="請選擇語言">
                 <el-option label="zh-CN" value="zh-CN"></el-option>
                 <el-option label="en-US" value="en-US"></el-option>
            </el-select>
            <el-button slot="append" @click="handleTransYuYin">轉(zhuǎn)語音</el-button>
            <el-button  @click="handleStopYuYin">暫停</el-button>
            <el-button  @click="handleHuiFuYuYin">恢復</el-button>
       </div>  
    </div>
 </template>
 <script>
 export default {
     name: 'speechSynthesisUtterance',
     data() {
         return {
             input: '書以啟智,技于謀生,活出斜杠',
             voinceValue: 30,
             selectVal: 'zh-CN',
         }
     },
 
     methods: {
         handleTransYuYin() {
            if(this.input) {
                let msg = new SpeechSynthesisUtterance(this.input);
                msg.volume = this.voinceValue;
                msg.rate = this.voinceValue;
                msg.pitch = this.voinceValue;
                this.throttle(window.speechSynthesis.speak(msg),2000);
            }else {
                this.$message.error('輸入框內(nèi)容不能為空');
            }
           
         },

 
         handleVoinceInput(val) {
             this.voinceValue = val;
         },
 
          handleSelectChange(val) {
             this.selectVal = val;
          },
 
          handleStopYuYin() {
              window.speechSynthesis.pause();
          },

          handleHuiFuYuYin() {
            window.speechSynthesis.resume();
          },
 
          throttle(fn,delay) {
             let last = 0
             return function() {
                 const now = new Date()
                 if(now - last > delay) {
                     fn.apply(this,arguments)
                     last = now
                 }
             }
         }  
         
     }
 }
 </script>
 <style scoped>
 .speech-wrap {
    display:flex;
    justify-content:start;
    align-items: center;
    
 }

 .speech-wrap .inseret-input {
    width: 400px;
 }
 </style>

window.speechSynthesis來創(chuàng)建語音,xxx.volume 獲取并設置說話的音量,xxx.rate 獲取并設置說話的速度(值越大語速越快,越小語速越慢),xxx.pitch 獲取并設置話語的音調(diào)(值越大越尖銳,越低越低沉)

window.speechSynthesis.speak(msg) 播放語音,msg 是一個SpeechSynthesisUtterance對象,msg.text 設置要播放的話, msg.lang 設置語言,msg.volume 設置音量,msg.rate 設置語速,msg.pitch 設置音調(diào)

上面使用了throttle函數(shù)來限制播放的頻率,防止播放過快,導致瀏覽器卡頓

如果不使用接口的方式,在項目中加入文本轉(zhuǎn)語音,可以用這種方式實現(xiàn),但是要注意兼容性問題,這個API是不兼容IE瀏覽器的

到此這篇關(guān)于基于JS實現(xiàn)文字轉(zhuǎn)語音即文本朗讀的文章就介紹到這了,更多相關(guān)JS文字轉(zhuǎn)語音內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: