小程序页面添加背景音乐

第一步：

在全局文件app.json中添加

"requiredBackgroundModes": ["audio"],

官方说明：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes

第二步：

在需要播放背景音乐的页面的.js文件里，设置一个参数控制音乐是否播放

data:{play:true    //音乐控制，默认是播放
}

第三步

onLoad()函数中，判断play状态是否为true，如果是true的话，调用播放音乐的函数

if (this.data.play === true) {this.player(wx.getBackgroundAudioManager())}

第四步

播放音乐的设置;

注意：

audio.title不写或放空会报错，即使不报错ios系统也会不播放，所以必须加
微信小程序上线不能超过2M,音乐文件会很大，所以最好把音乐文件放在服务器后再使用

// 播放背景音乐player(audio) {var that = thisaudio.title = '瞬间的永恒'audio.src = 'https://redemptionmall-1256401892.cos.ap-nanjing.myqcloud.com/lottery/backend.mp3'//音乐播放结束后继续播放此音乐，循环不停的播放audio.onEnded(() => {that.player(wx.getBackgroundAudioManager())})},

第五步

我这里设置了播放和暂停的图标，播放时点击暂停图标就暂停，暂停图标也替换成播放，相反情况做法一致

wxml

 <image mode="widthFix" src="/images/{{play?'on.png':'off.png'}}" bindtap="handlechange"class="play-image {{play?'on':' '}}"></image>

 //音乐控制handlechange() {var state = this.data.playstate = !statethis.setData({play: state})if (this.data.play === true) {this.player(wx.getBackgroundAudioManager())} else {wx.getBackgroundAudioManager().pause();    //音乐暂停}},

第六步

离开页面音乐停止

/*** 生命周期函数--监听页面卸载*/onUnload: function () {//离开页面是停止播放音乐wx.getBackgroundAudioManager().stop();},

题外话

我多添加了音乐播放的时候图标会转动，暂停的时候图标会静止，上面的代码也有根据play的布尔值来判断图标是否转动，转动的话就添加on这个class，具体的样式是：

/* 播放动画 */
.on {animation: music-rotate 16s linear infinite;
}/* 旋转动画 */
@keyframes music-rotate {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(360deg);}
}

至此就已经完成了

抽奖小程序中用到的播放背景音乐相关推荐

python 抽奖库_用 python 写一个年会抽奖小程序
使用 pyinstaller 打包工具常用参数指南 pyinstaller -F demo.py 参数含义 -F 指定打包后只生成一个exe格式的文件 -D –onedir 创建一个目录,包含exe ...
微信小程序录音与音频播放控制功能
微信小程序录音与音频播放控制功能 1.录音 1.1 案例 2.音频播放控制 2.1 案例小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. ...
如何用excel制作xy曲线图_用Excel制作一个简易抽奖小程序，可一次抽取多人
抽奖程序在很多场合都能派上用场,比如商场开业促销.课堂点名.抽取幸运观众等.我们今天就用Excel来制作一个简单的抽奖小程序,仅做参考. 抽奖小程序是下图这个样子的.我们按一下键盘上的F9键,即可完成 ...
Excel抽奖小程序
今天分享一个用Excel制作的抽奖小程序. 如上图,制作一个抽奖小界面,滚动显示区域写入"=INDIRECT("A"&RANDBETWEEN(2,13))&quo ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
PHP抽奖小程序/微信红包封面抽奖小程序/抽奖小程序开源源码
PHP抽奖小程序源码,微信红包封面抽奖小程序,全开源.带流量主(需要自行替换代码),独立后台,亲测完美可用. 下载 PHP抽奖小程序/微信红包封面抽奖小程序/抽奖小程序开源源码亲测截图:
最新微信红包封面+抽奖小程序/小程序开源源码
一.后台(PHP7.0+ MySQL5.7+) 上传后台源码到网站根目录,导入数据库文件:zzmaku_com.sql 修改数据库配置:/config/database.php 修改小程序配置:/co ...
微信小程序预览无法播放视频
微信小程序预览无法播放视频,但是用开发工具可以播放,真机调试也可以播放,是因为勾选了"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"吗?
微信群超好用的红包抽奖小程序
最近发现的微信超好用抽奖小程序推荐 . 还在为庆典活动, 年终庆功宴, 产品推广等场合没有好用实用的发福利, 抽奖工具发愁吗, 给大家推荐一下我新发现的超好用微信抽奖小程序: "私域速推 ...

抽奖小程序中用到的播放背景音乐

小程序页面添加背景音乐

第一步：

第二步：

第三步

第四步

第五步

第六步

题外话

抽奖小程序中用到的播放背景音乐相关推荐

最新文章

热门文章

抽奖小程序中用到的播放背景音乐

小程序页面添加背景音乐

第一步 ：

第二步：

第三步

第四步

第五步

第六步

题外话

抽奖小程序中用到的播放背景音乐相关推荐

最新文章

热门文章

第一步：