微信小程序背景音乐开发详解


Posted in Javascript onDecember 12, 2019

wx.getBackgroundAudioManager() 

推荐大家使用背景音乐不在使用audio

audio播放音频加载时间长 体验需求达不到

相关文档

https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html

相关代码

const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐
Page({
 
 data: {
  id: '',//请求数据参数id
  musicMsg: {},//接收数据对象
 },
 
 onLoad: function (options) {
  var that = this
  that.setData({
   id: options.id,
  })
  that.getPicInfo() //请求服务器
 }, 
 // 开始播放
 listenerButtonPlay: function (src) {
  var that = this
  console.log(src)
  bgMusic.src = src;
  bgMusic.onTimeUpdate(() => { //监听音频播放进度
   console.log(bgMusic.currentTime)
  })
  bgMusic.onEnded(() => { //监听音乐自然播放结束
   console.log("音乐播放结束");
   that.listenerButtonPlay(that.data.musicMsg.mp3)
  })
  bgMusic.play(); //播放音乐
 },
 getPicInfo() {
  var that = this
  wx.request({
   url: 'https://xxxxx.xxxxx.com/1.json?id=' + that.data.id,
   header: {
    'content-type': 'application/json'
   },
   method: 'GET',
   success: function (res) {
    that.listenerButtonPlay(res.data.data.mp3) //成功回调执行播放音乐
    that.setData({
     musicMsg: res.data.data, //赋值对象
    })
 
   }
  })
 },
 
 onUnload() {
  var that = this
  that.listenerButtonStop()//页面卸载时停止播放
  console.log("离开")
 },
 
 //暂停
 audioPause: function () {
  var that = this
  bgMusic.pause(); //暂停播放音乐
  console.log('暂停')
 },
 audioPlay: function () {
  var that = this
  bgMusic.play(); //停止播放
  console.log('继续播放')
 },
 //停止播放
 listenerButtonStop: function () {
  bgMusic.stop()
 },
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
小型js框架veryide.librar源代码
Mar 05 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
用vscode开发vue应用的方法步骤
May 06 Javascript
vue实现商城秒杀倒计时功能
Dec 12 #Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 #Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 #Javascript
vue-property-decorator用法详解
Dec 12 #Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 #Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
You might like
在项目中寻找代码的坏命名
2012/07/14 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
javascript中函数作为参数调用的方法
2015/02/09 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
bootstrap轮播图示例代码分享
2017/05/17 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
在Python中处理XML的教程
2015/04/29 Python
Python_LDA实现方法详解
2017/10/25 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
英文自我鉴定
2013/12/10 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
科研先进个人典型材料
2014/01/31 职场文书
财务简历的自我评价
2014/03/05 职场文书
股权转让协议书
2014/04/12 职场文书
初中生期末评语大全
2014/04/24 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
辩论会主持词
2015/07/03 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技