vue2中前端實現(xiàn)語音播報的詳細(xì)過程
一、播報情況說明
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)語音播報的詳細(xì)過程的文章就介紹到這了,更多相關(guān)vue語音播報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端使用vue點擊上傳文件傳送給后端并進(jìn)行文件接收的方法
這篇文章主要介紹了如何在前端和后端實現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解
這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
下面小編就為大家分享一篇vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進(jìn)行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準(zhǔn)備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01unplugin-vue-components解決命名沖突問題
這篇文章主要介紹了unplugin-vue-components解決命名沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue源碼解析之?dāng)?shù)組變異的實現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12