微信小程序音频audio API如何结合列表渲染

创建时间：2019-03-10

更新时间：1 分钟前

audio组件在某些苹果手机存在致命 bug，点击组件无任何反应。从 1.6.0 版本开始，官方不再维护audio组件，建议使用能力更强的 wx.createInnerAudioContext 接口。以前列表渲染出来的audio需要技术改造。

比如我们有一段音频数据：

var data = [
  {
    id: 1,
    title: "爱过的人我已不再拥有",
    image: "http://wimg.spriteapp.cn/picture/2016/0904/57cb989b04d4c.png",
    src: "http://wvoice.spriteapp.cn/voice/2016/0904/57cb989b1e3b4.mp3",
  },
  {
    id: 2,
    title: "已过了耳濡目染的年",
    image: "http://wimg.spriteapp.cn/picture/2016/0517/573b1240af3da.jpg",
    src: "http://wvoice.spriteapp.cn/voice/2016/0517/573b1240d0118.mp3",
  },
  {
    id: 3,
    title: "感觉很放松",
    image: "http://wimg.spriteapp.cn/picture/2016/1108/5821463c3fad8.jpg",
    src: "http://wvoice.spriteapp.cn/voice/2016/1104/581b63392f6cb.mp3",
  },
];

现在我们想要达到这种目的：

音频以列表的形式展现在小程序上。
每个音频旁边都会有个按钮，初始情况按钮上文字为‘播放’；点击‘播放’，小程序播放该音频，按钮文字变成‘暂停’。
点击‘暂停’按钮，停止播放音频，按钮文字变成‘播放’。
不能同时播放多个音频：如果音频 A 正处于播放状态，点击播放音频 B 时，音频 A 停止播放。

思路：

使用wx:for
将列表中每一个音频做为组件
在父组件设置一个id，用于控制应该播放哪个音频

示例代码 https://github.com/zhaohaodang/wechat-app-audio-list (opens new window)