公众号文章点击图片播放声音，是怎么做到的啊？
胖友们好，我是三儿。滴滴，明天就是周末了，三儿向你发起了一则语音通话，点击接听，来查收三儿的语音祝福。
很神奇有没有！明明只是一张图片，文章里也没有插入任何音乐，但是点击图片之后，就有声音了。
这种效果光听描述就觉得很黑科技了，甚至有人说这种效果需要敲代码，需要花钱定制。
No no no，用SVG编辑器这种好东西，做点击图片播放声音的效果，真的很简单！
三儿给大家总结了一下，其实大致上就三步，打开SVG编辑器，往组件里放图片放音频，最后保存同步到微信就完了。
尤其SVG编辑器更新之后，操作就变得更简单了，话不多说，具体的操作步骤三儿还是要来跟大家演示一下的：
图片、音频准备
准备一张图片，最好在图片中加入引导点击的文字或者按钮，来引导读者点击。
准备一段音频，将音频上传到微信公众号的素材库中。
在公众号后台新建一篇文章，把你上传的音频插入到文章当中，并保存这篇文章；（注意：保存文章时需要先完善封面图和文章名）
在公众号的草稿箱找到并打开这篇文章的预览页面，在网页的网址栏复制这篇文章的网址（点击文章的标题就可以打开）
进入SVG编辑器
通过135编辑器左侧入口进入svg编辑器；
或者直接在浏览器输入svg编辑器网址进入：
https://www.135editor.com/svgeditor/
添加音频海报组件
在【效果中心-音频】分类下，找到【音频海报（宽屏/窄屏）】组件或者搜索ID：41、42，点击将组件添加到编辑区域
上传图片、音频
在封面图的位置，点击【添加图片】，上传我们准备好的图片；
在音频代码的位置，点击【一键获取代码】，将我们在第一步准备工作中复制来的带有音频的文章预览链接，粘贴到输入栏中；
音频获取完成后，点击【立即使用】即可。（注意，配置完所有图片和音频素材之后，中间编辑区域的组件才会正常显示）
点击红色的方块，可以设置触发热区的大小和区域。热区就是点击触发音频播放的区域，在热区外点击图片是不会播放的。
由于音频素材的特殊性，预览时无法查看素材效果，需要保存到微信后台预览真实效果。
导出/同步到微信
制作好的音频海报，可以通过导出/同步两种方式，保存到微信公众号。具体操作根据系统提示完成即可。
以上就是制作一个点击图片，播放声音的完整操作教程了。在SVG编辑器中，这种音频海报的效果延伸出了更多的玩法，比如和点击换图、点击展开等其他效果进行组合：
点击换图展开同时播放音频-自定义触发
玩法多多，大家可以尽情发挥创意，赶快去试试吧！
·END·
文章排版由135编辑器提供技术支持
■ ■ ■ ■
立即登录
