快捷導(dǎo)航

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

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

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

前言

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

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

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

SpeechSynthesis實(shí)例對(duì)象屬性

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

SpeechSynthesis方法

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

實(shí)例對(duì)象中的方法

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

簡(jiǎn)單實(shí)現(xiàn)

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

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

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

除了使用speak方法，我們還可以實(shí)例對(duì)象屬性text，因此上面的代碼也可以寫(xiě)成

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

具體實(shí)例代碼

<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="請(qǐng)輸入內(nèi)容" v-model="input"></el-input>
             <el-select @change="handleSelectChange" v-model="selectVal" slot="prepend" placeholder="請(qǐng)選擇語(yǔ)言">
                 <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)語(yǔ)音</el-button>
            <el-button  @click="handleStopYuYin">暫停</el-button>
            <el-button  @click="handleHuiFuYuYin">恢復(fù)</el-button>
       </div>  
    </div>
 </template>
 <script>
 export default {
     name: 'speechSynthesisUtterance',
     data() {
         return {
             input: '書(shū)以啟智,技于謀生,活出斜杠',
             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來(lái)創(chuàng)建語(yǔ)音,xxx.volume 獲取并設(shè)置說(shuō)話的音量,xxx.rate 獲取并設(shè)置說(shuō)話的速度(值越大語(yǔ)速越快,越小語(yǔ)速越慢),xxx.pitch 獲取并設(shè)置話語(yǔ)的音調(diào)(值越大越尖銳,越低越低沉)

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

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

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

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

您可能感興趣的文章: