实现微信图文模板音乐播放问题，不走微信图文模板

需求

公众号管理走自己撸的一套图文模板，音乐地址无法播放

遇到问题

富文本编辑插入的音乐，可以通过控制台查看到audiourl播放地址

http://ws.stream.qqmusic.qq.com/C100003aAYrm3GE0Ac.m4a?fromtag=46（该音乐地址报403，无法访问）

那么如果自己的模板画一个类似的音乐播放器，那么就会卡在音乐无法播放问题。这里仅针对于编辑器插入的音乐资源均来自微信服务器这种情况。毕竟正常流程大家要走微信提供的模板，那么等用他们提供的音乐。其他的无效~

通过调试微信静态模板文件，再点击音乐播放时，它们会做一个音乐地址解析，拿到真正的音乐播放地址。

http://isure.stream.qqmusic.qq.com/C200003aAYrm3GE0Ac.m4a?guid=1034004351&vkey=932159B47165FC58B614CB96D5F963688C945C0F4F2BB2642D85CAD9B8987C8D5FCDA119BED83363392D29D7B10593A542B5B5E33430D5AC&uin=&fromtag=50&wxtag=003aAYrm3GE0Ac（该音乐地址能够访问）

可以发现地址转换时请求了解析接口
http://open.music.qq.com/fcgi-bin/fcg_music_get_song_info_weixin.fcg?song_id=718477&mid=001zMQr71F1Qo8&format=json&app_id=1034002693&app_key=cjjDaueOyPYRJFeTqG&device_id=weixin&file_type=mp3&qqmusic_fromtag=50&callback=get_song_info_back&t=0.1790840534477991

尝试了一下，song_id，mid改成crm服务端数据里音乐播放器的musicid和mid，在浏览器访问该地址，可以拿到真正的音乐播放地址，app_id和app_key这个数据暂无，不可缺少，目前固定使用（app_id=1034002693，app_key=cjjDaueOyPYRJFeTqG）。其它参数不变可以拿到数据。PS:试了一下，地址支持https协议~

跨域问题：从传参可以看到有一个callback参数以及接口返回结果格式，这里可以使用jsonp的跨域请求方式拿到数据

至此，微信下发图文走自己图文模板时正文内容音乐播放问题就解决了，至于为啥要自己折腾搞一个呢，也为了方便埋点，数据监测，统计数据。毕竟走微信提供的你不可能把代码逻辑加到他们提供的渲染模板文件里吧~

思路

编写自己的一套图文模板渲染文件
在插入富文本数据在正文内容中，将音乐相关的dom节点替换成自己画的音乐播放器。
点击播放时，通过jsonp跨域请求方式拿到真正播放地址，丢给radio标签。搞定~

实现微信图文模板音乐播放问题，不走微信图文模板相关推荐

可临摹学习的精致的音乐播放器界面设计ui模板
美观的音乐应用设计,你更喜欢哪一款设计?哪一个设计更具可用性? 音乐应用程序,可以简化您如何享受朋友策划的播放列表. 可临摹学习的精致的音乐播放器界面设计ui模板! PSD格式可编辑,利于临摹学习! ...
写一个音乐播放器的微信小程序
要创建一个音乐播放器的微信小程序,您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS). 具体来说,您需要做以下几件事: 设计音乐播放器的用户界面,并使用 WXML ...
微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
01. 微信小程序音乐播放器
项目简介最近在学微信小程序,所以打算做一个音乐播放器的微信小程序. 项目需求(原型图) 这个是我做的原型图,比较简陋(有些界面直接用了网易云音乐小程序的截图,因为是仿着网易云音乐来做的) 首页播放 ...
基于微信小程序音乐播放器
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...
（附源码）springboot+基于微信小程序音乐播放器的设计与实现毕业设计271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
springboot+基于微信小程序音乐播放器的设计与实现毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
java基于微信小程序音乐播放器分享系统 uniapp 小程序
音乐播放器小程序的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息 ...
树莓派-微信-网易云音乐播放器
发现一个很好的个人微信框架ItChat,基于Python实现了网页版微信的大部分功能,正好手头上有个闲置的树莓派,就做了个简易的音乐播放器,源码及使用教程都放在Github上了,猛戳这里,欢迎大家st ...

实现微信图文模板音乐播放问题，不走微信图文模板

需求

遇到问题

思路

实现微信图文模板音乐播放问题，不走微信图文模板相关推荐

最新文章

热门文章