微信小程序的innerAudioContext 与AudioContext有什么区别

在写完上一篇博文后，因为害怕误人子弟，故又仔细阅读了一边微信小程序的API， 发现播放音频还有一个方法innerAudioContext。 于是对innerAudioContext与AudioContext迷糊了，这两个到底有什么区别。都能实现播放音频目的，最主要的时候，我用AudioContext完美实现了我的功能。

但是随着我的测试，我发现AudioContext不能循环播放，只能播放一次后就停止了，除非再点一次播放按钮，才能继续播放，于是我查找AudioContext是否有loop的方法，但并未有结果。

查看api,这样解释的

• AudioContext： audioContext 通过 id 跟一个组件绑定，操作对应的

  组件。 且AudioContext 对应的wx.createAudioContext方法不在维护

• innerAudioContext： 创建内部 audio 上下文 InnerAudioContext 对象。InnerAudioContext 实例，可通过 wx.createInnerAudioContext 接口获取实例。

总结一下，我为什么要放弃AudioContext，而使用innerAudioContext

1. 不能循环播放， 
2. 且AudioContext只有.pause、 .play、 .seek、 .setSrc四个方法，其他我们就不能控制了
3.  再说官网都不维护了，我们也应该放手了

理由就说到这里了，然后我们来说怎么实现功能

wxss代码：

.Rose-music {
  position: absolute;
  right: 20rpx;
  top: 0;
  width: 40rpx;
  height: 40rpx;
  line-height: 1;
}
.Rose-play {
  position: relative;
  line-height: 1;
}
.rotate {
  animation: rotate 1s linear infinite;
}
.icon-CD {
  font-size: 20px;
  margin-top: -10rpx;
  color: #fefefe;
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: 0, 0;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    transform-origin: 0, 0;
  }
}

wxml 代码

<view class="Rose-music">
    <view class="Rose-play {{isPlay? 'rotate': ''}}" ontap="controlMusic">
        <icon class="iconfont icon-CD"></icon>
    </view>
</view>

js 代码

//app.js中
onLaunch: function () {
    this.AppMusic = wx.createInnerAudioContext();
    this.AppMusic.autoplay = true;
    this.AppMusic.src = 'https://zhmzjl.com/statics/images/blog/kongquexiqu.mp3';
    this.AppMusic.loop = true;
    this.AppMusic.volume = 0.8; //音乐音量
    this.AppMusic.onPlay(() => {
      console.log('开始播放')
    })
    this.AppMusic.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    });
  },
//需要控制音乐的页
const app = getApp();
Page({
    data: {   
        isPlay: true,
    },
    controlMusic: function () { //控制音乐停止与播放
        if (this.data.isPlay) {
          app.AppMusic.pause();
          this.setData({
            isPlay: false
          });
        } else {
          app.AppMusic.play();
          this.setData({
            isPlay: true
          });
        }
    }
})

这次真的大功告成了， 算了，话不能说太满，万一我又错了呢，反正功能也实现了，管它呢，先这样了！