微信的audio无法自动播放的问题

一、问题

最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去。

1.在audio标签里引入了autoplay属性;

经过测试发现Android上可以自动播放,ios上无法自动播放。

    

  <audio id="audio" src="1.mp3" autoplay="autoplay"></audio>

  

2.在js文件中执行audio.play();

经过测试发现Android上可以自动播放,ios上无法自动播放。

  var audio=document.querySelector("#audio");
  audio.play();

  

二、解决办法

1.方法一

  ps:此方法转载自(http://www.cnblogs.com/xiezhonglong/p/5780942.html)

//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。

//首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

//然后写方法 : 

function autoPlayAudio1(){
  wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
    debug: false,
    appId: ‘‘,
    timestamp: 1,
    nonceStr: ‘‘,
    signature: ‘‘,
    jsApiList: []
  });
  wx.ready(function() {
    document.getElementById(‘audio‘).play();
  });
}
autoPlayAudio1();

  

  2、方法二

  var audio=document.querySelector("#audio");
    document.addEventListener("WeixinJSBridgeReady",function(){
	audio.play();
    },false);

  

时间: 2024-10-12 20:25:25

微信的audio无法自动播放的问题的相关文章

【转】ios下audio不能自动播放的问题

<!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 微信 6.5.2 自动播放音乐 解决方案

之前仅仅是IPhone7\7p 的问题,现在已经扩展到6 .6s.今天在下也行了最新微信,音乐问题果然来了. 好了 下面直接进入正题 首先 引入 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 然后 window.onload=function() { document.addEventListener("WeixinJSBridgeReady", f

关于手机端audio无法自动播放问题解决方法

此方法可能只适用与用微信浏览器打开的页面... <audio id="a" src="bg.mp3" autoplay></audio> 第一步:引入微信js <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 第二步:wx.config wx.config({ debug: false, // 开启调试模式,调

微信浏览器实现音乐自动播放

转至:http://www.ipastimes.com/post/52.html HTML5音频播放在移动端有局限性,在移动版 Safari 中加载的页面上,不能自动播放音频文件.音频文件只能从用户触发的触摸(单击)事件加载.如果在 HTML 标记中使用了 autoplay 属性,那么移动版 Safari 将会忽略这个属性,并且不会在加载页面时播放此文件,避免移动端流量在不知不觉中浪费,很人性化的设计.但对HTML5应用开发者来说,这不是个好消息. 网上查找了很多资料,通过hack手段来实现自动

audio标签自动播放在安卓播放正常,IOS不能自动播放

<img class="musicPic" src="./music.png" id="musicIcon" /> <audio style="display: none;" autoplay="autoplay" id="autoplay" controls="controls"loop="loop" preload="

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

移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio src="../audio/one.mp3" id="audioPlay"></audio> js: wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: data.con

android audio无法自动播放

audio无法在android4.4+和ios6以上的版本自动播放,因为他们出于安全考虑,做了限制.必须用户自己手工点击才能播放,程序是控制不了播放的. 整死我了,整整搞了2天,查不出所以然,原来就这么回事. 下次遇到问题还是要拓宽思路,多百度.埋头研究是事半功倍的.

解决 iOS 9.1 微信内置浏览器中html audio 不能自动播放的问题

使用微信现在提供过的微信js-sdk 在ready中进行播放便可. 首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 然后写方法 : function autoPlayAudio1() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonce

html - html5 audio 音乐自动播放,循环播放等

转自:http://blog.csdn.net/u012246458/article/details/50618759 audio播放音乐 [java] view plain copy <audio id="audio" src="images/openspeech.mp3" style="opacity:0" preload="auto" controls loop hidden="true"/&g