vue pc端发送语音聊天

最新推荐文章于 2025-03-21 11:49:35 发布

童话镇里没童话

最新推荐文章于 2025-03-21 11:49:35 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_24790575/article/details/106259702

版权

本文介绍了如何在Vue.js项目中实现PC端的语音聊天功能，通过使用recorderx库进行录音，详细讲解了从安装依赖、获取麦克风权限到监听鼠标事件实现开始和结束录音，以及如何正确上传录音文件的整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装依赖
npm install recorderx --sava
这个包是用的recorder.js封装的基于h5的录音功能
第二步页面引入

import Recorderx, {
    ENCODE_TYPE } from "recorderx";
const rc = new Recorderx();

第三步pc端鼠标撒手没效果
1.获取麦克风权限
这时候要手动开始录音调用麦克风获取权限，同意后默认开始录音，这时候要手动暂停录音，然后清除这次录音。

rc.start().then(() => {
   
                rc.pause();
                rc.clear()
                this.audioaccet = true
                this.$message({
   
                    message: "获取麦克风成功",
                    type:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

童话镇里没童话

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue实现类似微信按住发送语音包给后端，推荐使用插件js-audio-recorder

swagLi的博客

06-13

1072

一、需求是点击发送按钮说话获取语音文件发送给后台、鼠标移除即发送，限制时长30s。

Vue实现PC端录音功能

02-22

1.前端实现PC浏览器录音已经播放功能 2.vue-record

1 条评论您还未登录，请先登录后发表或查看评论

vue3之写一个aichat---已聊天组件AI助手消息复制和文字转语音播放

最新发布

weixin_43641912的博客

03-21

934

复制内容实现很简单，创建一个textarea标签，将textArea的值设为要复制的内容，document.execCommand(‘copy’)执行复制操作，尝试将选中的文本复制到剪切板，如果操作成功返回true，否则返回false。AudioContext 是Web Audio API的核心组件之一，它提供了一个强大的、模块化的且基于可复用组件的系统来合成音频，通过AudioContext ，开发者可以在网页或应用中创建、控制以及处理音频资源。请求中断在用户取消操作或需要理解停止的转换的时候有用。

vue实现与安卓、IOS交互

weixin_34293246的博客

11-01

426

方案背景 IOS用的是jsBridge插件实现调用、传参、回调的安卓是在window挂载方法和挂载回调的 IOS实现方案调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { ...

Vue项目使用js-audio-recorder录音，通过WebSocket实时发送音频文件（语音识别）

qq_42875353的博客

12-15

8692

最近有个新需求，做一个语音识别的功能，将音频文件转为文字，识别完成后把文字返回到页面展示，最后使用js-audio-plugin + WebSocket实现纯js实现浏览器端录音。

vue3实现录音及发送等功能

yun_shuo的博客

08-25

1万+

vue3中实现录音发送等功能在vue项目中做聊天功能中涉及到语音发送功能,搭配js-audio-recorder插件的使用,能很好的帮助我们开发，下面是具体使用步骤。第一步 npm安装js-audio-recorder插件包 npm i js-audio-recorder 第二步在需要使用的组件中导入插件 import Recorder from 'js-audio-recorder' 第三步在setup中定义响应的方法 const data = reactive({ //用于存储创建的语

vue录音demo

07-27

vue在线录音程序。 1、npm install 2、npm run dev （https://localhost:8080） 3、npm run build

vue+web端仿微信网页版聊天室功能

10-17

【Vue+Web端仿微信网页版聊天室功能详解】在Web开发中，构建一个类似微信的聊天室功能是一项挑战，但也是提升技能的好机会。本文将深入探讨如何使用Vue.js框架来实现这样一个功能丰富的聊天室。我们将关注Vue的...

vue集成PC端融云音视频1对1聊天

李墨瞳的博客

03-30

3291

2月中下旬的时候，接到需要集成融云音视频的需求。一开始不知道怎么下手，毕竟去年我做的只是文字之间的聊天，并没有集成音视频。然后分为2部分考虑，第一部分是考虑样式，第二部分是考虑实现逻辑。 1.样式从样式开始，考虑到PC端，于是参考了微信的PC样式。从GitHub上找了一圈样式，终于找到比较满意的样式。放上链接：cdxofgithub的GitHub的这个地址。图片样式是这种。（截图压缩太厉害，...

vue3+elementPlus pc和小程序ai聊天文生图

01-26

"chatGTP_PC"这个文件名可能是项目中PC端聊天功能的实现部分，可能包含与聊天窗口、消息发送、接收、以及与后端服务器交互的相关代码。GTP（可能是“Generative Pre-trained Transformer”）通常与AI语言模型有关，...

腾讯实时语音视频TRTC与Vue的结合开发-PC端

qq_37947438的博客

09-23

5498

文章目录前言使用步骤1.引入依赖总结前言近日，由于公司业务需要实现一个实时的语音视频通话，想起了之前用过的腾讯的TRTC多人会议通话，于是把TRTC这一功能融合到系统中，我们系统用的vue进行开发，所以使用的是TRTC的web-sdk，即trtc-js-sdk。今天来给大家介绍一下如何在vue中使用它，在进行以下文章的内容学习之前我希望小伙伴们对Vue以及TRTC有相关的了解，Vue会简单的使用即可，TRTC则需要跑通Web版的demo，如果没跑过demo的话，大家可以点击这个链接[web-demo

WebSocket 录音并传递给后台

qq_36028348的博客

10-31

1060

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="ap.

vue 语音功能

anwenagululu的博客

10-18

1516

uni.createInnerAudioContext() | uni-app官网。插件的使用可以看另一篇文章。

使用vue和element组件实现语音的上传和播放功能

SqlloveSyn的博客

03-05

2412

如果有不需要的逻辑或其它东西可以进行删除，html里面也有一些多余的东西，不需要删除就可以了。大家好，今天和大家分享一下使用vue和element组件来实现语音上传和语音播放这个功能。我用到的也只有一个上传upload和音频audio。下面的代码没有必要说都写下来，看自己需要什么吧！其实上传音频其实和上传图片差不多。

聊天页面（vue、语音发送、websocket等）

weixin_43909743的博客

04-12

7331

// 语音组件 } }

基于VUE实现语音通话：实现音频的流式播放，即边接收语音数据边播放；边录边转发送语言消息、播放pcm 音频（解决pcm-player分片播放问题）

专注于计算机研发知识和资讯分享

11-15

1131

通过该系统，渔业安全管理人员在办工室即可远程控制电台基站，获取渔船实时位置，了解渔船作业状况，与渔船人员通讯交流，当渔船遇险紧急情况时，管理人员可获取报警渔船位置、频道等信息，可进行通话，并进一步的指挥救助，提高遇险渔民获救的几率。要调试 WebSocket，那就需要一个好的调试工具，这里我比较推荐 Apifox。FE (固定开头) 00 00 11(对应账户ID) 三个字节 FE 结束。登录返回: FE 01 FE = 成功, FE 00 FE = 失败。抓包推荐使用Wireshark。

vue-cli实现语音聊天

qq_40043424的博客

10-14

6887

效果如下，可能有点丑，但功能齐全… NPM npm install recorderx --sava 页面引用 import axios from 'axios' import Recorderx, { ENCODE_TYPE } from "recorderx"; const rc = new Recorderx(); 样式  &lt...

Lombok踩坑

ch的博客

10-12

448

Lombok对于第一个字母小写，第二个字母大写的属性生成的get-set方法和Mybatis以及idea或者说是Java官方认可的get-set方法生成的不一样: @Data public class NMetaVerify{ private NMetaType nMetaType; private Long id; } Lombok生成的Get-Set方法为 NMetaVerify nMetaVerify = new NMetaVerify(); //注意：nMetaType的set方法

vue websocket实现消息推送和语音提醒功能