vue2中前端实现语音播报的详细过程
更新时间：2024年07月24日 14:41:33 作者：李析鸢
vue中语音播报,目前本人写的过程中,遇到了两种情况,第一种是后端直接返回一个mp3的播放url,第二种就是播报的内容需要前端自己拼接的,关于两种方法,我都说一下如何实现,感兴趣的朋友一起看看吧
一、播报情况说明
vue中语音播报，目前本人写的过程中，遇到了两种情况，第一种是后端直接返回一个mp3的播放url，第二种就是播报的内容需要前端自己拼接的，关于两种方法，我都说一下如何实现
1、后端直接返回mp3播放的url，
从后端拿到的url，以后，可以直接使用new Audio来创建，以下是我的代码，这样写就可以直接播报了
// 这里的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 假设message是你拼接好的文本信息
this.handleSpeak(this.message ); // 传入需要播放的文字
},
// 语音播报的函数
// 比如你从后端接收完数据，并且自己拼接好以后，就可以直接调这个方法，传入你的文本，就可以播放了
handleSpeak(text) {
msg.text = text; // 文字内容: 小朋友，你是否有很多问号
msg.lang = 'zh-CN'; // 使用的语言:中文
msg.volume = 1; // 声音音量：1
msg.rate = 1; // 语速：1
msg.pitch = 1; // 音高：1
synth.speak(msg); // 播放
},
},
};
</script>到此这篇关于vue2中前端实现语音播报的详细过程的文章就介绍到这了,更多相关vue语音播报内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了如何在前端和后端实现文件传输,前端使用Vue.js发送文件,后端使用Java接收文件并处理,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
Vue数据与事件绑定以及Class和Style的绑定详细讲解
这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
本文主要介绍了Element-UI清空表单及验证不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法，使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下2018-11-11
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue中ElementUI结合transform使用时弹框定位不准确问题解析
在近期开发中,需要将1920*1080放到更大像素大屏上演示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置,本文给大家分享Vue中ElementUI结合transform使用时弹框定位不准确解决方法,感兴趣的朋友一起看看吧2024-01-01
unplugin-vue-components解决命名冲突问题
这篇文章主要介绍了unplugin-vue-components解决命名冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue源码解析之数组变异的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论