audio 自动播放

<audio id="voice" loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>

src:音频地址

autoplay:音频加载完毕后自动播放。

controls:显示播放控制条。

loop:播放完毕后会重复播放。

preload:1)auto 预加载音频视频。2）metadata 只预加载音频视频元数据。有autoplay时此属性无效。

微信浏览器：

var voice = document.getElementById('voice');voice.play();   //调用播放
//判断 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {voice.play();
}else {//监听客户端抛出事件 "WeixinJSBridgeReady"if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady", function(){voice.play();}, false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady", function(){voice.play();});document.attachEvent("onWeixinJSBridgeReady", function(){voice.play();});}
}

ios浏览器：

iOS Safari 不允许自动播放 audio，只能通过用户交互触发.而 Safari 浏览器可没有内置 WeixinJSBridge 接口,所以一般的做法是监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频

var flag= true;   //flagdocument.addEventListener("touchstart",function(e){if(voiceStatu){voice.play();flag = false;}
}, false);

audio 自动播放相关推荐

audio自动播放遇到的问题
audio自动播放遇到的问题 ios限制了自动播放视频.自动播放音频,必须有用户行为才可以播放像背景音乐可以这样添加事件监听,在页面初始化后就可以自动播放 <script src=" ...
解决iOS h5 audio自动播放（亲测有效）
微信H5页面,实现audio自动播放: function initMusic() {//动态创建一个audio节点var audio = document.createElement('audio') ...
解决新版Chrome拦截自动播放（Google浏览器不支持audio自动播放问题）
Google浏览器不支持audio自动播放声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在20 ...
解决audio自动播放无效问题
目录问题描述解决办法1 解决办法2 解决办法3 解决办法4 解决办法5 问题描述在360或者qq浏览器,audio的自动播放属性目前为止是有效的,网页的body里面插入下面代码后,打开页面就会自 ...
android audio 自动播放,HTML5之audio无法自动播放的问题
HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法.这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又 ...
chrome浏览器下audio自动播放的hack
前言也许很多前端遇到过这个需求:消息提醒. 一般来说,可以简单的实现绝不会用复杂的方式,audio标签提供了这个功能. 但是,新版的chrome浏览器禁止了js自动播放音频的功能,见鬼了. 音频播放 ...
ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
chorme vue中使用audio自动播放问题
我这里是将audio文件放在static文件夹中,vue页面中直接引用: <audio class="audio" src="./static/audio/alar ...
audio 自动播放 iPhone微信客户端
audio标签,android系统可以自动播放MP3,但是iPhone系统不起作用. <audio id="myaudio" autoplay="autoplay& ...
解决H5 audio自动播放无效问题（应用于一切环境的一切浏览器）
通过查询多个文档改了很多的script但是还是没有用的,以下方法暴力简单这个办法需要用户点击了页面才会自动播放音乐. <audio id="bgmusic" src=&qu ...

audio 自动播放

audio 自动播放相关推荐

最新文章

热门文章