在音乐播放器中,音频播放、快进音频是常用的功能,今天小编带大家一步步实现。
效果展示通过使用滑块组件、音频组件的属性值,同时配合设置值触发器,实现音频播放和快进功能。
绑定数据注意:绑梁李定数据可以将事件返回的数据和组件显示内容进行绑定。
选中音频组件
点击检查面板橡档迟的数据绑定与设置
上传音频
配置动画注意:动画设置中可以实现组件丰富的动画效果,同一个组件支持多种动画设置,并可设置执行动画时机。
选中图片组件
点击检查面板中的动画
配置旋转动画
触发器配置注意:在检查器面板中的触发器设置面板创建触发器,可以对组件进行交互逻辑设置,或配合事件来进行动态数据 *** 作。
选中音频组件
点击检查面板的触发器
配置动画播放触发器
创建动画暂停触发器
创建切换触发器
创建设置总进度触发器
创建音频播放触发器
创建音频暂停触发器
创建状态改变后触发器
创建在当前进度改变时的触发器
选中滑块组件
创建设置值触发蠢肆器
创建值改变时触发器
这样就可以在小程序中配置音乐播放功能了。
1、wx.getBackgroundAudioManager :获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放枣物镇。但是后台状态不能通过调用API *** 纵音频的播放状态。
从微信客户端6.7.2版本开始,若需要在小程序切后台后继续播放音频,需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效,正式版还需通过审核。
2、onUnload和onHide事件中暂停音蚂滑乐的播放。
3、onShow中调用播放事件
4、在播放结束的事件凳粗中,再次播放,以达到循环播放的效果。
使用微信小程序实现一个简易的音乐播放器.Github地址
虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).
主要实现的功历悄咐能有:
1.实现音频播放,暂停
2.实现拖拽进度条,快进音频肢纯进度
3.实现上一首,下一首,列表循环播放
4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试
一丶index.js
二丶index.wxml
三丶index.wxss
四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性
附上官方相关api链接:
BackgroundAudioManager.html
wx.getBackgroundAudioManager()
slider组运早件
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)