微信公众号中保存用户发送的多媒体文件并进行查看、播放的方法

微信公众号中时常有用户发送文字、图片、语音、视频进行咨询,需要对信息进行回复。由于微信公众号管理后台中文字信息保留5天,其他类型的消息保留3天,消息过期后将无法查看、回复。开启微信公众号开发模式后,已经开发了进行微信公众号、微信用户管理的管理后台,希望把对用户信息的回复功能也加入到管理后台中,并长期保存用户发的消息及对用户的回复。

以上为需求背景,文字信息的保存查看比较简单,这里主要说明如何将用户发送的多媒体文件进行保存,并进行查看、播放。

难点:

  • 微信语音为amr格式,直接通过html播放器无法播放;

文件保存思路:

注意:多媒体文件为用户发送,可能涉及隐私,为了保证文件数据安全,需要将文件保存在网站根目录之外,即不能直接访问文件。

  • 获取用户发送消息的类型,MsgType;
  • 如果MsgType是image、voice、video、shortvideo,则为多媒体文件;
  • 获取多媒体消息体中的MediaId;
  • 根据MediaId通过接口获取多媒体文件;
  • 将多媒体文件保存在到服务器指定目录中;
  • 将文件路径信息放入微信消息体中,并保存数据库中;

管理后台获取多媒体文件思路:

  • 获取数据表中微信用户发送的消息;
  • 解析消息体,如果MsgType是image、voice、video、shortvideo,则为多媒体文件,则获取多媒体文件的保存路径;
  • 通过列表的形式显示用户发送的消息,如果是多媒体文件,则根据多媒体文件的文件类型显示图标,如语音显示MP3图标;
  • 通过点击列表中的文件类型图标,进行查看或播放,图片、视频另开窗口进行查看、播放,语音在当前页面播放。
  • 根据文件路径读取指定文件的内容,由于文件类型不同需要指定不同的http头信息,如语音文件为header(‘Content-Type:audio/amr-wb+’);
  • 图片、视频文件通过浏览器可以直接查看或播放,语音文件需要进行文件编码、解码,详见https://github.com/Gistiny/opencore-amr-js

详细代码

  • 保存多媒体文件

  • 查看多媒体文件

  • 引入js

  • 播放

 

页面效果

  • 管理后台消息列表页面

  • 视频播放效果

  • 图片查看页面