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


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 相关文章推荐
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
小程序实现上传视频功能
Aug 18 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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
目录,文件操作详谈―PHP
2006/11/25 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python实现连接mongodb的方法
2015/05/08 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
银行个人求职自荐信范文
2013/12/16 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
作风转变心得体会
2014/09/02 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
教师见习总结范文
2015/06/23 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL