微信小程序：音乐播放器的使用2_微信小程序音乐播放

上回说到的是只有点击了播放音乐才可以获取到长度，所以如果要获取到长度，基本两点，第一个，你先偷偷去播放，然后再暂停，然后又重置到0，当然，这种好麻烦，最好还是后台的小朋友返回长度给我们好点

接下来是第二个的实现了，就是需要我们去获取当前的长度，然后去设置slider的当前值，这个的话翻翻文档， 哦。有一个onTimeUpdate方法是我们需要的，那就好，于是乎，我们的代码现在是这样的：

var myaudio;//个人音乐播放器

Page({

data: {

duration: 0,//总长度

curvalue: 0,//当前播放值

},

onShow: function () {

const that = this;

// 初始化音乐播放器

myaudio = wx.createInnerAudioContext();

// 模拟后台获取到播放的路径

setTimeout(function () {

myaudio.src = "http://p0kmdnxqs.bkt.clouddn.com/20180412151357";

console.log(myaudio.duration);

that.getlength();

}, 1000);

},

//获取长度

getlength: function () {

const that = this;

console.log(myaudio.length);

setTimeout(function () {

if (myaudio.duration == 0 || myaudio.duration == undefined || myaudio.duration == null) {

that.setData({

duration: "尚未获取到"

})

that.getlength();

}

else {

that.setData({

duration: myaudio.duration

})

}

}, 500);

},

//点击暂停播放音乐

pausemusic: function () {

myaudio.pause();

},

// 来时播放音乐

playmusic: function () {

const that = this;

// 当播放的路径是空的时候，

myaudio.play();

console.log(myaudio);

//更新播放进度

myaudio.onTimeUpdate((e) => {

console.log(myaudio.currentTime);

that.setData({ curvalue: myaudio.currentTime });

})

}

})

<!--播放按钮 -->

<button bindtap='playmusic'>点击播放音乐</button>

<button bindtap='pausemusic'>停止播放音乐</button>

<slider value='{{curvalue}}' max='{{duration}}'></slider>

<view>当前：{{curvalue}}</view>

<view>总长度：{{duration}}</view>

可能觉得奇怪，我为什么要放在播放的方法里面，毕竟有了之前的经验，我的感觉是肯定我们设置完src的时候，还没有“”初始化“”完毕，而当我们点击播放的时候，基本是可以确认是正常完成的了

很好，我们运行一下，很完美，没毛病。但是你知道我为什么这个音乐只有15s吗？就是为了能确定如果播放完毕之后重新开始会怎么样。所以。耐心等待15s，再次点击播放，会怎样？

没毛病，再次点击后可以播放，但是又有个问题，就是进度条不动了，进度条不动意味着什么？意味着update方法没有被“调用”，这就尴尬了。。。

而且，相信大家也有注意到一个问题，就是有时候点击播放，在点击暂停，进度条有时候是不会播放的，这就尴尬了。。。

所以说。。小程序有时候也是有点坑的道理的。。

既然不可以的话，我们只好自己设置一个定时器去获取当前的currenttime了。。。

由于有暂停播放的按钮，所以我们需要设置的是暂停播放的时候停止播放器，也就是说只有在播放音乐的时候才有那个定时器在跑，所以我们还需要考虑一个情况，就是停止，自然播放结束的时候，去停止掉我们的计时器，当然，我们也可以这样想，当用户点击播放的时候，只允许存在一个定时器，所以我们可以设置为清除所有的定时器，然后留下一个，

var myaudio;//个人音乐播放器

var myinte;

Page({

data: {

duration: 0,//总长度

curvalue: 0,//当前播放值

},

onShow: function () {

const that = this;

// 初始化音乐播放器

myaudio = wx.createInnerAudioContext();

// 模拟后台获取到播放的路径

setTimeout(function () {

myaudio.src = "http://p0kmdnxqs.bkt.clouddn.com/20180412151357";

console.log(myaudio.duration);

that.getlength();

}, 1000);

},

//获取长度

getlength: function () {

const that = this;

console.log(myaudio.length);

setTimeout(function () {

if (myaudio.duration == 0 || myaudio.duration == undefined || myaudio.duration == null) {

that.setData({

duration: "尚未获取到"

})

that.getlength();

}

else {

that.setData({

duration: myaudio.duration

})

}

}, 500);

},

//点击暂停播放音乐

pausemusic: function () {

myaudio.pause();

this.setData({ curvalue: myaudio.currentTime });

clearInterval(myinte);

},

// 来时播放音乐

playmusic: function () {

const that = this;

// 当播放的路径是空的时候，

myaudio.play();

console.log(myaudio);

//上一个定时器清除

clearInterval(myinte);

myinte = setInterval(function () {

that.setData({ curvalue: myaudio.currentTime });

}, 1000);

}

})

现在，我们就完成了对音乐播放进度的监听了，下一篇的主题就是对进度的控制了