首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 26, 2013

晚上要考软件工程，实在不想复习。写个播放器吧，这个只是个用来学习的小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>

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

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

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

Javascript 相关文章推荐
javascript中获取下个月一号，是星期几
Jun 01 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
详解javascript高级定时器
Dec 31 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
Lifecycle(1) Xception(1) tensorflow(2) Inception(2) Seaborn(1) Spring(9) ResNet50(1) yolo3(1) 内存泄露(1) PostMapping(1)
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
认识延迟时间为0的setTimeout
2008/05/16 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript学习笔记（三）BOM和DOM详解
2014/09/30 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python网络应用开发知识点浅析
2019/05/28 Python
荷兰演唱会和体育比赛订票网站：viagogo荷兰
2018/04/08 全球购物
来自世界上最好大学的在线课程：edX
2018/10/16 全球购物
J2EE相关知识面试题
2013/08/26 面试题
广告学毕业生求职信
2014/01/30 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript