微信小程序背景音乐的播放以及问题的解决

微信小程序背景音乐的播放有自己自定义的api,并不推荐使用audio,audio加载时间长,体验不好,推荐使用wx.getBackgroundAudioManager()

//定义背景音乐

const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐

page({

data:{

src:‘ ‘

},

onLoad:function(){

  this.ceshi()

},

ceshi:function(){

  //这里 需要从接口获得背景音乐的路劲,我这里就随便写个假的了

  wx.request({

    url:‘ ‘,

    dataP:{},

    methos:‘‘,

    success:function(res){    

      this.setData({

        src:src

      })    

      this.listenerButtonPlay()    //成功获得音乐路径后调用监听方法,以便 后续需要

    }

  })

  },

listenerButtonPlay: function () {

  var that = this

  var src = that.data.src

  console.log(src)

  // bgMusic.title = ‘333‘;   //必须设置title,否则会报错

  //bgMusic.src = src;  //如果需要页面加载完成自动播放背景音乐,解除注释,背景音乐默认赋值上src后就自动播放

  bgMusic.onTimeUpdate(() => { //监听音频播放进度

    //console.log(bgMusic.currentTime)

  })

  bgMusic.onEnded(() => { //监听音乐自然播放结束

    console.log("音乐播放结束");

    // that.listenerButtonPlay(src)    //r如果需要音乐结束后继续循环播放,解除注释

  })

  bgMusic.pause(); //播放音乐

},

//停止播放

listenerButtonStop: function () {

  bgMusic.stop()

},

//有时我们并不需要自动播放背景音乐,需要手动控制,随便加个点击事件

autoMusic: function (e) {

  var that = this;

  that.setData({

    auto: !that.data.auto

  });

  if (that.data.auto) {

    bgMusic.title = that.data.src      //这个地方必须放在判断里,放在外边你会发现你暂停音乐暂停不了

    bgMusic.src = that.data.src

    bgMusic.play();

    console.log("播放")

  } else {

    bgMusic.pause();

    console.log("暂停")

  }

},

})

此次使用问题汇总

背景音乐必须设置title,

赋值src会自动播放,

播放暂停如果方法是同一个赋值src必须放在播放判断里面

原文地址:https://www.cnblogs.com/lishuang2243/p/11888257.html

时间: 2024-10-04 00:05:01

微信小程序背景音乐的播放以及问题的解决的相关文章

如何使用微信小程序video组件播放视频

相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们在网络上随便找了一个简短的视频源.video组件的引用格式如下: [AppleScript] 纯文本查看 复制代码 ? 1 <video src="http://www.w3school.com.cn//i/movie.mp4" binderror="videoErrorC

微信小程序背景音频播放

需求描述:上一篇写到了  微信小程序音频播放的问题 我是应用了 一个播放的方法 wx.createAudioContext(audioId):这个方法不错 但是一旦锁频后就无法在继续播放 这次我们改进一下 当用户锁屏后仍然可以播放 ,那这里需要用的是小程序的 背景音乐的 api了 代码如下 wx.getBackgroundAudioManager() 这个是 音频背景播放方法 下面是实例化之后的可以操作的方法 示例代码: 如图所示 ,实例化 一个背景音频播放的代码 : 一下代码时我的业务逻辑,参

微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法

最近在学习微信小程序时遇到了个问题:官方的背景音乐的api实例代码中的音乐src不管用(可能有期限,后面的方法获取的src同样可能有期限),因此本人只能自己去寻找办法获取src,现将方法记录在下面.(官方实例代码如下) 1 const backgroundAudioManager = wx.getBackgroundAudioManager() 2 backgroundAudioManager.title = '此时此刻' 3 backgroundAudioManager.epname = '此

微信小程序请求API接口PHPSESSID变化的解决方式

微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.request()造成的.如果直接使用浏览器请求并不会出现这种情况. 解决方式如下: 通过登录接口获取到用户的session_key 和 open_id,设置session信息如下: $3rd_session = md5(session_key . $open_id) $_SESSION[$3rd_sessi

微信小程序web-view不支持打开非业务域名解决思路

问题起因: 我这的微信小程序小程序需要跳转到一个第三方的网站,然后就用web-view插件进行页面跳转,就会提示我出现非业务域名无法打开. 解决思路: 1.(不成功,安卓手机可以通过,iOS通过不了)通过微信公众平台的小程序开发文档发现在 设置-开发设置-业务域名中来设置业务域名,在这里我用的是自己域名和服务器(通过SSL证书的绑定)搭了一个静态网址作为平台进行跳转到第三方链接. 2.(成功)不去链接第三方网址,自己写了一个需求简易网站发布(域名需要绑定SSL证书) 注意:在这里我用的是Ngin

微信小程序使用本地ip调试时报错解决方法

在微信小程序项目开发时,会用到本地调试,报错如下: 解决方法: 1.单击设置->项目设置 2.勾选该项即可. 原文地址:https://www.cnblogs.com/xindekaishi/p/12700768.html

微信小程序访问豆瓣api报403错误解决方法

通过豆瓣API可以获取很多电影.书籍的数据信息,今天在调用豆瓣正在上映电影接口的时候报403错误,原因是豆瓣设置了小程序的访问权限.如下: 解决方法是使用代理,将豆瓣API地址换成 https://douban.uieee.com,但是,悲催的是又报了400(bad request)错误,如下: 接下来,设置请求头,header默认为: "ontent-type": "application/json"; 但是仍然会报400错误,将请求头中json设置改为xml,请

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序开源项目库汇总

微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wet