微信语音在网页端播放

简介:

微信语音在网页端播放

做的一个项目,需要个功能,微信公众号里点菜单进去一个网页后能和后台客服人员在线聊天,而且还能发送语音,
后台客服人员在电脑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代码:
1
2
3

后台聊天页从数据库取出Serverid,然后再用微信公众号开发文档里的获取临时素材接口(https://developers.weixin.qq.com/doc/offiaccount/Asset_Management/Get_temporary_materials.html)下载音频,下载到的是speex格式的,上网找了好久,才找到个speex格式转到wav格式的命令行工具,WIN下可用的,转为wav格式后就可以用h5的audio来播放音频了,这样就能在网页上听到声音了

JS代码:
4

后台代码:
5

speex格式转wav的工具,WIN下用的

http://image.niunan.net/spx2wav_win.zip

用自己写的微信helper,用于.net下的,core下的没试过,不知道能不能用
http://blog.niunan.net/blog/show/1278

目录
相关文章
|
小程序 API
微信小程序中音频播放
微信小程序中音频播放
634 0
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
2694 0
|
搜索推荐 Python
将微信聊天做成滚动视频,聊天记录滚动播放
Python实现滚动聊天记录视频制作教程
2297 0
|
小程序
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
|
机器人 API 语音技术
企业微信接收语音消息并自动回复
本文介绍如何在企业微信中通过应用机器人实现语音消息的自动回复。具体步骤包括:创建企业微信应用,获取AgentID和Secret;使用AppFlow模版创建连接流并配置鉴权凭证;选择语音识别模型和大模型应用(如通义系列)进行自动回复;配置企业微信应用接收消息API及可信IP;最后测试应用功能。通过这些步骤,用户可以高效地利用大模型技术提升企业微信的使用体验。
1999 3
|
监控 小程序 JavaScript
讯飞-微信小程序-语音助手
讯飞-微信小程序-语音助手
470 1
讯飞-微信小程序-语音助手
|
小程序 前端开发 算法
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
2893 0
|
Java C语言
Java微信语音amr格式转mp3格式
Java微信语音amr格式转mp3格式
|
XML JSON 数据安全/隐私保护
如何使用Fiddler抓取APP接口和微信授权网页源代码
Fiddler是一款强大的抓包工具,用于捕获HTTP/HTTPS流量,包括手机APP和微信授权页面的数据。下载安装Fiddler后,需设置电脑代理,如端口8888,并在手机上配置相同代理,确保两者在同一局域网。通过安装Fiddler证书,可解密HTTPS请求。在手机上打开目标应用或网页,Fiddler将显示请求详情,便于接口调试和数据查看。
1212 0
如何使用Fiddler抓取APP接口和微信授权网页源代码
|
前端开发
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!
一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!