前端外包切图之h5背景音乐播放

5月/20日


切图网(qietu.com)是国内为数不多专业的前端外包切图开发服务商,h5手机网站因为屏幕小,内容少,所以通常需要绚丽的交互以及背景音乐来补偿,背景音乐播放在pc端的网站项目中不多见,但是在手机上很多见,有背景音乐的手机网页能够让人眼前一亮,增色不少。

关于手机h5下的背景音乐播放确存在很多坑,比如背景音乐默认播放问题,ios下默认播放问题,网页切换的时候,背景音乐不停的问题,jquery或者js如何控制音乐播放等等,下面的代码来自工作中的代码片段:

var playbgm = setTimeout(function(){

var mybgm = $(‘#bgm’)[0];

if (mybgm.paused){

try {
mybgm.play();
}
catch (e) {

}

}else{
clearInterval(playbgm);
}

},100)

$(‘#music’).click(function(){
if($(this).hasClass(‘stopped’)){
$(this).removeClass(‘stopped’);
$(‘#bgm’).get(0).play();
}
else{
$(this).addClass(‘stopped’);
$(‘#bgm’).get(0).pause();
}
})

window.onload = function(){

//音轨补偿代码
setTimeout(function(){
//获取DOM
var bgm = document.getElementById(‘bgm’);
//如果发现有本地存储,则进行音轨补偿
if(localStorage.getItem(‘bgm_time’) != null){
bgm.currentTime = localStorage.getItem(‘bgm_time’);
//启动播放音乐
bgm.play();
}
//不断循环记录播放进度
window.setInterval(function(){
//检测是否支持本地存储
if(typeof(Storage) !== ‘undefined’){
//写入BGM播放进度
localStorage.setItem(‘bgm_time’,bgm.currentTime);
}else{
//提示浏览器不支持
var doc_body = document.querySelector(‘body’);
doc_body.innerHTML = ‘<h1>抱歉!您的浏览器过旧,请更换新的浏览器再试</h1>’;
}
},100);
//初始化启动BGM
bgm.play();
},1000);

}

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang