小程序播放音乐

当一进入小程序时就开始播放音乐,当点击右上角的音乐图标时音乐停止,再点击,音乐开始播放。实现方法即是使用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
    })
  })


},

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值