小程序音频播放器（二）使用createInnerAudioContext做另一个播放器

几个月之前，也就是刚开始学习小程序，做了一个简单的音频播放器
传送门：https://blog.csdn.net/immocha/article/details/103904659

庆幸自己没有从入门到放弃，而是渐渐有了些长进，这回又做了一个播放器，感觉能稍微好点了。
这个播放器长这样

比上回稍微复杂一些，主要实现以下几个功能：

1. 播放，暂停。 播放时圆形图片会转动
2. 快进快退
3. 音频切换（英音和美音之间切换）
4. 进度条显示
5. 切换倍速，估计系统有bug，暂未实现~~

实物在我的小程序里边

照常贴代码

<!-- 图标使用iconfont-->

<view class="audioPlayer">
  <view class="progress" style="width:{{progress}}%"></view>
  <view class="btn-switch-accent" bindtap="switchAccent">{{curAccentText}}</view>
  <view class="btn-fast-backward" data-flag="-1" bindtap="seekPosition">
    <view class="iconfont icon-backward"></view>
  </view>
  <view class="btn-play">
    <view class="btn-bg {{isPlay?'roate' :''}}">
      <image style="width: 100rpx; height: 100rpx; " mode="scaleToFill" src="{{thumbnail}}"></image>
    </view>
    <view bindtap="play" wx:if="{{isPlay == false}}">
      <view class="iconfont icon-caret-right" /></view>
    <view bindtap="stop" wx:if="{{isPlay == true}}">
      <view class="iconfont icon-pause" /></view>
  </view>
  <view class="btn-fast-backward" data-flag="1" bindtap="seekPosition">
    <view class="iconfont icon-forward"></view>
  </view>
  <view class="btn-play-rate" bindtap="switchPlayRate">{{curPlayRate}}X</view>
</view>

.audioPlayer { position: fixed; z-index:999; bottom:0; left:0; right:0; height:98rpx; display: flex; justify-content: space-around; align-items: center; background: #fff; box-shadow: 2rpx -2rpx 2rpx #f1f1f1; }
.progress { position: absolute; top:0; left:0; right:0; height:4rpx; width:2rpx; background:#2e25da }
.btn-play { position: relative;  bottom:20rpx; display: flex; justify-content: center; align-items: center; width:100rpx; height:100rpx; overflow: hidden;border-radius: 100%; }
.btn-bg {position: absolute;top:0; left:0;  width:100rpx; height:100rpx;border-radius: 100%; }
.roate { animation:turn 5s linear infinite;      }
@keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }
.icon-caret-right,.icon-pause { font-size:72rpx; color:#fff;}

.btn-switch-accent { position: relative; top:-4rpx; }
.btn-play-rate { font-family:  Arial, Helvetica, sans-serif}

// 删掉了我自己的一些业务代码，可能会误删一些内容，应该没有大问题，相信你自己改改就可以的。
const myAudio = wx.createInnerAudioContext()
const playRateRange = [0.8, 1.0, 1.5, 2.0]
const audioAccent = [
{key: 'audio_uk',text: '英音'},
{ key: 'audio_us',text: '美音'},
]

Page({
  data: {
    active: 0,  
    isPlay: false,
    thumbnail: '换成你自己的',

    progress: 0,
    curAccentIndex: 0,
    curAccentText: '',
    curPlayRateIndex: 1,
    curPlayRate: 0,
  },

  onLoad: function() {
    this.setData({     
      //curPlayRate: playRateRange[this.data.curPlayRateIndex].toFixed(1),
      curAccentText: audioAccent[this.data.curAccentIndex].text
    })
    this.init()
  },

  init() {  
        //myAudio.playbackRate = 2
        myAudio.src = '换成你自己的'

        myAudio.onCanplay(() => {
          myAudio.duration; //必须写，不然获取不到。。。
        })

        //进度条变化 
        myAudio.onTimeUpdate(() => {          
          this.setData({
            progress: myAudio.currentTime / myAudio.duration * 100
          })
        })
        
        myAudio.onEnded(() => {
          this.setData({
            isPlay: false
          })
          // 播放结束回到开头，stop
          myAudio.seek(0)
        })
  },

  //播放  
  play: function() {
    myAudio.startTime = this.data.myAudioCurrent;
    myAudio.play()
    this.setData({
      isPlay: true
    })   
  },

  stop: function() {
    myAudio.pause();
    this.setData({
      isPlay: false
    });
  },

  // 快进
  seekPosition(e) {
    myAudio.seek(myAudio.currentTime + 5 * e.currentTarget.dataset.flag)
  },

  // 切换英音/美音
  switchAccent() {
    this.data.curAccentIndex = this.data.curAccentIndex == 0 ? 1 : 0
    this.setData({
      curAccentText: audioAccent[this.data.curAccentIndex].text
    })
    myAudio.stop()
    // 在onCanplay里获取并设置音频时长和播放进度
    myAudio.src = '换个音频地址'
    myAudio.onCanplay(() => {
      myAudio.duration; //必须写，不然获取不到。。。 
      if (this.data.isPlay) {
        myAudio.play()       
      }
    })

    //进度条变化，换了个音频地址，所以要再写一下
    myAudio.onTimeUpdate(() => {     
      this.setData({
        progress: myAudio.currentTime / myAudio.duration * 100
      })
    })
  },

  // 更改播放速度,暂时无效，等待版本修复
  switchPlayRate() {
   
  },
})