小程序简易音乐播放器实现
粗糙的页面设计：
wxml部分：
<view class="test"><view class="img"><image class="img" src="http://p4./aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg"></image></view><view class="musicPlay"><text class="begin">{{nowTime}}</text><slider bindchange="sliderChange" class="slider" block-size="12px" max="256" value="{{value}}"></slider><text class="end">04:16</text></view><button bindtap="isPlay">{{isPlayText}}</button></view>
wxss部分：
.test {width: 90%;margin: auto;}.img {width: 500rpx;height: 500rpx;margin: auto;margin-bottom: 200rpx;margin-top: 100rpx;border-radius: 50%;}.musicPlay {display: flex;flex-direction: row;margin-bottom: 50rpx;}.slider {width: 80%;}.begin, .end {box-sizing: border-box;padding-top: 15rpx;}
js部分：
// pages/index/index.jsPage({/*** 页面的初始数据*/data: {isPlay : false, // 控制音乐播放nowTime : '00:00', // 当前音乐播放时间value : 0, // 对应silder的valueisPlayText : '播放' // 播放按钮显示文本},// 控制播放/*1、点击按钮时，对按钮进行取反，然后再赋值2、当音乐未播放时，按钮应该显示为：播放，当音乐正在播放时，按钮应该显示为：暂停3、每次点击按钮，都会调用musicPlay()方法，来让音乐暂停或播放*/isPlay () {this.setData({isPlay : !this.data.isPlay,})if(this.data.isPlay){this.setData({isPlayText : '暂停'})}else {this.setData({isPlayText : '播放'})}this.musicPlay(this.data.isPlay)},// 控制音乐播放暂停// 当被调用时，根据传进来的isPlay的值判断音乐播放或暂停musicPlay (isPlay) {if(this.data.isPlay){// 这里使用的全局数据isPlay，而不是传进来的参数// 最开始isPlay为flase，走不进来if，使用歌曲不会播放wx.getBackgroundAudioManager().title = '孤勇者';wx.getBackgroundAudioManager().src = '/song/media/outer/url?id=1901371647.mp3';}if(!isPlay) {// 音乐的暂停// console.log(!isPlay);wx.getBackgroundAudioManager().pause();}else {// 音乐的播放// console.log(isPlay);wx.getBackgroundAudioManager().play();}},// 时间转换 s转换成m:s形式/* 这里传进来的是s，要显示为00:00的形式，要做一些转换，1、m表示分，s表示秒2、m是传进来的数取整3、s是传进来的数取余4、当m小于10的时候，要拼接字符串为'0m'，暂且不考虑m>100的情况，那也太恐怖了5、当s<10时，与m同理，还好100不可能 6、然后拼接 */ms:function (test) {var m = 0,s = 0;m = parseInt(test/60);if(m < 10) {m = '0' + m;}s = parseInt(test%60);if(s<10) {s = '0' + s;}return m + ':' + s;},// 拖动进度条改变/*1、在slider上绑定一个事件，我们可以通过这个事件知道value值的改变，然后通过更新全局数据，来改变wxml上的value值2、wx.getBackgroundAudioManager().seek()跳转到指定位置，我们跳转到v的位置*/sliderChange: function (e) {var v = e.detail.value;this.setData({value : v})wx.getBackgroundAudioManager().seek(v)},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 监听背景音频播放进度更新事件wx.getBackgroundAudioManager().onTimeUpdate(() => {var time = wx.getBackgroundAudioManager().currentTime;var nowTime = this.ms(time);this.setData({nowTime : nowTime,value : parseInt(time)})});// 监听背景音频播放结束wx.getBackgroundAudioManager().onEnded(() => {this.setData({isPlay : false,isPlayText : '播放'})})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
app.json部分：
{"pages": ["pages/index/index"],"requiredBackgroundModes": ["audio", "location"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"}
注意：
1、测试数据可能会失效，可使用自己的数据
2、slider中设置的max为固定值
3、小程序BackgroundAudioManager相关知识：https://developers./miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
4、小程序slider相关知识：
https://developers./miniprogram/dev/component/slider.html
如果有更好的建议，或者文章中存在错误的地方，请及时指出，感谢！
