【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停

小程序简易音乐播放器实现

粗糙的页面设计：

wxml部分：

<view class="test">
    <view class="img">
        <image class="img" src="http://p4.music.126.net/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:16text>
    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.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isPlay : false, // 控制音乐播放
        nowTime : '00:00', // 当前音乐播放时间
        value : 0, // 对应silder的value
        isPlayText : '播放' // 播放按钮显示文本
    },

    // 控制播放
    /*     
        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 = 'http://music.163.com/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.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
4、小程序slider相关知识：
https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

如果有更好的建议，或者文章中存在错误的地方，请及时指出，感谢！