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

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

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

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

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







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;}

喜欢一个人

不难

被同一个人喜欢
好难

您的浏览器暂不支持HTML5 请选择Google chrome或其他支持HTML5的浏览器

0:00




0:00




















文件目录结构：
images:存放botton.png
rain:存放背景
storage:存放mp3格式音乐