解决H5中背景音乐无法自动播放问题

完整代码如下，直接复制到文件里预览即可。音乐路径可能会失效，如无法播放可尝试更改音乐路径。亲测谷歌、火狐、opera、搜狗、360、微信都可。注意，苹果自带浏览器无法自动播放，需要主动触摸播放按钮。安卓浏览器可以自动播放。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.u-audio {width: 32px;position: absolute;top: 15px;left: 15px;z-index: 9999;}.u-audio .btn_audio {-webkit-animation: rotate 1.5s linear infinite;width: 32px;height: 32px;text-align: center;background: url("img/audio_open.png") red center center no-repeat;background-size: 32px;color: #fff;}.u-audio .btn_audio.closed {-webkit-animation: none;width: 32px;height: 32px;text-align: center;background: url("img/audio_close.png") center center no-repeat;background-size: 32px;}
</style>
</head>
<body><section class="u-audio "><div class="btn_audio">暂停</div></section><input type="hidden" id="phoneTxt" value="false" /><script src="https://code.jquery.com/jquery-1.12.4.min.js"></script><script type="text/javascript">var isPlayMuisc = true;function play(context, decodeBuffer) {isPlayMuisc = true;// 调用resume恢复播放context.resume();let source = context.createBufferSource();source.buffer = decodeBuffer;source.connect(context.destination);source.start(0);}async function playAudio(context, url) {let audioMedia = await request('https://res1.eqh5.com/a3fc62265d5e40e1b197d4275234c1d1.mp3');context.decodeAudioData(audioMedia, decode => play(context, decode));}audioInfo = new Audio;let context = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext)();// 如果能够自动播放if (audioInfo.autoplay) {playAudio(url);}playAudio(context, 'https://res1.eqh5.com/a3fc62265d5e40e1b197d4275234c1d1.mp3');function request(url) {return new Promise(resolve => {let xhr = new XMLHttpRequest();xhr.open('GET', url);// 这里需要设置xhr response的格式为arraybuffer// 否则默认是二进制的文本格式xhr.responseType = 'arraybuffer';xhr.onreadystatechange = function () {// 请求完成，并且成功if (xhr.readyState === 4 && xhr.status === 200) {resolve(xhr.response);}};xhr.send();});}document.addEventListener("WeixinJSBridgeReady", function () {context.resume();}, false);var browser = {versions: function () {var u = window.navigator.userAgent;return {trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器iPad: u.indexOf('iPad') > -1, //是否为iPadwebApp: u.indexOf('Safari') == -1,//是否为web应用程序，没有头部与底部weixin: u.indexOf('MicroMessenger') > -1 //是否为微信浏览器};}()}window.onload = function () {$(".btn_audio").on("click", function () {if ((browser.versions.android || browser.versions.iPhone) && !browser.versions.weixin) {if ($('#phoneTxt').val() == "false") {isPlayMuisc = false;$('#phoneTxt').val("true");}else {isPlayMuisc = true;$('#phoneTxt').val("false");}}if (isPlayMuisc) {isPlayMuisc = false;context.suspend();$(".u-audio").css({ "-webkit-transform": "rotate(0deg)" });$(".btn_audio").addClass("closed");} else {isPlayMuisc = true;$(".btn_audio").removeClass("closed");context.resume();}});}</script>
</body>
</html>

解决H5中背景音乐无法自动播放问题相关推荐

html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
关于h5中背景音乐的自动播放
音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"><sour ...
关于如何在html网页中插入可以自动播放的背景音乐
昨天想做一个带有自动播放背景音乐的html网页,频繁碰壁,最后终于找到问题所在: 一般大家会考虑到audio标签,然后在标签里使用autoplay.理论上是可以的,但是一定要注意浏览器的设置,浏览器一 ...
微信背景音乐不自动播放解决
微信背景音乐不自动播放解决 document.addEventListener('DOMContentLoaded',function (){function audioAutoPlay(){var ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
html插入视频时不自动播放,html5中嵌入视频自动播放的问题解决
在h5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...
H5 在ios上自动播放视频
前言最近的H5项目中有个开场动画使用了序列帧,但是因为原视频长达15秒,导出的序列帧很大,在loading阶段,用户等待时间过长,所以有这样的方案,在IOS中使用视频来代替序列帧,在安卓中由于不能自 ...
html视频如何不自动播放,html5中嵌入视频自动播放的问题解决
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...

解决H5中背景音乐无法自动播放问题

解决H5中背景音乐无法自动播放问题相关推荐

最新文章

热门文章