音频出问题了？

最近不少用户发现，公众号中插入的原生音频卡片有个bug：在苹果手机上点击播放后再点击暂定，会直接导致微信闪退。

那么，以原生音频卡片为基础的隐藏式音频自然会存在一样的问题。

那怎么办？

今天给大家推荐一种视频式音频的排版。点击试试：

它的基本原理是就是把带声音的视频隐藏在图片后，点击图片播放视频，只能听见声音，就相当于一个音频了。

这个排版除了可以避免目前音频卡片导致微信闪退的bug，还使得在播放声音时不再有音频悬浮标，文章页面更干净：

下面以案例1为例，来看看是如何排版的吧。

详细教程：

工具：i排版SVG编辑器，网址：SVG.iPaiban.com

组件：音频-视频式音频(可调按钮大小及位置)

编号：11345（组件）

第1步：选择组件

登录i排版SVG编辑器后，点击编辑器右侧「组件」按钮，在「音频」-「视频式音频」分类中找到「音频-视频式音频(可调按钮大小及位置)」组件，或者直接在搜索框中搜索组合编号11345，点击选择。

第2步：上传图片

点击右侧换图上传封面图片。

第3步：调整触发区域

双击编辑区上传的图片，在弹出的窗口中拖拽红色区域调整触发区域的位置和大小。

为了防止点击触发时有问题，触发区域尽量不要调整得太大。

第4步：输入视频id

①在公众号后台新建文章，将要使用的视频插入。注意视频比例需要为16:9，视频画面不重要，可以为纯黑色。

②点击页面右上角 iPaiban Pro 小助手插件（安装和详细使用教程），选择「本地视频」提取id。

③复制提取到的视频id，返回到编辑器中，粘贴在指定位置。

第5步：导入公众号后台

该效果不支持在编辑器预览，且必须通过代码的方式导入公众号后台（不可同步导入），导入公众号后发送手机进行预览。

设置完毕后点击最右侧「导入微信后台」生成草稿代码，接着点击「复制」代码。

然后回到公众号后台文章编辑页面，打开 iPaiban Pro 小助手插件，点击「导入功能」-「导入代码」，粘贴刚才复制的代码，点击「清空导入」即可导入。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。

● SVG交互排版👇🏻

 

iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。