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

2018-11-15 12:04:54

在写完上一篇博文后,因为害怕误人子弟,故又仔细阅读了一边微信小程序的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
          });
        }
    }
})

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

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO