微信语音在网页端播放
做的一个项目,需要个功能,微信公众号里点菜单进去一个网页后能和后台客服人员在线聊天,而且还能发送语音,
后台客服人员在电脑PC端上登录网页也能和用户进行在线聊天,并且能听到语音。
制作思路:
文字聊天功能用最简单的方式,客户聊天页/user/chat, 后台聊天页/admin/chat,数据库聊天表chat,
聊天页里文本框,发送按钮,点了就把文本框里的内容存到数据库聊天表中,
然后在聊天页用js的setinterval定时从数据库里取出数据显示;
发送语音功能,用户聊天是在微信里聊天的,可以使用微信的JSSDK来发送语音(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html),发送语音后会有个本地localid, 还需要用那个JSSDK里的上传方法上传到微信服务器上取得serverid,属于
临时素材,只能存储三天,发送按钮就把这个serverid存到数据库chat里,在用户聊天页上就可以直接调用JSSDK里的方法来播放语音;
相关JS代码:
后台聊天页从数据库取出Serverid,然后再用微信公众号开发文档里的获取临时素材接口(https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_temporary_materials.html)下载音频,下载到的是speex格式的,上网找了好久,才找到个speex格式转到wav格式的命令行工具,WIN下可用的,转为wav格式后就可以用h5的audio来播放音频了,这样就能在网页上听到声音了
JS代码:
后台代码:
speex格式转wav的工具,WIN下用的
http://image.niunan.net/spx2wav_win.zip
用自己写的微信helper,用于.net下的,core下的没试过,不知道能不能用
http://blog.niunan.net/blog/show/1278
相关推荐
网页页面类似于微信语音播放,点击像微信语音的语音条后,会播放语音,小喇叭会闪烁,然后再次点击,会重新播放,再语音条后面会显示语音的时长,如果需要资源,可以直接找我,不用分,我帮忙直接下载,资源不能直接...
在这个"html5仿微信聊天语音发送话筒录音动画特效.7z"压缩包中,我们可以看到一个实现微信聊天语音发送功能的实例,它包含了话筒录音动画效果,以及与之相关的源码和图片素材。 首先,这个特效的核心是利用HTML5的...
标题:“js仿微信语音播放实现思路”所涉及的知识点包括了在网页端使用JavaScript模拟微信的语音播放功能。这涉及到Web开发中的HTML5音频播放技术、JavaScript事件处理、DOM操作、以及CSS动画的应用。 描述中的关键...
但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用的工作,其实不然,随着Html5的发展,语音功能也渐渐成为前端必会的功能之一。 为什么要学会HTML5 的语音呢? 1.Html5 规范推进,手机的更新加速了操作...
【标题】:“h5+js+vue 模仿微信网页聊天界面” 【描述】:这个项目是使用HTML5、JavaScript和Vue.js框架构建的一个模仿微信PC端聊天窗口的界面。它实现了基本的功能,如用户输入文字后通过回车键发送消息,这为...
在微信网页录音中,用户可以在网页上录制语音,然后将其上传到服务器,或者下载已有的录音文件。以下是对这一技术的详细讲解: 1. WebRTC架构: - getUserMedia:这是WebRTC的核心API之一,用于获取用户的媒体输入...
微信录音功能主要应用于微信小程序或者通过微信浏览器访问的网页应用,它允许用户在本地进行录音并上传至服务器。下面将详细介绍这个过程中的关键知识点。 首先,我们要明白Vue.js是轻量级的前端框架,它提供了声明...
2. 电脑版微信语音教程:在教育场景中,可能需要教授如何在手机版微信中使用语音功能,因为这是网页版微信所不具备的。手机微信支持发送语音消息,用户只需长按麦克风图标并说话,然后松开即可发送语音。 3. 《品德...
在仿微信Web语音聊天程序中,WebRTC用于建立两端之间的音频流传输,确保语音清晰、即时。 其次,WebSocket协议也是必不可少的。与传统的HTTP协议不同,WebSocket提供了一个持久化的连接,允许双向通信。这意味着...
在文件名称“微信语音播报v1.8版”中,我们可以推测这是系统的核心组件,可能是专门设计用于微信支付的语音播报模块。版本号v1.8表明这是一个已经经过多次迭代和优化的软件,通常意味着它具有较高的稳定性和一定的...
【Vue+Web端仿微信网页版聊天室功能详解】 在Web开发中,构建一个类似微信的聊天室功能是一项挑战,但也是提升技能的好机会。本文将深入探讨如何使用Vue.js框架来实现这样一个功能丰富的聊天室。我们将关注Vue的...
微信JSSDK(JavaScript Software Development Kit)是微信官方推出的一款用于网页端的开发工具包,主要目的是方便开发者在网页上实现微信相关的功能,比如分享、支付、多媒体处理等。通过集成JSSDK,开发者可以更好...
支持私聊、群聊、离线消息、发送语音、图片、文件、emoji表情等功能支持音视频通话(基于webrtc实现,需要ssl证书)后端采用springboot+netty实现,网页端使用vue,移动端使用uniapp服务器支持集群化部署,每个im-...
此项目中的JS代码前台部分,开发者可以学习如何结合这些技术实现语音日记的录入、播放、编辑及管理功能。 3. **H5页面源码**: H5页面是基于HTML5标准的网页,可以与微信小程序相互配合,实现多平台兼容。在这里,...
而“IM-DEMO”则是专门针对微信小程序平台开发的一个即时通讯示例,它展示了如何在小程序环境中实现聊天、表情、语音、图片以及会话列表等常见IM功能。 1. **聊天功能**:这是IM的核心部分,IM-DEMO实现了用户之间...
在微信企业号的开发中,C#常用于构建服务器端的业务逻辑,处理微信服务器发送过来的HTTP请求,并返回相应的JSON数据进行交互。 1. **OAuth2.0授权**:源码中可能包含了OAuth2.0的实现,这是微信企业号获取用户授权...
ChatGPT近期以强大的对话和信息整合能力风靡全网,可以写代码、改论文、讲故事,几乎无所不能,这让人不禁有个大胆的想法,能否用他的对话模型把我们的微信打造成一个智能机器人,可以在与好友对话中给出意想不到的...
在本项目中,"青柚仿微信H5聊天系统"实现了即时通讯的核心功能,包括但不限于: 1. **登录注册**:用户可以通过账号密码或者第三方账号(如微信、QQ等)进行登录注册。 2. **好友系统**:添加、删除、搜索好友,...
微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行...
微信小程序是腾讯公司推出的一种轻量级应用形态,它介于传统App和网页之间,用户可以通过微信内置的浏览器打开和使用,无需通过应用商店下载安装。这种模式降低了用户的使用门槛,特别适合快速开发和推广服务。 该...