微信小程序—添加背景音乐

问题: 

  想在打开小程序时就自动播放背景音乐(循环)

解决方法:

  1、思路:写一个函数,在 onLoad()中调用

  2、

 1 //index.js
 2 //获取应用实例
 3 const back = wx.getBackgroundAudioManager();
 4
 5 Page({
 6    ......................
 7 //  音乐播放函数
 8   backmusic: function () {
 9     player();
10     function player() {
11       back.title = "罗密欧与朱丽叶 ";   // 必须要有一个title
12       back.src = "http://******.mp3";
13       // 千与千寻 "http://*************.mp3"
14       back.onEnded(() => {
15         player();  // 音乐循环播放
16       })
17     }
18   },
19
20   onLoad: function () {
21     //背景音乐播放
22     this.backmusic();
23    ...................
24 })

  3、重点:

      BackgroundAudioManager 实例  官方链接:https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html

           :获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。      

      BackgroundAudioManager 实例,可通过 wx.getBackgroundAudioManager 获取。     

      BackgroundAudioManager.onEnded(function callback)

       :监听背景音频自然播放结束事件

      参数    function callback

       :背景音频自然播放结束事件的回调函数

原文地址:https://www.cnblogs.com/pam-sh/p/12309696.html

时间: 2024-11-05 20:37:00

微信小程序—添加背景音乐的相关文章

微信小程序添加悬浮在线客服会话按钮

微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话.那么如何自定义成悬浮客服会话按钮呢?随Z5Win一起来看看 1.我们可以定义contact-button的样式,加一个class.这个客服组件可以放在一个固定模板里,方便每个页面都调用到. <view> <contact-button class="img-plus-style

微信小程序播放背景音乐

小程序实现和h5一样的音乐图标一直旋转. 一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction:

微信小程序添加、删除class’

终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作dom啊: 折腾一个多小时最终找到两种方法,分享给大家: 第一种比较直接但是,不适合多个操作: 1,第一种感觉比较傻 <view class="{{num==0 ? 'active':''}}" bindtap="click1">1</view>

微信小程序添加底部自定义导航栏(tabBar)

tabBar参数说明参考: 官网文档 具体配置: 1.在app.json中添加你的自定义导航栏信息(名字,点击前图片,点击后图片,要跳转的界面等等) 注意事项:tabBar最多五个 参考示例: "tabBar": { "color": "#8a8a8a", "selectedColor": "#937bf5", "list": [ { "iconPath": &quo

微信小程序实现给循环列表点击添加类(单项和多项)

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 1 <view> 2 <view class='appointent-date'> 3 <view class="appointent-d

分享为小程序添加自动回复消息的5种方法!自动客服功能的微信小程序

如何通过小程序客服消息引导自动关注公众号? 小程序客服自动回复一个图文链接? 小程序客服可以发小程序卡片吗? 小程序客服能像公众号一样设置关键词回复吗? 收到消息时自动回复? 微信小程序新手如何默认自动回复功能 如果你遇到以上问题,请往下看!教大家实现微信小程序客服自动回复消息功能,以帮助我们更好地与客户进行互动. 当我们的小程序接入客服,在小程序前端增加一个客服按钮,用户可以点击按钮主动和我们的客服互动! 但是有个问题,消息那么多,如何才能接待的过来,能否想微信公众号一样自动回复,关键词回复,

微信小程序 使用HMACSHA1和md5为登陆注册报文添加指纹验证签名

对接口请求报文作指纹验证签名相信在开发中经常碰到, 这次在与java后端一起开发小程序时,就碰到需求对登陆注册请求报文添加指纹验证签名来防止信息被修改 先来看下我们与后端定制签名规则 2.4. 签名规则 原文规则:采用标准的JSON格式,null值字段舍去,按照key值字符串升序排列 例如:{"appId":"1100310061380986","outTradeNo":"1515120685073","timest

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

微信小程序背景音乐的播放有自己自定义的api,并不推荐使用audio,audio加载时间长,体验不好,推荐使用wx.getBackgroundAudioManager() //定义背景音乐 const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐 page({ data:{ src:' ' }, onLoad:function(){ this.ceshi() }, ceshi:function(){ //这里 需要从接口获得背景音乐的路劲,我

微信小程序setData复杂数组的更新、删除、添加、拼接

众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ id: 1, goods: {id: 1, name: 'wechat'}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }] }, 索引部分删除 1 let ind