微信小程序播放背景音乐

1.实现效果

2.实现原理

1、wx.getBackgroundAudioManager ：
获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。
2、onUnload和onHide事件中暂停音乐的播放。
3、onShow中调用播放事件
4、在播放结束的事件中，再次播放，以达到循环播放的效果。

3.实现代码

<image src="{{checked?'../img/stop.png':'../img/play.png'}}" class="music {{!checked && 'circle'}}" catchtap="checkMusic"></image>
<view catchtap="toNext" class="btn"> 去下一个页面</view>

page {background-color: aliceblue;
}.music {width: 86rpx;height: 86rpx;position: absolute;top: 108rpx;right: 10rpx;z-index: 99;}.circle {animation: cirlce 4s linear infinite;
}@keyframes cirlce {0% {transform: rotate(0deg);}100% {transform: rotate(359deg);}
}.btn {margin: 550rpx auto 0;width: 625rpx;height: 80rpx;background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%);border-radius: 6rpx;font-size: 30rpx;color: #fff;line-height: 80rpx;text-align: center;position: relative;overflow: hidden;
}.btn:after {content: "";background: #999;position: absolute;width: 750rpx;height: 750rpx;left: calc(50% - 375rpx);top: calc(50% - 375rpx);opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);transition: all 0.4s ease-in-out;
}

// pages/effects/audioCust/index.js
Page({data: {checked: false,},onShow: function () {this.player(wx.getBackgroundAudioManager())},checkMusic() {console.log(11)this.setData({checked: !this.data.checked})if (this.data.checked) {wx.getBackgroundAudioManager().pause();} else {this.player(wx.getBackgroundAudioManager())}},player(e) {e.title = '苏苏的音乐'e.src = "http://music.163.com/song/media/outer/url?id=36587407.mp3"//音乐播放结束后继续播放此音乐，循环不停的播放e.onEnded(() => {this.player(wx.getBackgroundAudioManager())})},// 页面卸载时候暂停播放（不加页面将一直播放）onUnload: function () {wx.getBackgroundAudioManager().stop();},// 小程序隐藏时候暂停播放（不加页面将一直播放）onHide() {wx.getBackgroundAudioManager().stop();},toNext() {wx.navigateTo({url: '/pages/jsCase/draw/index',})}
})

4.更多代码，关注苏苏的码云！

微信小程序播放背景音乐相关推荐

微信小程序播放背景音乐，关闭背景音乐的操作
多读多写多记录,多学多练多思考.----------- Grapefruit.Banuit Gang(香柚帮) 微信小程序打开某个页面播放背景音乐,离开此页面时关闭背景音乐一.首先在app.json ...
微信小程序播放背景音乐及开发工具没有声音问题解决
1.背景音乐播放 2.以上真机测试可行,但是开发工具不可行!! 但是原因很简单: 点击三个小点: 点击取消静音即可! 考,搞了一个上午..
taro开发微信小程序-播放轨迹(十一)
taro集成了地图后如何实现轨迹播放,暂停,停止呢?本身地图并不具备轨迹播放的能力,但是基于地图api可以实现轨迹播放的效果思路如下: 1.获取所有的轨迹坐标点-最好是数组格式的json 2.定义一 ...
C# 利用正则表达式获取文本中的https网址并替换新的对应的值,微信小程序播放腾讯视频
后台用KindEditor传了好几个视频地址,需要在微信小程序播放,复文本框写的内容是保存在数据库的一个字段的,就像下面这样,像这小程序播放,需要解析除真正的视频地址,所有需要获取里面的两个视频地址, ...
微信小程序播放bilibili视频
微信小程序播放B站视频前端代码 wxml文件 <view class="body-view" style="text-align: center;"&g ...
微信小程序播放音乐的方法中的两种方法
微信小程序播放音乐的方法有很多种,这里总结一下其中两种的优缺点,主要是最近用到了 audio组件这个是最简单的 <audio src="播放链接" id="mus ...
微信小程序播放器的一些简单功能实现
微信小程序播放器的一些简单功能实现准备工作一.构建npm(后面用到moment的格式化时间) 二.系统后台监测程序播放器配置(系统后台要知道该播放器是否在播放歌曲,并有一些简单的业务逻辑) 在ap ...
微信小程序播放视频卡顿问题
一.默认初次加载卡顿情况明显解决方案: 微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache="{{false}}"即可解决, ...
微信小程序播放m3u8视频总结
小程序小程序视频播放跳坑日记微信播放小程序,腾讯云免费空间2M,光代码本身就差不多,不可能免费直接把视频存入腾讯云,因此需要用到服务器存储数据,需要域名.小程序有域名校验,hhtps验证,费劲,所 ...