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>

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

赞 (0)

相关推荐

  • 原生JS实现小小的音乐播放器

    前  言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到

  • 比较炫的图片播放器 js 焦点效果代码

    图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a

  • js实现的万能flv网页播放器代码

    本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20

  • js的flv视频播放器插件使用方法

    使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧. <div class="txt1"> <script type="text/javascript"> var swf_width=307 var swf_height=182 var texts='快乐星汉堡' var files='http://v.78.cn/kuailexing/sp.flv' </script> <!--<scri

  • javascript实现简单的html5视频播放器

    javascript实现简单的html5视频播放器

    效果: 代码很简单 js define("html5_video_player", [ '../avalon-min'], function(avalon) { function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds % 60); minutes = (minutes >

  • javascript 播放器 控制

    详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link href="style/style.css&quo

  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码 代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA

  • js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

    本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu

随机推荐