编程 Javascript

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

Posted in Javascript onMay 26, 2013

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>

文件目录结构：
images:存放botton.png
rain:存放背景
storage:存放mp3格式音乐
JS HTML5 音乐天气播放器(Ajax获取天气信息)

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 无符号右移运算符

Apr 17 Javascript

jquery 简单的进度条实现代码

Mar 11 Javascript

jQuery学习笔记之jQuery的动画

Dec 22 Javascript

很棒的学习jQuery的12个网站推荐

Apr 28 Javascript

JS检测输入字符是否包含非法字符的示例代码

Feb 11 Javascript

jQuery中:visible选择器用法实例

Dec 30 Javascript

jQuery实现的经典竖向伸缩菜单效果代码

Sep 24 Javascript

JS实现鼠标滑过显示边框的菜单效果

Sep 21 Javascript

D3.js实现文本的换行详解

Oct 14 Javascript

基于BootStrap multiselect.js实现的下拉框联动效果

Jul 28 Javascript

Vue实现购物小球抛物线的方法实例

Nov 22 Vue.js

JavaScript分页组件使用方法详解

Jul 26 Javascript

jQuery动态地获取系统时间实现代码

May 24 #Javascript

JavaScript事件处理器中的event参数使用介绍

May 24 #Javascript

Jquery多选下拉列表插件jquery multiselect功能介绍及使用

May 24 #Javascript

js过滤HTML标签以及空格的思路及代码

May 24 #Javascript

jQuery实现表头固定效果的实例代码

May 24 #Javascript

如何阻止复制剪切和粘贴事件为了表单内容的安全

May 23 #Javascript

使用js+jquery实现无限极联动

May 23 #Javascript