VUE 文字轉(zhuǎn)語音播放的實現(xiàn)示例
更新時間：2022年02月17日 15:16:15 作者：laiwenhuajava
本文主要介紹了VUE 文字轉(zhuǎn)語音播放的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、技術(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)文章
前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個項目中我們經(jīng)常需要使用多個圖表，選擇封裝ECharts組件復(fù)用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文2023-04-04
vue項目退出登錄清除store數(shù)據(jù)的三種方法
最近使用vue做用戶的登錄/退出,在開發(fā)過程中遇到的一些問題,記錄下來,下面這篇文章主要給大家介紹了關(guān)于vue項目退出登錄清除store數(shù)據(jù)的三種方法,需要的朋友可以參考下2022-09-09
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue和React組件之間的傳值方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
本篇文章主要介紹了談?wù)刅ue.js——vue-resource全攻略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
百度了好久都沒辦法實現(xiàn)vue中一個頁面跳到另一個頁面，甚至到google上搜索也是沒辦法的，最終還是找了高人親自指導(dǎo)，所以下面這篇文章主要給大家介紹了關(guān)于Vue頁面跳轉(zhuǎn)動畫效果的實現(xiàn)方法，需要的朋友可以參考下2018-09-09
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
本文主要介紹了element合并表格行的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue使用swiper插件實現(xiàn)輪播圖的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
elementui中el-row的el-col排列混亂問題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08