SVG创意｜高级音频交互图文｜推文随着音乐摇摆起来

「小编备用」

说到音频交互图文，想必大家已经接触不少了，常见的交互方式基本是通过点击按钮触发音频，而从技术原理上看是利用scale\translate\opacity等css属性，对原生音乐播放器按钮进行重新调整并在设计图中覆盖触发按钮。这样的音频交互实则是对微信原生音乐播放器的外观调整优化，实现了简单的交互效果。

例如：小编备用《午 夜 电 台》

小编备用《午 夜 电 台》

简单的交互也可以有更出色的技术表达玩出新创意。所以今天主要给大家分享双重信息反馈触发的高级音频交互图文，该篇图文是由「小编备用」2020年原创开发交付于腾讯的中秋特辑《腾讯长鹅祝你中秋节快乐!》。

从推文中可以看到内容十分简单，用户执行点击行为触发按钮播放中秋贺乐，画面呈现“长鹅”随着音乐左右摇摆的效果。在技术层面上则是通过技术代码实现的，将音频嵌入svg中，利用touchstart实现音频和动画的双重触发。另外，「小编备用」对防误触上的优化，也使得腾讯推文呈现高清超长GIF与音频的魔性结合，进而给予用户视觉与听觉的双重反馈，带来更丰富更具冲击力的阅读体验。相较于只能初级音频交互只能实现一次点击播放的效果，高级音频交互图文可以重复执行播放按钮。

腾讯《腾讯长鹅祝你中秋节快乐!》

当然，除了同步触发GIF，也可以触发其他更复杂的逻辑动画。例如图文高度拉伸展开效果与音频交互结合，具体方式可以参考「小编备用」交付宝马中国的推送：宝马中国《THE X2躁型音乐厂牌，今日正式开躁》

「小编备用」后期持续开发更多的交互图文技术和交互创意，呈现更优质的商业案例。