VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例
更新時(shí)間：2022年02月17日 15:16:15 作者：laiwenhuajava
本文主要介紹了VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、技術(shù)：Web Speech API
Web Speech API?? 使您能夠?qū)⒄Z(yǔ)音數(shù)據(jù)合并到 Web 應(yīng)用程序中。
Web Speech API 有兩個(gè)部分：SpeechSynthesis 語(yǔ)音合成 （文本到語(yǔ)音 TTS）和 SpeechRecognition 語(yǔ)音識(shí)別（異步語(yǔ)音識(shí)別）。
二、語(yǔ)音合成及發(fā)音接口
? ?SpeechSynthesis??：語(yǔ)音合成服務(wù)的控制器接口，可用于獲取設(shè)備上可用的合成語(yǔ)音，開(kāi)始、暫停以及其它相關(guān)命令的信息。
? ?SpeechSynthesisUtterance??：表示一次發(fā)音請(qǐng)求。其中包含了將由語(yǔ)音服務(wù)朗讀的內(nèi)容，以及如何朗讀它（例如：語(yǔ)種、音高、音量）。
三、vue項(xiàng)目案例
<template>
? ? <button @click="playVoice">播放語(yǔ)音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
? data() {
? ? return {};
? },
? methods: {
? ? playVoice() {
? ? ? this.handleSpeak('小朋友，你是否有很多問(wèn)號(hào)') // 傳入需要播放的文字
? ? },
? ? // 語(yǔ)音播報(bào)的函數(shù)
? ? handleSpeak(text) {
? ? ? msg.text = text; ? ? // 文字內(nèi)容: 小朋友，你是否有很多問(wèn)號(hào)
? ? ? msg.lang = "zh-CN"; ?// 使用的語(yǔ)言:中文
? ? ? msg.volume = 1; ? ? ?// 聲音音量：1
? ? ? msg.rate = 1; ? ? ? ?// 語(yǔ)速：1
? ? ? msg.pitch = 1; ? ? ? // 音高：1
? ? ? synth.speak(msg); ? ?// 播放
? ? },
? ? // 語(yǔ)音停止
? ? handleStop(e) {
? ? ? msg.text = e;
? ? ? msg.lang = "zh-CN";
? ? ? synth.cancel(msg);
? ? }
? }
};
</script>到此這篇關(guān)于VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)VUE 文字轉(zhuǎn)語(yǔ)音內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3如何解決slot深層透?jìng)鲉?wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue3使用v-if指令進(jìn)行條件渲染的實(shí)例代碼
條件渲染是根據(jù)條件的真假來(lái)有條件地渲染元素,在Vue.js 3.x中,常見(jiàn)的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進(jìn)行條件渲染,需要的朋友可以參考下2024-03-03
vue自定義表格列的實(shí)現(xiàn)過(guò)程記錄
這篇文章主要給大家介紹了關(guān)于vue自定義表格列的相關(guān)資料,表格組件在開(kāi)發(fā)中經(jīng)常會(huì)用到,文章通過(guò)示例代碼介紹的也很詳細(xì),需要的朋友可以參考下2021-06-06
vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06
利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能示例代碼
本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
sass是css的預(yù)處理器,擴(kuò)展了css語(yǔ)言,提供了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等特性,有助于減少CSS重復(fù)的代碼,節(jié)省開(kāi)發(fā)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于vue3安裝配置sass的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 組件注冊(cè)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue 組件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)整屏滾動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05