BackgroundAudioManager实现背景音乐

背景音乐"/>

BackgroundAudioManager实现背景音乐

文章目录

• • • • 搭建音频服务器
      • 小试一下
      • 再试一下
      • 参考文章

本例中的背景音乐，在小程序切至后台时，如果音频处于播放状态，可以继续播放。
在小程序全局配置 app.json中，有一项属性： requiredBackgroundModes，用于声明 需要后台运行的能力，比如 requiredBackgroundModes:["audio","location"]，即需要后台播放音乐、需要后台定位。
要实现背景音频，小程序提供了 BackgroundAudioManager实例，该实例可以通过wx.getBackgroundAudioManager获取。
本例中会涉及BackgroundAudioManager的如下属性和方法，

• title，音频标题
• epname，专辑名
• singer，歌手名
• coverImgUrl，音频封面
• pause()，暂停音频
• play()，播放音频
• onCanPlay(callback)，音频一旦进入 可播放状态，就会触发该事件。

搭建音频服务器

可参见这里。

小试一下

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json","requiredBackgroundModes": ["audio"]
}

// index.js
Page({onReady:function(){const bgm = wx.getBackgroundAudioManager();bgm.title = "告白气球";bgm.epname = "周杰伦的床边故事";bgm.singer = "周杰伦";bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";bgm.src = "http://localhost:8080/songs/告白气球.mp3";}
})

onReady里，设置了bmg的src后，背景音乐就自动播放了。
启动音频服务器，并编译小程序，自动播放背景音乐，如下所示。

如果不希望音频自动播放，可以在onCanPlay里执行暂停操作。

Page({onReady:function(){const bgm = wx.getBackgroundAudioManager();bgm.title = "告白气球";bgm.epname = "周杰伦的床边故事";bgm.singer = "周杰伦";bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";bgm.src = "http://localhost:8080/songs/告白气球.mp3";bgm.onCanplay(() => {bgm.pause();})}
})

再试一下

{"pages":["pages/index/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json","requiredBackgroundModes": ["audio"]
}

<!--index.wxml-->
<view class="container {{isRunning?'running':'paused'}}" bindtap="changeState"><image class="turn-table" src="../../images/turn-table.png"></image><image class="tone-arm" src="../../images/tone-arm.png"></image>
</view>

/**index.wxss**/
.container{position: fixed;right: 36rpx;top: 20rpx;
}
.container .turn-table{width: 80rpx;height: 80rpx;animation:spin 10s linear infinite;
}
@keyframes spin{from{transform: rotate(0deg);}to{transform: rotate(360deg);}
}
.running .turn-table{animation-play-state: running;
}
.paused .turn-table{animation-play-state: paused;
}
.container .tone-arm{width: 80rpx;height: 200rpx;
}
.running .tone-arm{animation: swing-running 0.5s linear forwards;
}
@keyframes swing-running{from{transform: rotate(0deg);}to{transform: rotate(10deg);}
}
.paused .tone-arm{animation: swing-paused 0.5s linear forwards;
}
@keyframes swing-paused{from{transform: rotate(10deg);}to{transform: rotate(0deg);}
}

// index.js
Page({data:{isRunning:false},bgm:null,onReady:function(){this.bgm = wx.getBackgroundAudioManager();this.bgm.title = "告白气球";this.bgm.epname = "周杰伦的床边故事";this.bgm.singer = "周杰伦";this.bgm.coverImgUrl = "http://localhost:8080/images/告白气球.jpg";this.bgm.src = "http://localhost:8080/songs/告白气球.mp3";this.bgm.onCanplay(() => {this.bgm.pause();})},changeState:function(){if(this.data.isRunning){this.bgm.pause();}else{this.bgm.play();}this.setData({isRunning:!this.data.isRunning})}
})

参考文章

requiredBackgroundModes