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

需求

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

遇到问题

富文本编辑插入的音乐，可以通过控制台查看到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的跨域请求方式拿到数据

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

思路

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