小程序播放音乐_微信小程序上方出现音乐和音频

当一进入小程序时就开始播放音乐，当点击右上角的音乐图标时音乐停止，再点击，音乐开始播放。实现方法即是使用wx.createInnerAudioContext();API然后在相应的页面使用app.AppMusic.play();等对应的方法，在有关页面设置变量来控制，音乐图标的改变。

App （｛

     onLaunch: function () {
     // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    this.setServerUrl();

    this.AppMusic = wx.createInnerAudioContext();

    this.AppMusic.autoplay =true;

    this.AppMusic.loop = true;

    this.AppMusic.onPlay(() => {

      console.log('开始播放')

    })

    this.AppMusic.onError((res) => {

      console.log(res.errMsg)

      console.log(res.errCode)


    })

   },

｝）

index.wxml

<view wx:if="{{bian == true}}">
 <image src='../images/music.png' bindtap="audioPause" style='width:42rpx;height:42rpx;position:absolute;top:2%;right:3%;'></image>
 </view>


 <view wx:else="{{bian == false}}">
        <image src='../images/music1.png' bindtap="audioPlay"  style='width:42rpx;height:42rpx;position:absolute;top:2%;right:3%;background-color:'></image> 

 </view>

index.js

Page({

    data{

    bian:true

}

onLoad:function() {    

    app.AppMusic.src ='音乐地址'

}

 audioPlay: function () {
  app.AppMusic.play();
  app.AppMusic.onPlay(() => {
    this.setData({
      bian: true
    })
  })


},
audioPause: function () {
  app.AppMusic.pause();
  app.AppMusic.onPause(() => {
    this.setData({
      bian: false
    })
  })


},

})