微信小程序：使用InnerAudioContext做一个简单的音频播放器

InnerAudioContex组件实现一个简单的小程序音频播放器
API 参考：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html

wxml部分

进度条使用slider控件
btn使用iview的小程序组件

<view class="music-player">
    <view class="mp-btns">
      <view wx:if="{{isplay==false}}" class="mp-cover "></view>
      <view wx:if="{{isplay==true}}" class="mp-cover mp-cover-rotate"></view>
      <view class="mp-btn-play" wx:if="{{isplay==false}}" bindtap='play'>
        <i-icon class="" type="play_fill" size="40" color="#80848f" />
      </view>
      <view class="mp-btn-stop" wx:if="{{isplay==true}}" bindtap='stop'>
        <i-icon class="" type="suspend" size="40" color="#80848f" />
      </view>
    </view>
    <view class="mp-slider">
      <slider class="mp-slider-bar" block-size="16" value="{{myAudioPos}}" bindchange="hanle_slider_change"></slider>
      <view class="current-time">{{myAudioCurrent}}</view>
      <view class="duration-time">{{myAudioDuration}}</view>
      <view wx:if="{{error}}">音频播放出错！</view>
    </view>
  </view>

js部分

// pages/score/score.js
const myAudio = wx.createInnerAudioContext();

Page({
  data: {
    isplay: false, //是否默认播放,

    myAudioDuration: '',  // 视频时间
    myAudioCurrent: '',   // 当前播放进度
    error: ''
  },

  onReady: function() { 
    // src来自qq音乐，一天即失效，测试请使用新的音乐地址
    myAudio.src = 'http://isure.stream.qqmusic.qq.com/C4000003i7jD333cc8.m4a?guid=7277519600&vkey=AED6394F93ADC00BB18CEC261755ACB2D5DACE068904DCC0FA69C466F5DAD8DDAE8403150DE18FDC93C7200D4B37371A0E28EBDB59714EFE&uin=4624&fromtag=66';    
    myAudio.title = 'Cannon';

	// 在onCanplay里获取并设置音频时长和播放进度
    myAudio.onCanplay(() => {
      myAudio.duration; //必须写，不然获取不到。。。
      setTimeout(() => {
        console.log(myAudio.duration);
        this.setData({
          myAudioDuration: format(myAudio.duration),
          myAudioCurrent: format(myAudio.currentTime)
        });
      }, 1000);
    });

    // 播放完成处理，按钮变一下
    myAudio.onEnded((res) => {
      this.setData({
        isplay: false
      })
    });

    //错误处理
    myAudio.onError((res) => {
      this.setData({
        error: res.errMsg
      })
    });
  },

  //播放  
  play: function() {
    myAudio.startTime = this.data.myAudioCurrent; //考虑到进度条被拖动，不一定从00:00:00开始
    myAudio.play();
    this.setData({
      isplay: true
    });

    //进度条变化   
    myAudio.onTimeUpdate(() => {
      this.setData({
        myAudioPos: myAudio.currentTime / myAudio.duration * 100,
        myAudioCurrent: format(myAudio.currentTime)
      });
    })
  },

  // 停止
  stop: function() {
    myAudio.pause();
    this.setData({
      isplay: false
    });
  },

  // 拖动进度条，到指定位置
  hanle_slider_change(e) {
    const position = e.detail.value;
    var currentTime = position / 100 * myAudio.duration;
    myAudio.seek(currentTime);
    this.setData({
      myAudioPos: position,
      myAudioCurrent: format(currentTime)
    })
  } 
})

// 时间格式化
function format(t) {
  let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60);
  t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2);
  return t;
}

目前还有一小bug，进度条拖动不是很流畅。。。