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


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 相关文章推荐
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
vue之数据交互实例代码
Jun 16 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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安全配置方法
2007/06/16 PHP
php中的数组操作函数整理
2008/08/18 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
美容院店长岗位职责
2014/04/08 职场文书
人力资源求职信
2014/05/25 职场文书
跑操口号
2014/06/12 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
小学入学感言
2015/08/01 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js