如何使用 Towify 在小程序中配置音乐播放功能？

在音乐播放器中，音频播放、快进音频是常用的功能，今天小编带大家一步步实现。

效果展示

通过使用滑块组件、音频组件的属性值，同时配合设置值触发器，实现音频播放和快进功能。

绑定数据

注意：绑梁李定数据可以将事件返回的数据和组件显示内容进行绑定。

选中音频组件

点击检查面板橡档迟的数据绑定与设置

上传音频

配置动画

注意：动画设置中可以实现组件丰富的动画效果，同一个组件支持多种动画设置，并可设置执行动画时机。

选中图片组件

点击检查面板中的动画

配置旋转动画

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中音频组件

点击检查面板的触发器

配置动画播放触发器

创建动画暂停触发器

创建切换触发器

创建设置总进度触发器

创建音频播放触发器

创建音频暂停触发器

创建状态改变后触发器

创建在当前进度改变时的触发器

选中滑块组件

创建设置值触发蠢肆器

创建值改变时触发器

这样就可以在小程序中配置音乐播放功能了。

背景：数组可以可以存储其音频地址，让其进行顺序播放和同步播放有两种方式

顺序播放

1.使用定时器进行设置传递地址时候，下一个等待音频的播放时间以后在传递地址，这个地方看似没有问题，实际上还是有很大问题的，因为在传递的时候如果数据量大，你就会发现会出现同步播放的情况，因为那个定时和你的音频时间会有误差，数据越大，越明显，还有就是会数组地址更新，这又是问题，更新以后传递过去定时器重新给其定时，这个又给串了，笔者兄大就遇到这个情况了，跳了半天。

2.就是下面的方法，我本身是过几秒中我的数组会更新地址，这样会导致程序整体运行一次，可以在音频播放完才运行函数设置一个状态，开始状态设置一个true，将数组传递过去，然后关闭通道，改变状态进行设置flase的情况，然后再可以在音频播放完才运行函数里设置，但播放完到这个数组最后一个音频以后，改变为true，羡正竖这个时候再接收新的更新后的数组，这样不会出现同步播清稿发的情况。

同步播放

其实就是直接将其地址传递到InnerAudioContext.src，不管播放时间，直接for循环就可以了。

使用微信小程序实现一个简易的音乐播放器.

Github地址

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).

主要实现的功历悄咐能有:

1.实现音频播放,暂停

2.实现拖拽进度条,快进音频肢纯进度

3.实现上一首,下一首,列表循环播放

4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试

一丶index.js

二丶index.wxml

三丶index.wxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性

附上官方相关api链接:

BackgroundAudioManager.html

wx.getBackgroundAudioManager()

slider组运早件

---