首页
所有分类
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 测试及效验工具
Apr 18 Javascript
JavaScript极简入门教程（一）：基础篇
Oct 25 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
webpack4的迁移的使用方法
May 25 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
微信小程序实现图片上传
May 23 Javascript
小程序实现密码输入框
Nov 16 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
PR-D3L(1) CPU(2) ICF-SW100(1) AE3805(1) SRF-22W(1) SRF-40W(1) 德生G88(1) 德生1994(1) 纸巾盒(1) ICF-F10(1)
You might like
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP中的类型约束介绍
2015/05/11 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
php获取目录下所有文件及目录（多种方法）（推荐）
2019/05/14 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
XML的代替者----JSON
2007/07/21 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
Python抓取手机号归属地信息示例代码
2016/11/28 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
python中yield的用法详解——最简单，最清晰的解释
2019/04/04 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Maison Lab荷兰：名牌Outlet购物
2018/08/10 全球购物
老师自我鉴定范文
2013/12/25 职场文书
采购员的工作职责
2013/12/26 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年度考核工作总结
2014/12/24 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python