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

首先第一点。这个音乐播放其实也没什么大的问题，但是有些时候可能要根据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>

当然，在开发者日工具上，整个是正常的，实际上呢？

真机上是这样的：

没错，我等了好几十分钟了，还是没扫出来，所以我知道，开发者工具是不可靠的，于是我点了下那个播放按钮

 

    

很完美，出来了，所以说这个可以是第一个问题。当然接下里还有很多个问题会出现，所以我们先去吃个饭再说