vue2中前端實(shí)現(xiàn)語音播報的詳細(xì)過程
更新時間：2024年07月24日 14:41:33 作者：李析鳶
vue中語音播報,目前本人寫的過程中,遇到了兩種情況,第一種是后端直接返回一個mp3的播放url,第二種就是播報的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說一下如何實(shí)現(xiàn),感興趣的朋友一起看看吧
一、播報情況說明
vue中語音播報，目前本人寫的過程中，遇到了兩種情況，第一種是后端直接返回一個mp3的播放url，第二種就是播報的內(nèi)容需要前端自己拼接的，關(guān)于兩種方法，我都說一下如何實(shí)現(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中前端實(shí)現(xiàn)語音播報的詳細(xì)過程的文章就介紹到這了,更多相關(guān)vue語音播報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中axios的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
SM4是一種對稱加密算法,類似于AES,主要用于數(shù)據(jù)的批量加密,如文件加密、數(shù)據(jù)庫加密、網(wǎng)絡(luò)通信數(shù)據(jù)加密等,這篇文章主要給大家介紹了關(guān)于前端vue2使用國密SM4進(jìn)行加密、解密的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解基于Vue，Nginx的前后端不分離部署教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)
本文主要介紹了vue中el-table實(shí)現(xiàn)穿梭框(數(shù)據(jù)可以上移下移)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
在Vue3中實(shí)現(xiàn)一個自定義的v-html組件方式
文章介紹了Vue.js中的v-html指令及其潛在的安全風(fēng)險,然后通過DOMParser實(shí)現(xiàn)了一個自定義的v-html組件,以提高安全性并避免XSS攻擊2025-11-11
vue+axios實(shí)現(xiàn)文件上傳的實(shí)時進(jìn)度條
最近用vue寫上傳的時候,遇到一個需求就是頁面上展示上傳的進(jìn)度條,之后寫過一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來完成這個小需求,感興趣的朋友可以參考下2024-01-01
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
vue+element項目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項目中過濾輸入框特殊字符小結(jié)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08