vue3+ts 实现语音播报功能

最新推荐文章于 2024-04-09 15:57:38 发布
最新推荐文章于 2024-04-09 15:57:38 发布
阅读量327 收藏
点赞数
文章标签： vue 语音识别 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breakwhile2/article/details/133015709
版权

vue3+ts 实现语音播报功能，使用浏览器内置功能即可实现语音播报功能

function voicePrompt (text:any){

    speechSynthesis.speak(new SpeechSynthesisUtterance("你有新的订单注意查收"));

}

breakwhile2
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
随笔：web端app端实现订单实时语言提醒
guailegeguai的博客
10-23 674
web端app端实现订单实时语言提醒详解
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
WebSocket加入心跳包防止自动断开连接
weixin_30535043的博客
08-07 246
var userId=$("#userId").val(); var lockReconnect = false; //避免ws重复连接 var ws = null; // 判断当前浏览器是否支持WebSocket var wsUrl = serverConfig.cyberhouse_ws+userId; createWebSocket(wsUrl); ...
Vue3实现语音通报功能
weixin_56882342的博客
07-31 680
Vue3实现语音通报功能。
vue实现多条通知公告循环播报
最新发布
weixin_43588711的博客
04-09 839
vue实现大屏下方通知公告本篇文章需要实现，上一条播报结束后，下一条通知再播报，而不是拼接为一串通知播报。首先我们需要一个定时器来控制当前消息的向左平移样式，然后我们需要一个偏移的变量offset，给offset一个初始值，初始值就是当前container容器的宽度，通过一个固定的速度speed，作为定时器的间隔时间，每个间隔时间，向左平移step的距离。然后判断当前偏移位置是否全部播报完成，如果播报完成，则重置我们的偏移变量offset。一、实现步骤。
Vue 语音播报--消息提醒
qq_36437172的博客
07-13 3421
需求：传入文字信息，可以语音播报文字内容。 比如： 饿了么的接单信息：你有新的订单，请注意查收！ 百度TTS参数说明： lan=zh：语言是中文，如果改为lan=en，则语言是英文。 ie=UTF-8：文字格式。 spd=2：语速，可以是1-9的数字，数字越大，语速越快。 text=**：这个就是你要转换的文字。 speckText(str) { var url= "http://tt...
Vue语音播报，不用安装任何包和插件，直接调用。
程序研博客
11-30 2985
Vue语音提示功能可以通过使用浏览器提供的Web Speech API来实现。这个API允许你的应用程序通过浏览器朗读文本，不用安装任何包和插件，直接调用。
vue 文字转语音播报 （SpeechSynthesisUtterance）
wang993828743的博客
05-29 8692
首先我们要在引入的地方写这一段代码 const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(); 其次在我们要在methods里写两个函数 // 语音播报的函数 /** * text – 要合成的文字内容，字符串 * lang – 使用的语言，字符串， 例如：“zh-cn” * voiceURI – 指定希望使用的声音和服务，字符串 * volume – 声音的音量，区间范围是0到1，默认是1 * ra
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
本文将深入探讨如何利用Vue3和ts实现一个具备drag/draggable功能的拖拽任务看板（Taskboard），同时提及与之相关的Gantt图表和JSON编辑器。 首先，Vue3引入了Composition API，它极大地提高了代码的可重用性和可...
vue3+ts入门（todolist案例）
02-10
- **使用 Vue3 的脚手架工具**：Vue CLI 提供了生成 Vue3 组件和项目模板的功能，简化开发流程。 5. **部署与测试**： - **本地开发**：使用 Vue CLI 的 `serve` 命令启动本地开发服务器，实时预览应用。 - **...
vue3+ts+echarts实现echarts封装
08-01
本文将详细介绍如何在Vue3项目中结合TypeScript和ECharts进行高级封装，以实现更便捷、高效的图表使用。 首先，我们需要安装相关依赖。在Vue3项目中，通常使用npm或yarn进行包管理。运行以下命令来安装Vue3、...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
(vue)vue项目实现语音播报
nyf_unknow的博客
07-10 3330
在 Vue 项目中，你可以使用 Web Speech API 中的 SpeechSynthesis 接口来实现文本内容的自动朗读。
vue3中使用speak-tts插件进行语音播报
一个超爱喝可乐的web前端攻城狮
06-27 3875
vue3中使用speak-tts插件进行语音播报
vue3 语音播报流程
m0_61382303的博客
11-29 550
npm 安装 "speak-tts": "^2.0.8",
vue实现语音播报功能
markkr133的博客
09-14 2396
1,创建一个js文件 （voicePrompt.js） function voicePrompt (text){ new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=' + text).play(); } export { voicePrompt } 　2在min.js import * as voicePromptFun from '.
VUE 文字转语音播放的实现示例（亲测好用）
qq_32555123的博客
05-14 3401
三、vue项目案例 <template> <button @click="playVoice">播放语音</button> </template> <script> const synth = window.speechSynthesis; const msg = new SpeechSynthesisUtterance(); export default { data() { return {}; },
vue实现语音播报
热门推荐
xiaoququ的博客
12-09 1万+
使用百度语音解析 新建utils/voice.js文件 function voicePrompt (text) { new Audio('https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=2&pdt=301&vol=9&rate=32&per=4&tex=' + text).play() } export { voicePrompt } main.js注册原型 // 语音提
vue中播放消息提示报警音
willsoooo的博客
07-18 2582
有时候我们在项目中需要自动报警提示音或者语音提示音，在新版本的浏览器中，edge浏览器和谷歌浏览器需要在设置中打开相关声音权限edge浏览器 设置-搜索所有权限-找到自动播放- 控制是否自动播放网站上的音频及视频 打开允许谷歌浏览器 设置-隐私和安全-网站设置-声音 允许},或者我们在vue的data中创建一个Audio对象然后在方法中使用},
electron + vite + vue3+ ts 实现右键菜单功能
05-17
首先需要安装一些依赖： ```bash npm install electron electron-context-menu vite vue@next vue-router@next @vue/compiler-sfc typescript tslib --save-dev ``` 然后在 `src` 目录下新建 `main.ts` 和 `renderer.ts` 两个文件。 `main.ts` 的内容如下： ```ts import { app, BrowserWindow, Menu } from 'electron'; import path from 'path'; import contextMenu from 'electron-context-menu'; // 创建窗口 function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 允许使用 node.js nodeIntegration: true, // 允许使用 Electron 的 remote 模块 enableRemoteModule: true, // 允许在渲染进程中使用上下文菜单 contextIsolation: false, }, }); // 加载页面 win.loadFile(path.join(__dirname, '../renderer/index.html')); // 打开开发者工具 win.webContents.openDevTools(); // 设置窗口菜单 const template = [ { label: '菜单1', submenu: [ { label: '子菜单1', click: () => { console.log('点击了子菜单1'); }, }, { label: '子菜单2', click: () => { console.log('点击了子菜单2'); }, }, ], }, { label: '菜单2', click: () => { console.log('点击了菜单2'); }, }, ]; const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu); } // 当 Electron 初始化完成并准备好创建窗口时调用这个函数 app.whenReady().then(() => { // 注册上下文菜单 contextMenu({ window: BrowserWindow.getFocusedWindow(), showInspectElement: true, }); createWindow(); // 如果所有窗口都关闭了，退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); }); // 在 macOS 上，当单击 Dock 图标并且没有其他窗口打开时，重新创建一个窗口 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` `renderer.ts` 的内容如下： ```ts import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 接下来在 `src` 目录下新建 `index.html` 文件，并且在里面添加一个 `div` 元素，并且指定它的 `id` 为 `app`。同时在 `body` 元素下添加如下代码： ```html <script src="./renderer.js"></script> ``` 最后在 `package.json` 中添加如下脚本： ```json { "scripts": { "start": "vite", "build": "vite build", "electron": "electron ." } } ``` 现在可以运行 `npm run start` 来启动应用程序，然后运行 `npm run electron` 来启动 Electron 应用程序。现在你应该已经能够看到一个 Electron 窗口，并且它包含一个菜单。如果你右键单击窗口，你应该能够看到一个上下文菜单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值