不用音频，点击展开的 BGM 还能这样玩！

原创赞收藏评论

举报 2023-08-15

扫描,分享朋友圈

有一类 SVG 交互效果，相信大家屡见不鲜，无论是官媒大号，还是普通账号，都经常在推文开篇看见他的应用，那就是「点击展开」。
如何将「点击展开」玩出花样，从众多推文中脱颖而出呢？
不如加点音乐吧！

点击，BGM 起！

*素材来自谷粒多《谷粒多大暑佛系营业，大粒疗愈你的身心燥热》

组合：点击切换图片+播放音频+展开(以视频方式上传)

编号：11359（组合）

点击木鱼，展开的同时响起敲击木鱼声，既符合推文的主题「佛系」，又能增加读者的沉浸体验。
当然是不是也有细心的小伙伴发现了，谷粒多的这篇推文在点击展开播放音频时没有弹出音频播放的悬浮窗，更像推文自带的 BGM。

这种没有悬浮窗的音频播放不仅适合放在推文整篇的开头，更适合一篇推文中多个点击展开效果同时使用的情况。

比如 Bose 这篇推文，点击不同的商品，展开图文的同时播放不同的音乐，可以让用户更加了解产品的特点，提供更直观的产品感受。

*素材来自Bose《是什么节奏让人如此上头？》

组合：点击切换图片+播放音频+展开(以视频方式上传)

编号：11359（组合）

这两个案例用到的效果就是使用 iPaiban Pro 黑科技编辑器里的「 点击切换图片+播放音频+展开(以视频方式上传)」组合（编号11359）制作的。

相比纯音频，以视频方式上传的可以调整触发区（但不建议调得太大和贴近图片边缘，否则可能影响触发），支持直接转载，点击播放时不会弹出悬浮弹窗，更干净。
那我们以案例1为例，来看看是如何制作的吧？

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：点击切换图片+播放音频+展开(以视频方式上传)

编号：11359（组合）

第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组合」按钮，在「花样展开」-「播放音频+展开」分类中找到「点击切换图片+播放音频+展开(以视频方式上传)」组合，或者直接在搜索框中搜索组合编号11359，点击选择。

第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。

在组合编辑模式中，分为展开前和展开后两块设置区域。

第3步：设置「展开前」内容
①上传图片：点击「展开前」区域，在右侧点击2个「换图」按钮，分别上传准备好的点击前图片和点击后图片。图片尺寸需保持一致。

②输入视频id：在公众号后台新建图文，上传音乐视频（尺寸比例16:9，画面无要求，纯黑即可），上传成功后插入图文，然后使用 iPaiban Pro 小助手插件一键提取视频id。详细教程见：《iPaiban Pro小助手安装和使用教程》

点击「一键复制id」，然后在编辑器指定位置粘贴即可。

③调整触发区域：双击「展开前」区域图片显示触发区域，拖动红色色块调整触发区域。（不建议调得太大和贴近图片边缘，否则可能影响触发）

第4步：设置「展开后」内容
「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

第5步：设置参数
点击右侧红色小三角，可以设置展开时长。
如果预览效果发现内容没有完全展开或者展开过长，可以通过「加减展开高度（px）」进行调整，输入负数减小展开高度。

第6步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。

该效果不支持在编辑器预览。点击「同步至微信后台」等待同步成功，然后扫码预览效果即可。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器1500+组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。