vue2中前端實現(xiàn)語音播報的詳細過程
更新時間：2024年07月24日 14:41:33 作者：李析鳶
vue中語音播報,目前本人寫的過程中,遇到了兩種情況,第一種是后端直接返回一個mp3的播放url,第二種就是播報的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說一下如何實現(xiàn),感興趣的朋友一起看看吧
一、播報情況說明
vue中語音播報，目前本人寫的過程中，遇到了兩種情況，第一種是后端直接返回一個mp3的播放url，第二種就是播報的內(nèi)容需要前端自己拼接的，關(guān)于兩種方法，我都說一下如何實現(xiàn)
1、后端直接返回mp3播放的url，
從后端拿到的url，以后，可以直接使用new Audio來創(chuàng)建，以下是我的代碼，這樣寫就可以直接播報了
// 這里的OPERATION_BASE_URL，是我的項目基地址
// alarmAudioUrl是后端返回的語音url地址
let AlarmAudioUrl = OPERATION_BASE_URL + "/" + alarmAudioUrl;
let mp3 = new Audio(AlarmAudioUrl);
mp3.play();
let times = undefined;
mp3.oncanplay = () => {
times = mp3.duration;
};2、前端自己拼接文字信息來播報
語音播報的文字是前端自己拼接的，此時就要用另一種方法，貼上我的代碼，我就自己重新開一個項目demo，
<template>
<div>
<button @click="playVoice">播放語音</button>
</div>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
data() {
return {
message :'小朋友，你是否有很多問號,hhhhhhhhhhhhhhhhhhhhhh'
};
},
methods: {
playVoice() {
// message 假設(shè)message是你拼接好的文本信息
this.handleSpeak(this.message ); // 傳入需要播放的文字
},
// 語音播報的函數(shù)
// 比如你從后端接收完數(shù)據(jù)，并且自己拼接好以后，就可以直接調(diào)這個方法，傳入你的文本，就可以播放了
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); // 播放
},
},
};
</script>到此這篇關(guān)于vue2中前端實現(xiàn)語音播報的詳細過程的文章就介紹到這了,更多相關(guān)vue語音播報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了前端Vue項目詳解--初始化及導(dǎo)航欄,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了如何在前端和后端實現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
本文主要介紹了Element-UI清空表單及驗證不生效的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了vue2中引用better-scroll和使用 better-scroll的方法，使用時有三個要點及注意事項在文中給大家詳細介紹 ,需要的朋友可以參考下2018-11-11
在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3使用路由VueRouter4的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
下面小編就為大家分享一篇vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準(zhǔn)備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
unplugin-vue-components解決命名沖突問題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue源碼解析之?dāng)?shù)組變異的實現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12