微信小程序入坑二十七：支持播放进度调节的初级版音乐播放器

摘要：
微信小程序官方文档所提供的audio音频播放器组件具备播放与暂停的基本控制功能，然而却不支持通过拖动时间轴实现跳帧操作。为最大程度地还原UI原型设计，不得不自行开发相关功能。最终采用movable-area组件结合wx.createInnerAudioContext音频API实现了需求。当前版本属于基础实现阶段，整体性能表现尚有不足，后续将撰写优化版本进行改进…

大纲

• • 一、起因

    • 二、UI界面拆解

    • 三、方案评选

    • • 3.1、原生的audio音频组件与需求存在较大差距
      • 3.2、slider 滑动选择器组件不支持在滑块位置设定播放进度
      • 3.3、progress 进度条组件无法实现对滑块和播放进度的设定
      • 3.4、movable-area 组件经过适当调整后可临时使用
      • 3.5、最终确定的可行方案

    • 四、浅析遇到的问题及细节处理

    • • 4.1、实施过程中遭遇的障碍
      • 4.2、需要注意的关键点

    • 五、demo源码展示

    • 六、参考资料来源

一、起因

在后续阶段，企业于其微信小程序中引入了一项新功能需求：于资讯文章内嵌入音频内容。最终实现的效果如图所示：资讯文章中的音频播放器.gif

![资