小程序播放音乐

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


},

})

您好,我可以为您提供微信小程序播放音乐的代码示例: 1. 在wxml文件中添加一个audio标签,如下所示: ``` <audio src="{{musicUrl}}" poster="{{poster}}" name="{{name}}" author="{{author}}" binderror="audioError" bindended="audioEnded" bindtimeupdate="audioUpdate" bindplay="audioPlay" bindpause="audioPause"></audio> ``` 2. 在js文件中定义需要用到的变量方法,如下所示: ``` Page({ data: { musicUrl: 'http://xxx.com/xxx.mp3', // 音乐地址 poster: 'http://xxx.com/xxx.jpg', // 封面图片 name: '歌曲名称', // 歌曲名 author: '歌手名', // 歌手名 isPlaying: false, // 是否正在播放 progress: 0, // 播放进度,单位:秒 duration: 0 // 音乐总时长,单位:秒 }, onLoad: function () { // 监听音乐播放事件 wx.onBackgroundAudioPlay(() => { this.setData({ isPlaying: true }) }) // 监听音乐暂停事件 wx.onBackgroundAudioPause(() => { this.setData({ isPlaying: false }) }) // 监听音乐停止事件 wx.onBackgroundAudioStop(() => { this.setData({ isPlaying: false, progress: 0 }) }) // 监听音乐播放进度更新事件 wx.onBackgroundAudioTimeUpdate(() => { const duration = Math.floor(wx.getBackgroundAudioManager().duration) // 获取音乐总时长 const progress = Math.floor(wx.getBackgroundAudioManager().currentTime) // 获取播放进度 this.setData({ duration, progress }) }) }, // 播放/暂停按钮点击事件 togglePlay() { if (this.data.isPlaying) { wx.pauseBackgroundAudio() } else { wx.playBackgroundAudio({ dataUrl: this.data.musicUrl, title: this.data.name, coverImgUrl: this.data.poster }) } }, // 拖动进度条事件 changeProgress(e) { const progress = e.detail.value wx.seekBackgroundAudio({ position: progress }) } }) ``` 注意:为了保证音乐可以在后台播放,需要在app.json文件中添加如下配置: ``` "requiredBackgroundModes": ["audio"] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值