微信小程序从入坑到放弃二十七：可控制播放进度的音乐播放器(初级版)

摘要：
微信小程序官方文档中的audio音频播放器可控制播放可暂停，但无法实现通过拖拽时间轴达到跳帧的功能。因此，为了尽可能还原UI原型，只好造轮子了。最终使用movable-area + wx.createInnerAudioContext（音频API）完成了需求。此版为初级版，性能欠佳，下篇续写优化版…

一、起因

年后，公司的微信小程序中新增了一个需求：在资讯文章中添加音频。最终效果如图：资讯文章中的音频播放器.gif

二、UI界面拆解

从上图中可以得到以下信息：

• 播放/暂停按钮、
• 播放时间轴、
• 总播放时间、
• 当前播放时间、
• 播放过的时间显示主色调、
• 拖拽时用tips显示当前播放时间。

看官有没有惊呆？一个乍看不起眼的组件，竟然包含了接近完整的音乐播放器的功能。“麻雀虽小，五脏俱全。”用在这里再合适不过了。

三、方案评选

3.1、原生的audio音频组件相差甚远

拿到产品的需求后，首先艺灵我想的是：微信小程序中有没有自带的音乐播放器组件呢？ 然后我就找到了audio 音频（点击访问官方文档）
，但发现默认的audio组件UI界面与我们的相差甚远！如图：audio音频组件默认效果图.png

既然原生的不行，那我们通过一个自定义的音频时间轴来映射原生的audio是不是就可以了呢？那此时我们需要先解决音频时间轴的问题。

3.2、slider 滑动选择器组件无法在滑块位置设置播放进度

在UI原型中，最难处理的应该算那个 拖拽滑块儿控制播放进度 的操作了。对于滑块功能，微信小程序官方文档中提供了slider 滑动选择器（点击访