首先第一点。这个音乐播放其实也没什么大的问题,但是有些时候可能要根据pm来开发的时候回有点恶心,比如我就遇到了。勉强提交了一个版本后,开始好好的梳理下这个audio的
一开始的时候,pm跟我说我肯定想到的是使用backgroundaudio来播放音乐的,毕竟光是audio组件就不一样了,所以肯定要重写一个组件的,但是仔细想了下,有个比较大的问题,就是使用background的时候,他会自动播放,所以想了下,还是使用
createInnerAudioContext
好点。
直接上最简单的播放代码上去
var myaudio;//个人音乐播放器
Page({
onShow: function () {
// 初始化音乐播放器
myaudio = wx.createInnerAudioContext();
// 模拟后台获取到播放的路径
setTimeout(function () {
myaudio.src = "http://p0kmdnxqs.bkt.clouddn.com/20180412151357";
}, 1000);
},
playmusic: function () {
const that = this;
// 当播放的路径是空的时候,
if (myaudio.src == "") {
console.log("音乐尚未加载完毕")
setTimeout(function () {
that.playmusic();
}, 200);
}
else {
that.myaudio.play();
}
}
})
<!--播放按钮 -->
<button bindtap='playmusic'>点击播放音乐</button>
没错,平平无奇的代码。丝毫无优越性可言
但是这是最基础的,还是要记住
接下来,我们需要加上一个进度条,当然首选是使用slider,有问题的话可以留言指导
所以,接下来的代码应该是这样的:这儿有两个简单的,最基础的要求,1:要slider跟着滚动,这点是肯定的,毋庸置疑的,
还有一点是显示整个的时间还有显示当前的时间,为了方便,我就使用秒作为单位来计算,不做数据显示处理
加上一个显示长度先:
var myaudio;//个人音乐播放器
Page({
data: {
duration: 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);
},
playmusic: function () {
const that = this;
// 当播放的路径是空的时候,
if (myaudio.src == "") {
console.log("音乐尚未加载完毕")
setTimeout(function () {
that.playmusic();
}, 200);
}
else {
myaudio.play();
}
}
})
<!--播放按钮 -->
<button bindtap='playmusic'>点击播放音乐</button>
<slider max='{{duration}}'></slider>
<view>当前:{{nowvalue}}</view>
<view>总长度:{{duration}}</view>
当然,在开发者日工具上,整个是正常的,实际上呢?
真机上是这样的:
没错,我等了好几十分钟了,还是没扫出来,所以我知道,开发者工具是不可靠的,于是我点了下那个播放按钮
很完美,出来了,所以说这个可以是第一个问题。当然接下里还有很多个问题会出现,所以我们先去吃个饭再说