移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐。

既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码:

  1. html:
      <audio src="../audio/one.mp3" id="audioPlay"></audio>
  2.  
  3. js:
      wx.config({
  4.   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
  5.   appId: data.configMap.appId, // 必填,公众号的唯一标识
  6.    timestamp: data.configMap.timestamp, // 必填,生成签名的时间戳
  7.   nonceStr: data.configMap.nonceStr, // 必填,生成签名的随机串
  8.    signature: data.configMap.signature,// 必填,签名,见附录1
  9.  jsApiList: [
  10. "onMenuShareTimeline",//分享朋友圈接口
  11. "onMenuShareAppMessage"//分享给朋友接口
  12.  ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  13.   });
      wx.ready(function(){
        var audio = document.getElementById("audioPlay");
        audio.play()
      })

wx.config配置成功之后执行wx.ready,在ready里让音乐播放就可以达到自动播放的要求,遗憾的是这个方法只能让音乐自动播放,视频还是需要触发才能自动播放...

微信h5,背景音乐自动播放的更多相关文章

  1. 新版微信h5视频自动播放

    微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...

  2. 解决 iPhone 微信 H5 无法自动播放音乐问题

    使用 wx sdk 在html导入sdk js文件.(如果网站是https导入的sdk也要使用https!) 然后在 wx.ready 中设置 play 方法并复制给全局变量 fm,当需要使用的时候再 ...

  3. H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)

    <template> <audio src="./static/music.mp3" id="bgMusic" preload="a ...

  4. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  5. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  6. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. H5的audio在ios系统的微信上不能自动播放的问题

    前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题: 撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中 ...

  8. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  9. HTML5中的audio在手机端和 微信端的自动播放

    再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...

随机推荐

  1. 阿里云Oss对象存储

    将文件保存到阿里云上. 1.添加对象存储OSS空间 (新建Bucket) 可以在阿里云后台对象存储里面添加,也可以通过api添加.添加之后设置权限. skd使用. 1安装 Aliyun.OSS.SDK ...

  2. I2C 上拉电阻选择计算公式

    I2C接口上拉电阻的选择 - I2C接口上拉电阻的选择 1.I2C接口的输出端是漏极开路或集电极开路,所以必须在接口外接上拉. 2.上拉电阻的范围很宽,但也需要跟据功耗.信号上升时间等具体确定. 和速 ...

  3. springboot秒杀课程学习整理1-5

    1)交易模型设计 交易模型(用户下单的交易模型)OrderModel id(String 交易单号使用String), userId,itemId,amount(数量),orderAmount(总金额 ...

  4. TLS通信过程

    TLS通信过程 握手与密钥协商过程 基于RSA握手和密钥交换的客户端验证服务器为示例详解TLS/SSL握手过程 sequenceDiagram client->>server: clien ...

  5. shell脚本的多线程

    shell脚本的多线程 #!/bin/bash ###这是个多线程脚本!!!! ..} do { .$i >/dev/null ];then echo "192.168.2.$i 存活 ...

  6. 查看python内部模块命令,内置函数,查看python已经安装的模块命令

    查看python内部模块命令,内置函数,查看python已经安装的模块命令 可以用dir(modules) 或者用 pip list或者用 help('modules') 或者用 python -m  ...

  7. Spring Cloud各个组件的配套使用

    我们从整体上来看一下Spring Cloud各个组件如何来配套使用:  从上图可以看出Spring Cloud各个组件相互配合,合作支持了一套完整的微服务架构. 其中Eureka负责服务的注册与发现, ...

  8. LeetCode 547 朋友圈

    题目: 班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指所有朋友的 ...

  9. Main Steps to Setup an ODI data sync

    0. Get ODI installed 1. Topo physical Architecture/new physical schema 2. New Logical schema 3. New ...

  10. Linux安装软件、python开发环境

    软件安装与卸载 更新Ubuntu软件下载地址 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件的AppSt ...