公众号文章点击图片播放声音,是怎么做到的啊?

胖友们好,我是三儿。滴滴,明天就是周末了,三儿向你发起了一则语音通话,点击接听,来查收三儿的语音祝福。

·

很神奇有没有!明明只是一张图片,文章里也没有插入任何音乐,但是点击图片之后,就有声音了。


这种效果光听描述就觉得很黑科技了,甚至有人说这种效果需要敲代码,需要花钱定制。


No no no,用SVG编辑器这种好东西,做点击图片播放声音的效果,真的很简单!


三儿给大家总结了一下,其实大致上就三步,打开SVG编辑器,往组件里放图片放音频,最后保存同步到微信就完了。


尤其SVG编辑器更新之后,操作就变得更简单了,话不多说,具体的操作步骤三儿还是要来跟大家演示一下的:


01

图片、音频准备

准备一张图片,最好在图片中加入引导点击的文字或者按钮,来引导读者点击。


准备一段音频,将音频上传到微信公众号的素材库中。



在公众号后台新建一篇文章,把你上传的音频插入到文章当中,并保存这篇文章;(注意:保存文章时需要先完善封面图和文章名)



在公众号的草稿箱找到并打开这篇文章的预览页面,在网页的网址栏复制这篇文章的网址(点击文章的标题就可以打开)





02

进入SVG编辑器


通过135编辑器左侧入口进入svg编辑器;



或者直接在浏览器输入svg编辑器网址进入:

https://www.135editor.com/svgeditor/


03

添加音频海报组件

在【效果中心-音频】分类下,找到【音频海报(宽屏/窄屏)】组件或者搜索ID:41、42,点击将组件添加到编辑区域



04

上传图片、音频

在封面图的位置,点击【添加图片】,上传我们准备好的图片;



在音频代码的位置,点击【一键获取代码】,将我们在第一步准备工作中复制来的带有音频的文章预览链接,粘贴到输入栏中;




音频获取完成后,点击【立即使用】即可。(注意,配置完所有图片和音频素材之后,中间编辑区域的组件才会正常显示)



点击红色的方块,可以设置触发热区的大小和区域。热区就是点击触发音频播放的区域,在热区外点击图片是不会播放的。



由于音频素材的特殊性,预览时无法查看素材效果,需要保存到微信后台预览真实效果。


05

导出/同步到微信

制作好的音频海报,可以通过导出/同步两种方式,保存到微信公众号。具体操作根据系统提示完成即可。



以上就是制作一个点击图片,播放声音的完整操作教程了。在SVG编辑器中,这种音频海报的效果延伸出了更多的玩法,比如和点击换图、点击展开等其他效果进行组合:


点击换图展开同时播放音频-自定义触发

点击展开同时播放音频-自定义触发

点击换图式音频海报-防误触(gif图)


玩法多多,大家可以尽情发挥创意,赶快去试试吧!



·EN

文章排版由135编辑器提供技术支持

 ■ ■ 


文章评价
登录后可以评论
立即登录
分享到