原生js跳转页面音乐不间断播放

效果:

html代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TTTtitle>
	<link rel="stylesheet" href="index.css">
head>
<body>
	<div class="music">
		<div class="bgm_text">div>
		<div class="bgm_btn">
			<span class="bgm_btn_play">播放span>
			<span class="bgm_btn_stop">暂停span>
			<span class="bgm_btn_next">下一首span>
			<span class="bgm_btn_rest">重置span>
		div>
		<audio value="1" id="bgm" controls>audio>
	div>
	<script src="index.js">script>
body>
html>

css代码:

body{
	background-image:url(image/bg.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}
.music{
	position:fixed;
	top:50vh;
}
.bgm_text{
	color:#F5DEB3;
	text-align:center;
	margin-bottom:10px;
}
.bgm_btn{
	
}
.bgm_btn>span{ 
	cursor:pointer;
	display:block;
	margin-bottom:10px;
	color:#FFA500;
}
.bgm_btn>span:nth-child(1){
	
}
.bgm_btn>span:nth-child(2){
	
}
.bgm_btn>span:nth-child(3){
	
}
.bgm_btn>span:nth-child(4){
	
}
.bgm_btn>span:hover{
	color:white;
}
#bgm{
	display:none;
}

js代码:

window.onload=function(){
	var bgm_text=document.querySelector('.bgm_text');
	var bgm_btn_play=document.querySelector('.bgm_btn_play');
	var bgm_btn_stop=document.querySelector('.bgm_btn_stop');
	var bgm_btn_next=document.querySelector('.bgm_btn_next');
	var bgm=document.getElementById('bgm');
	//播放暂停
	bgm_btn_play.onclick=function(){
		bgm.play();
	}
	bgm_btn_stop.onclick=function(){
		bgm.pause();
	}
	if(localStorage.getItem('bgm_gds')!=null){
		bgm.setAttribute('value',localStorage.getItem('bgm_gds'));
		bgm.innerHTML='+localStorage.getItem('bgm_gds')+'.mp3" type="audio/mpeg">';
		bgm_text.innerHTML='当前播放第'+localStorage.getItem('bgm_gds')+'首歌曲';
	}else{
		bgm.setAttribute('value',1);
		bgm.innerHTML='';
		bgm_text.innerHTML='当前播放第1首歌曲';
	} 
	//下一首
	bgm_btn_next.onclick=function(){
		var bgm_gds=bgm.getAttribute('value');
		if(bgm_gds<4){
			bgm_gds++;
		}else{
			bgm_gds=1;
		}
		bgm.innerHTML='+bgm_gds+'.mp3" type="audio/mpeg">';
		bgm_text.innerHTML='当前播放第'+bgm_gds+'首歌曲';
		bgm.load();
		bgm.play();
		bgm.setAttribute('value',bgm_gds);
		localStorage.setItem('bgm_gds',bgm_gds);
	}
	bgm.onended=function(){
		bgm_btn_next.click();
	};
	//重置
	var bgm_btn_rest=document.querySelector('.bgm_btn_rest');
	bgm_btn_rest.onclick=function(){
		bgm.pause();
		setTimeout(function(){
			localStorage.removeItem('bgm_gds');
			localStorage.removeItem('bgm_time');
			bgm.setAttribute('value',1);
			bgm.innerHTML='';
			bgm_text.innerHTML='当前播放第1首歌曲';
			bgm.load();
			bgm.play();
		},200);
	}
	//切换或刷新页面音轨补偿,1s后开始补偿
	setTimeout(function(){
		//如果发现本地有存储,则进行音轨补偿
		if(localStorage.getItem('bgm_time')!=null){
			bgm.currentTime=localStorage.getItem('bgm_time');
			bgm.play();
			/*音量逐渐增大*/
		    bgm.volume = 0;
  			v = 0;
            var t = setInterval(function(){
                v+= 0.005;
                if(v<=1){
            		bgm.volume = v;
                }else{
                    clearInterval(t);
                }
            },25);
		}
		//每100ms周期执行播放进度记录
		window.setInterval(function(){
			//检查浏览器是否支持本地存储
			if(typeof(Storage)!=='undefined'){
				localStorage.setItem('bgm_time',bgm.currentTime);
			}else{
				var doc_body=document.querySelector('body');
				doc_body.innerHTML="

抱歉,您的浏览器过久,不支持localStorage本地存储。请更换新的浏览器再试

"
; } },100); //初始化就启动bgm bgm.play(); bgm.volume = 0; v = 0; var t = setInterval(function(){ v+= 0.005; if(v<=1){ bgm.volume = v; }else{ clearInterval(t); } },25); },1000); }

你可能感兴趣的:(原生js跳转页面音乐不间断播放)