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

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

效果展示

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

绑定数据

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

选中音频组件

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

上传音频

配置动画

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

选中组件

点击检查面板中的动画

配置旋转动画

触发器配置

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

选中音频组件

点击检查面板的触发器

配置动画播放触发器

创建动画暂停触发器

创建切换触发器

创建设置总进度触发器

创建音频播放触发器

创建音频暂停触发器

创建状态改变后触发器

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

选中滑块组件

创建设置值触发器

创建值改变时触发器

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

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

主要实现的功能有:

1实现音频播放,暂停;

2实现拖拽进度条,快进音频进度;

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

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

一丶indexjs

数据初始化

playMusic 切换播放歌曲的方法

countTimeDown 循环计时,进度展示

sliderChange slider的拖拽事件

lastMusic 上一首

playOrpause 中间的按钮,播放/暂停切换

nextMusic 下一首

listClick 列表点击事件

界面切换,时长格式化

二丶indexwxml

三丶indexwxss

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

倍速播放：用户在收听音频时可调节音频播放速度，目前支持8种倍速：05倍、075倍、正常倍速、125倍、15倍、20倍、25倍、30倍；

支持端口有微信H5、小程序、PC版店铺。

2、连续播放：专栏/会员的音频课程在微信H5和小程序支持连续播放。

3、播放模式：目前微信H5端支持4种播放方式：单曲播放、单曲循环、顺序播放、列表播放

4、悬浮播放：微信H5端支持音频课程以浮窗样式播放（页面下方显示悬浮控制框，上方音频控制区不显示），学员可以灵活控制暂停、播放、拖动音频播放进度。

以上就是关于如何使用 Towify 在小程序中配置音乐播放功能全部的内容，包括:如何使用 Towify 在小程序中配置音乐播放功能、微信小程序音频播放之音乐播放器、小鹅通怎么快进三倍等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！