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