微信小程序实现百度唱片

官方文档
这一节我们利用wx.getBackgroundAudioManager()这个背景音乐的api来实现一个简易百度唱片，布局如下所示:

百度唱片.png 播放时的图片.png
话不多说，直接上代码:
baidu.wxml

<view class="container">
<image class="bg-image" src="{{!playing?'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000':'/assets/baidu/timg.gif'}}"></image>
<view class="image-container">
    <image src="/assets/baidu/front10.png" bindtap="seek" data-step='-10'></image>
    <image src="/assets/baidu/{{playing?'pause':'play'}}.png" bindtap="onAudioTap"></image>
    <image src="/assets/baidu/stop.png" bindtap="stop"></image>
    <image src="/assets/baidu/next10.png" bindtap="seek" data-step='10'></image>
</view>
</view>

baidu.wxss

/* pages/baidu/baidu.wxss */
.bg-image{
    width: 350rpx;
    height: 350rpx;
    margin-bottom: 100rpx;
}
.image-container image{
    width: 64rpx;
    height: 64rpx;
    margin: 30rpx;
}

baidu.js

// pages/baidu/baidu.js
let BackgroundAudioManager=wx.getBackgroundAudioManager();//获取背景音乐的上下文对象
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isHidden:true,
        playing:false,
        music:{
            src:'http://mpge.5nd.com/2018/2018-5-10/85111/1.mp3',
            title:'哑巴'
        }
    },
    /**
     * 跳转到某个位置
     */
    seek(e){
        let step=parseInt(e.currentTarget.dataset.step);
        let duration=BackgroundAudioManager.duration;//获取当前音乐的总时长
        let currentPosition=BackgroundAudioManager.currentTime;//获取当前播放的位置
        let position=currentPosition+step;//计算前进或者后退以后的位置
        if(this.data.playing){
            if(position>duration){//如果计算出来的位置大于音乐的总时长，就让position等于总时长
                position=duration
            }else if(position<0){//如果计算出来的位置小于0，就让position等于0
                position=0
            }
        BackgroundAudioManager.seek(position);
        wx.showToast({
          title: `${position}`,
        })
        }else{
            wx.showToast({
              title: '未播放音乐',
            })
        }
    },
    /** 
     * 点击播放或者暂停
    */
    onAudioTap(){
        if(this.data.playing){
            // 正在播放，暂停
        BackgroundAudioManager.pause()
        this.setData({
            playing:false
        })
        }else{
            // 播放
            this.play()
            this.setData({
                playing:true
            })
        }
    },
    /**
     * 停止
     */
    stop(){
        BackgroundAudioManager.stop()
        //切换显示哪张图片图片
        this.setData({
            playing:false
        })
    },
    /**
     * 播放
     */
    play(){
        BackgroundAudioManager.src=this.data.music.src;//设置背景音乐的src
        BackgroundAudioManager.title='哑巴';//title为必填项
        BackgroundAudioManager.play()
        this.setData({
            playing:true
        })
    },
})

今天的分享就到这里，兴趣是最好的老师，加油