JS HTML5 音乐天气播放器(Ajax获取天气信息)

195 阅读 0 评论 129 点赞

我是靠谱客的博主义气小海豚，最近开发中收集的这篇文章主要介绍JS HTML5 音乐天气播放器(Ajax获取天气信息)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

晚上要考软件工程，实在不想复习。写个播放器吧，这个只是个用来学习的小Demo，众多不完善之处，下面贴出源代码，如果要转载，请加上版权声明

PS:因为Ajax涉及到跨域获取天气信息，有两个版本，一个是直接跨域，IE10支持，其他的浏览器要改配置。另一个是服务器端的weather.php，获取天气信息返回json。
weather.php就不写了，里面的对应路径存放对应的文件

演示地址:
http://569375.ichengyun.net/fm/

实现功能：
音乐播放，进度调节（滑动模块），音量条件，音乐随机选择，背景图片，图片预加载，音乐预加载，天气Ajax获取
音乐列表使用的json处理（也可以理解是hash表）

复制代码代码如下:

 
<!DOCTYPE html > 
<html> 
<head> 
<title>音乐天气</title> 
<meta charset='utf-8' /> 
</head> 
<style type='text/css'> 
body{margin:0; padding:0; } 
.clear{clear:both;} 
#weather-body{margin:0; padding:0; } 
#weather{ position:absolute;left:20px; top:30px;font-family:"Microsoft YaHei","SimHei";} 
#weather p{ } 
p#weather-city{ width:100px; color:#FFF; margin:20px; font-size:28px; } 
p#weather-temperature{ width:200px; color:#FFF; margin:20px; margin-left:50px; font-size:32px;} 
p#weather-stat{ width:200px; color:#FFF; margin:20px; font-size:26px; } 
#music-box{ position:absolute;right:20px; padding:30px;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity: 0.7;opacity: 0.7;bottom:30px; text-align:center;} 
#music-box div{ } 
#music-box:hover{filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;} 
h2#song-title{ font-family:"Microsoft YaHei","SimHei"; color:#fff;} 
h3#song-author{font-family:"Microsoft YaHei","SimHei"; color:#fff;} 
div#music-process{ width:400px;} 
div#music-process-p{float:left; margin:0px 20px 0 20px; display:block;width:290px;background:url(./images/button.gif) 0 -133px repeat-x ; height:40px; } 
span#music-process-slide{ cursor:pointer;display:block;float:left; width:30px;background:url(./images/button.png) -30px -230px no-repeat ; height:30px;} 
div#music-ctime{display:block; float:left; color:#FFF; font-weight:bold; width:40px;height:30px;font-family:"Arial";} 
div#music-etime{display:block; float:left; color:#FFF;font-weight:bold;width:40px;height:30px;font-family:"Arial";} 
div#music-play{ cursor:pointer; display:none;margin:10px auto;width:100px; border:0px #FFF solid; background:url(./images/button.png) 0 -12px no-repeat ; height:70px;} 
div#music-next{cursor:pointer;display:none; margin:10px auto; width:100px; margin-top:15px; border:0px #FFF solid; background:url(./images/button.png) 0 -85px no-repeat ; height:40px;} 
div#music-volume{float:right; margin:10px;width:50px;} 
div#music-volume-v{float:left; display:block;width:50px;background:url(./images/button.png) 3px -250px no-repeat ; height:100px; } 
span#music-volume-slide{cursor:pointer;display:block;float:left; width:40px;background:url(./images/button.png) 0px -353px no-repeat ; height:30px;} 
</style> 
<script type="text/javascript" > 
/* 
版权声明 
作者:EI Nino 
Email:Jinyachen@gmail.com 
*/ 
var music =''; 
var musicBox =''; 
var musicPlay=''; 
var musicNext=''; 
var musicV=''; 
var musicProcess=''; 
var musicSlide=''; 
var musicSlideLeft=0; 
var musicCtime=''; 
var musicEtime=''; 
var musicVolume=''; 
var musicVolumeSlide=''; 
var mouseX=''; 
var mouseY=''; 
var mouseDown=false; 
var bdy=''; 
var backgroundImages=new Array(); 
var backgroundNumber=1; 
var songNumver=1; 
var playList=new Array(); 
var nextSong=''; 
var songs=new Array(); 
//**************************************// 
//INIT WEB 
//*************************************// 
function init(){ 
//**************************************// 
//Musci Box 
//*************************************// 
musicBox = document.getElementById("music-box"); 
musicPlay= document.getElementById('music-play'); 
musicNext= document.getElementById('music-next'); 
musicCtime=document.getElementById('music-ctime'); 
musicEtime=document.getElementById('music-etime'); 
musicSlide=document.getElementById('music-process-slide'); 
musicProcess=document.getElementById('music-process-p'); 
musicVolume=document.getElementById('music-volume-v'); 
musicVolumeSlide=document.getElementById('music-volume-slide'); 
musicSlide.style.marginLeft="0px"; 
musicProcess.style.width="270px"; 
bdy=document.getElementsByTagName('body'); 
bdy=bdy[0]; 
var screenH = window.screen.height; 
var screenW = document.body.clientWidth; 
//Background cache // 
backgroundNumber =Math.ceil(Math.random()*10); 
backgroundImages[0] =new Image(); 
backgroundImages[1]= new Image(); 
backgroundImages[0].src= "./rain/"+backgroundNumber+".jpg"; 
backgroundImages[1].src= "./rain/"+(backgroundNumber >= 10 ? 1:backgroundNumber+1)+".jpg"; 
bdy.style.background="url("+backgroundImages[0].src+") top"; 
//*****************// 
music = document.getElementsByTagName('audio'); 
music = music[0]; 
music.autobuffer=true; 
setInterval(mProcess,1000); 
musicProcess.addEventListener('mousedown',mSlideProcessDown); 
musicProcess.addEventListener('mousemove',mSlideProcessMove); 
musicProcess.addEventListener('mouseup',mSlideProcessUp); 
musicVolume.addEventListener('mousedown',mSlideVolumeDown); 
musicVolume.addEventListener('mousemove',mSlideVolumeMove); 
musicVolume.addEventListener('mouseup',mSlideVolumeUp); 
//*******************Music Box end******************// 
//********************************************************// 
//Weather Box 
//*******************************************************// 
var wget = new XMLHttpRequest(); 
var url=""; 
url='./weather.php'; 
url="http://m.weather.com.cn/data/101110200.html"; 
var weatherInfo=new Array(); 
wget.open('GET',url); 
wget.onreadystatechange=function(){ 
if(wget.readyState=='4' &&wget.status==200) 
{ 
weatherInfo= wget.responseText; 
weatherInfo=eval("["+weatherInfo+"]"); 
weatherInfo=weatherInfo[0]['weatherinfo']; 
document.getElementById('weather-city').innerHTML=weatherInfo['city']; 
document.getElementById('weather-temperature').innerHTML=weatherInfo['temp1']; 
document.getElementById('weather-stat').innerHTML=weatherInfo['weather1']; 
} 
} 
wget.send("User-Agent:Mozilla/4.04[en](Win95;I;Nav)"); 
//*******************Weather Box end*************************************// 
} 
function mProcess(){ 
if(1) 
{ 
var ctime = music.currentTime; 
var time = Math.floor(ctime/60)+":"+(Math.floor(ctime-60*Math.floor(ctime/60))<10 ? "0"+Math.floor(ctime-60*Math.floor(ctime/60)) : Math.floor(ctime-60*Math.floor(ctime/60))); 
var time2 =music.duration-music.currentTime; 
var etime=Math.floor(time2 /60)+":"+(Math.floor(time2-60*Math.floor(time2/60))<10 ? "0"+Math.floor(time2-60*Math.floor(time2/60)) : Math.floor(time2-60*Math.floor(time2/60))); 
var ra = music.currentTime/music.duration; 

var mpw=musicProcess.style.width; 
mpw = mpw.substring(0,mpw.indexOf('px')); 
musicSlide.style.marginLeft = mpw *ra+"px"; 

musicCtime.innerHTML=time; 
musicEtime.innerHTML=etime; 
if(music.ended==true) 
{ 
mRandPlay(); 
} 
} 
} 
//**************************************************************// 
//Process 
//**************************************************************// 
function mSlideProcessDown(e){ 
mouseDown=true; 
mouseX = e.pageX; 
} 
function mSlideProcessMove(e){ 
if(mouseDown==true) 
{ 
var mLeft= (e.pageX-mouseX); 
var t2 = music.currentTime+music.duration*mLeft/musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px')); 
t2=t2>0 ? t2:0; 
mLeft=musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'))*t2/music.duration; 
musicSlide.style.marginLeft= (mLeft>0&&mLeft<300 ? mLeft:0)+"px"; 

} 
} 
function mSlideProcessUp(e){ 
if(mouseDown==true) 
{ 
mouseDown=false; 

var mLeft= (e.pageX-mouseX); 
var t2 = music.currentTime+music.duration*mLeft/musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px')); 
mLeft=musicProcess.style.width.substring(0,musicProcess.style.width.indexOf('px'))*t2/music.duration; 
t2=t2>0 ? t2:0; 
musicSlide.style.marginLeft= (mLeft>0&&mLeft<300 ? mLeft:0)+"px"; 
mouseDown=false; 
mouseX=0; 

music.currentTime=t2; 


} 
mouseDown=false; 
} 
//**********************Process end****************************************// 
//**************************************************************// 
//Volume// 
//**************************************************************// 
function mVolume(){ 
music.volume=0.5; 
musicVolumeSlide.style.marginTop = 70 *(1-music.volume)+"px"; 
} 
var vT=0; 
var aT=0; 
function mSlideVolumeDown(e){ 
mouseDown=true; 
mouseY = e.pageY; 
if(musicVolume.style.height=='') 
musicVolume.style.height="100px"; 
vT = musicVolumeSlide.style.marginTop.substring(0,musicVolumeSlide.style.marginTop.indexOf('px')); 
aT= musicVolumeSlide.style.marginTop.substring(0,musicVolumeSlide.style.marginTop.indexOf('px'))/musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px')); 

} 
function mSlideVolumeMove(e){ 
if(mouseDown==true) 
{ 
var mTop= (e.pageY-mouseY); 
//document.getElementById('show-statu').innerHTML=aT*musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px'))+mTop; 
mTop=aT*musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px'))+mTop; 
musicVolumeSlide.style.marginTop= (mTop>0&&mTop<100 ? mTop:0)+"px"; 

} 
} 
function mSlideVolumeUp(e){ 
if(mouseDown==true) 
{ 
mouseDown=false; 
var mTop= (e.pageY-mouseY); 
mTop=aT*musicVolume.style.height.substring(0,musicVolume.style.height.indexOf('px'))+mTop; 
musicVolumeSlide.style.marginTop= (mTop>0&&mTop<100 ? mTop:0)+"px"; 
mouseDown=false; 
mouseY=0; 
music.volume=1-mTop/100; 
} 
mouseDown=false; 
} 
//**********************Volume end****************************************// 
/* 
播放和暂停按钮 
*/ 
function mPlay(){ 
var time = Math.floor(music.duration/60)+"分"+Math.floor(music.duration-60*Math.floor(music.duration/60))+"秒"; 
switch(music.paused){ 
case true: 
{ 
music.play(); 
musicPlay.style.background="url(./images/button.png) 0 -159px no-repeat"; 
break; 
} 
case false: 
{ 
music.pause(); 
musicPlay.style.background="url(./images/button.png) 0 -12px no-repeat"; 
break; 
} 
} 
} 
/* 
载入歌曲 
*/ 
var songNum=1; 
function loadSongs(){ 
playList={0:11, 
1:{'title':"我们没有在一起",'author':'刘若英','src':"./storage/womenmeiyouzaiyiqi.mp3"}, 
2:{'title':"Apologize",'author':'Onerepublic','src':"./storage/Apologize.mp3"}, 
3:{'title':"Breathless",'author':'Shayne Ward','src':"./storage/Breathless.mp3"}, 
4:{'title':"Call Me Maybe",'author':'Carly Rae Jepsen','src':"./storage/Carly Rae Jepsen - Call Me Maybe.mp3"}, 
5:{'title':"valder fields",'author':'tamas wells','src':"./storage/tamas-wells-valder-fields.mp3"}, 
6:{'title':"不再联系",'author':'夏天Alex','src':"./storage/buzailianxi.mp3"}, 
7:{'title':"What Are Words",'author':'chris medina','src':"./storage/What Are Words.mp3"}, 
8:{'title':"you can trust in me",'author':'tang nguoi toi yeu','src':"./storage/tang nguoi toi yeu - you can trust in me.mp3"}, 
9:{'title':"Stay Here Forever",'author':'Jewel','src':"./storage/Stay Here Forever.mp3"}, 
10:{'title':"泪的物语",'author':'Oceans Of Love','src':"./storage/tears.mp3"}, 
11:{'title':"亲爱的路人",'author':'刘若英','src':"./storage/qinaideluren.mp3"}, 
}; 
//Songs cache and change// 
var listCount = playList[0]; 
var num =Math.ceil(Math.random()*10)%(listCount+1); 
songNum=num; 
if(songNum>listCount) 
songNum=1; 
num=songNum; 
songs[0]=playList[num>0? num :num+1]; 
num=((songNum+1) > listCount ? 1 : (songNum+1)); 
songs[1]=playList[num>0? num :num+1]; 
music.src=songs[0]['src']; 
nextSong = new Audio(); 
nextSong.src=songs[1]['src']; 
nextSong.load(); 
//**************************// 
document.getElementById('song-title').innerHTML=songs[0]['title']; 
document.getElementById('song-author').innerHTML=songs[0]['author']; 
setTimeout(canPlay,2000); 
setTimeout(canRand,30000); 
} 
/* 
随机播放列表的歌曲 
*/ 
function mRandPlay() 
{ 
//Backgorund cache and change// 
backgroundNumber =Math.ceil(Math.random()*10); 
bdy.style.background="url("+backgroundImages[1].src+") top"; 
backgroundImages[1].src= "./rain/"+(backgroundNumber >= 10 ? 1:backgroundNumber+1)+".jpg"; 
//***************// 
var listCount = playList[0]; 
//Songs cache and change// 
music.pause(); 
music=nextSong; 
document.getElementById('song-title').innerHTML=songs[1]['title']; 
document.getElementById('song-author').innerHTML=songs[1]['author']; 
var num =Math.ceil(Math.random()*10)%(listCount+1); 
songNum+=1; 
if(songNum>listCount) 
songNum=1; 
num=songNum; 
songs[1]=playList[num>0? num :num+1]; 
nextSong = new Audio(); 
nextSong.src=songs[1]['src']; 
nextSong.load(); 
//***************// 
//musicPlay.style.display='block'; 
musicNext.style.display='none'; 
setTimeout(canRand,30000); 
mPlay(); 
} 
function canPlay(){ 
musicPlay.setAttribute('onClick','javascript：mPlay()'); 
musicPlay.style.display='block'; 
} 
function canRand(){ 
musicNext.setAttribute('onClick','javascript：mRandPlay()'); 
musicNext.style.display='block'; 
} 
</script> 
<body > 
<div id='weather-body'> 
<div id='weather'> 
<p id='weather-city'>喜欢一个人</p> 
<p id='weather-temperature'>不难</p> 
<p id='weather-stat'>被同一个人喜欢<br/>好难</p> 
</div> 
<div id='music-box'> 
<audio src="./storage/我们没有在一起.mp3" > 
您的浏览器暂不支持HTML5 请选择Google chrome或其他支持HTML5的浏览器 
</audio> 
<div id='music-process'> 
<h2 id='song-title'></h2> 
<h3 id='song-author'></h3> 
<div id='music-ctime'>0:00</div> 
<div id='music-process-p'> 
<span id='music-process-slide'> 
</span> 
</div> 
<div id='music-etime'>0:00</div> 
<br class='clear' /> 
</div> 
<div id='music-volume'> 
<div id='music-volume-v'> 
<span id='music-volume-slide'> 
</span> 
</div> 
<br class='clear' /> 
</div> 
<div id='music-play' ></div> 
<div id='music-next' ></div> 
<br class='clear' /> 
</div> 
</body> 
<script type="text/javascript" > 
window.onload=init(); 
mVolume(); 
loadSongs(); 
</script> 
</html> 