注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

H5: 网页加载 背景音乐自动播放  

2017-04-23 00:43:38|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这个标题是个伪命题,因为最终并没有实现。
虽然我相信几乎所有用户在遇到一个会自己放音乐的网页时表情都是这样的
 H5: 网页加载 背景音乐自动播放 - 恶 - 早衰男的巢
 
但...甲方喜欢嘛

加载页面就让一个<audio>控件执行播放,其实没太多需要说的,在android和windows下都很顺利的调通了,可是ios上一直不能播放也没有报错,还模拟不出来。查了不少资料,发现是苹果的规定,禁止了这种行为,在用户非主动出发下不允许媒体控件的自动播放。
参考文:

直接丢实验了一个晚上的结论,失败的代码都在下面注释着没删

HTML部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Flamen" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>H5背景音乐控件</title>

<!--//引入jquery-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<link href="bgm.css" rel="stylesheet"/>

<style>
html,body{width: 100%;height: 100%;}
body {
background: url('sample.jpg');
background-position: center;
background-size: cover;
}

</style>

</head>

<body>

<!--//圆形的音乐按钮组件-->
<div id="audio_btn" class="rotate">
<audio loop src="bg_audio.mp3" id="media" autoplay preload="auto"></audio>
</div>

<script src="bgm.js"></script>

</body>
</html>



CSS部分:bgm.css

#audio_btn {
position: fixed;
top: 20px;
right:20px;
z-index:999;
width: 30px;
height: 30px;
background-image: url('ico_music.png');
background-size: contain;
filter:alpha(opacity=70);

}

.rotate {
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
from { -webkit-transform: rotate(0) }
to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
from { transform: rotate(0) }
to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
from { -moz-transform: rotate(0) }
to { -moz-transform: rotate(360deg) }
}



JS部分:bgm.js

var x = document.getElementById("media");

//ios无效 #1
/*
x.addEventListener("canplaythrough", function(){
x.play();
});
*/

$(function(){
//x.play(); //ios无效 #2
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停

//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.play();
}else{
x.pause();
}
});

//异步延迟也是无效的
/*
setTimeout(function(){
if($("#audio_btn").hasClass("rotate")){
alert("music should playing");
x.play();
}
},2000);
*/

//$("#audio_btn").click(); //模拟点击,无效 #3

//异步加载 ios无效 #4
/*
jQuery.ajax({
url: 'dump.txt',
async: false,
success: function() {
x.play();
}
});
*/

});

//一种体验欺骗,只要用户对页面有任何的触摸,音乐就开始播放
var bgm_init = false;
document.addEventListener('touchstart', function(){
if(x.paused && !bgm_init){
x.play();
bgm_init = true;
}else{}//初始化过就不管了
}, false);

结论:

ios(safari)下要网页加载就自动播放媒体,是不可能的。微信内置的浏览器有一些旁门左道可以取巧实现,但不保证可靠性不知道在哪个版本会修正。

还是很认博文的那句话
audio autoplay
  1. 苹果认为这是种不友好的行为
  2. 安卓同上
  3. 我同上

如果甲方态度坚定……选点轻柔的轻音乐吧..音量增益-60%.
  评论这张
 
阅读(133)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018