微信h5，背景音乐自动播放

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

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

html:　　<audio src="../audio/one.mp3" id="audioPlay"></audio>

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

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

原文地址：https://www.cnblogs.com/caoxiaokang/p/9811815.html

时间： 2024-10-05 14:31:24

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

新版微信h5视频自动播放

微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { document.addEventListener("WeixinJSBridgeReady", function() { setTimeout(function(){ player.play();//调用h5播放器自动播放的方法,我们使用的是video.js播放器. },500); },

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

背景音乐自动播放，兼容ios

背景音乐自动播放,兼容ios <audio id="myAudio" autoplay loop> <source src=" bgMusic.mp3" type="audio/mp3"> 您的浏览器不支持 audio 标签. </audio> //背景音乐播放 function an(){ var audio = document.getElementById('myAudio'); if(audio.pau

解决手机微信浏览器视频自动播放和默认全屏问题

1.早期因为带宽和流量的因素,移动端浏览器禁止视频自动播放,现在现在流量便宜了.手机硬件越来越好了,部分可支持了2.在移动端浏览器, video 在用户点击播放或者通过API video.play() 触发播放时,会强制以全屏置顶的形式进行播放,设计的初衷可能是因为全屏能提供更好的用户体验 <video controls="controls" src="" id="ckplayer_a1" x5-video-player-type=&quo

ios微信上无法自动播放音频的情况

今天做个html5需要自动播放音频,发现在ios下autoplay="autoplay"是失效的 就想着强制用js强制播放 document.getElementById('music').play(); 发现并没有用 加上这段代码后才有作用 document.getElementById('music').play(); document.addEventListener("WeixinJSBridgeReady", function () {//监听微信准备就绪

H5音乐自动播放ios//禁止安卓手机图片点击

定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24px; display: block; position: absolute; top: 12px; right: 12px; z-index: 9999; background: url(images/musicbtn.png) no-repeat center/cover;"></d

iOS h5 audio自动播放设置

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa; background-color: #d0efd6 } span.s1 { color: #ba2da2 } span.s2 { color: #000000 } span.s3 { color: #4f8187 } self.webView.allowsInlineMediaPlayback = YES; self.webView.mediaP

【转】一种解决h5页面背景音乐不能自动播放的方案

原文:http://www.cnblogs.com/wmhuang/p/5452259.html ---------------------------------------------------------------------------------------------- 场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.D

一种解决h5页面背景音乐不能自动播放的方案

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&