今天做了一个播放器,不过美工没学好,所以样式有点丑,不多说贴码。
首先给个做好的界面:
1.首先是css,文件名:music.css
body{
margin:20px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
}
#musicList{
}
li{
list-style: url(../images/heart.png) outside circle;
line-height:20px;
padding-bottom:3px;
vertical-align: middle;
}
.float_r{float:right;}
.float_l{float:left;}
.playMode{text-align:right;}
.songStyle{
width: 300px;
margin-bottom:20px;
border:1px solid #96C2F1;
background-color: #EFF7FF
}
.songStyle h3{
margin: 1px;
padding: 1px 1px 1px 10px;
background-color: #B2D3F5;
height: 24px;
}
.playDiv{
width: 610px;
margin-bottom:10px;
border:1px solid #92B0DD;
background-color: #FFFFFf
}
.currentMusic{
background-color: #E2EAF8;
height: 24px;
width:100%;
}
.currentSpan{
padding-left:3px;
}
.lastMusic{
background-color: #E2EAF8;
text-align:center;
}
.lastMusic img{
width:32px;
height:32px;
cursor:pointer;
}
.infoStyle{
margin-left:10px;
width: 300px;
margin-bottom:20px;
border:1px solid #96C2F1;
background-color: #EFF7FF;
}
.infoStyle h3{
margin: 1px;
padding: 1px 1px 1px 10px;
background-color: #B2D3F5;
height: 24px;
}
.info{
width:49%;
}
.picInfo{
width:49%;
margin-right:2px;
height:100%;
}
strong span{
margin-left:4px;
}
.info div{
padding: 10px 0px 10px 10px;
font-size:12px;
}
.liOn{
background-color:#E3E197;
}
.Gray
{
filter:alpha(style=0,opacity=30,finishopacity=30);
}
2.javascript文件,文件名:music.js
var myMusic = null;
var MyMusic = function(){
var _this = this;
var musicBox_H = document.getElementById("musicBox");
var people = "images/people/";
//音乐列表
var musicFiles=[new MusicObj("HISTORY","musics/HISTORY.mp3","EXO-K","MAMA",people+"EXO-K.jpg",0,1),
new MusicObj("MAMA","musics/MAMA.mp3","EXO-K","MAMA",people+"EXO-K.jpg",0,1),
new MusicObj("Sexy, Free & Single","musics/Sexy, Free & Single.mp3","Super Junior","Sexy, Free & Single",people+"Super Junior.jpg",0,0),
new MusicObj("Muzik","musics/Muzik.mp3","4 Minute","4 Minute For Muzik Cd",people+"4 Minute.jpg",1,0),
new MusicObj("爱情终点","musics/爱情终点.mp3","王绎龙","电音之王",people+"wyl.jpg",0,0)
];
//播放模式 1-全部循环 2-单曲循环 3-随机播放
var playMode = 1;
//当前音乐播放的下标
var index = -1;
var length = musicFiles.length;
var playMode_H = $("#playMode");
var musicList_H = $("#musicList");
var playMsg_H = $("#playMsg");
var name = $("#name");
var author = $("#author");
var CD = $("#CD");
var picInfo = $("#picInfo");
var pop =$("#pop");
var playMsg = null;
_this.fristMusic = function(){
index = 0;
_this.play();
}
_this.playOrPause=function(){
pop.addClass("Gray");
var popVal = pop.attr("imgVal");
if(popVal == 0){
pop.attr("src","images/play/play.png");
pop.attr("title","点击播放");
pop.attr("imgVal","1");
musicBox_H.pause();
}else{
pop.attr("src","images/play/pause.png");
pop.attr("title","点击暂停");
pop.attr("imgVal","0");
musicBox_H.play();
}
}
_this.end = function(){
index = length -1;
_this.play();
}
_this.lastMusic = function(){
if(index == 0){
index = length-1;
}else{
index --;
}
_this.play();
}
_this.loadMusic = function(){
for(var i in musicFiles){
var html = "<li>"+musicFiles[i].name;
if(musicFiles[i].hot == 1){
html+="<img src='images/HOT/hot1.gif'/>";
}
if(musicFiles[i].newSong == 1){
html+="<img src='images/NEW/new.png'/>";
}
html+= "</li>";
musicList_H.append(html);
}
};
_this.nextMusic = function(){
var currentMusic = null;
switch(parseInt(playMode)){
case 1:
index ++;
if(index>=length){
index = 0;
}
break;
case 2:
if(index == -1){
index = 0;
}
break;
case 3:
index = Math.floor(Math.random()*length);
break;
}
_this.play();
};
_this.loadInfo = function(){
name.text(musicFiles[index].name);
author.text(musicFiles[index].author);
CD.text(musicFiles[index].CD);
picInfo.attr("src",musicFiles[index].people);
};
_this.play = function(){
currentMusic = musicFiles[index];
playMsg_H.text(musicFiles[index].name+"【"+musicFiles[index].author+"】");
$(musicBox_H).attr("src",musicFiles[index].url);
$("#musicList").children().each(function(i){
$($("#musicList").children().get(i)).removeClass("liOn");
});
$($("#musicList").children().get(index)).addClass("liOn");
_this.loadInfo();
musicBox_H.play();
};
_this.init = function(){
_this.loadMusic();
var songheight = $("#songs").height();
$("#infos").css("height",songheight+"px");
playMode_H.change(function(){
playMode = playMode_H.val();
});
};
}
$().ready(function(){
myMusic = new MyMusic();
myMusic.init();
myMusic.nextMusic();
});
//音乐对象
function MusicObj(name,url,author,cd,people,hot,newSong){
var _this = this;
this.name = name;
this.url = url;
this.author = author;
this.CD = cd;
this.people = people;
this.hot = hot;
this.newSong= newSong;
}
页面文件,music.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/music.js"></script>
<link href="css/music.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="playDiv">
<div class="currentMusic"><span class="currentSpan">当前正在播放:<span id="playMsg"></span></span></div>
<div>
<audio id="musicBox" controls onended="myMusic.nextMusic()" style="width:99%;padding-left:2px;">
An audio clip from Johann Sebastian Bach.
</audio>
</div>
<div class="currentBtns">
<div id="lastMusic" class="lastMusic">
<img title="第一首歌曲" src="images/play/first.png" onclick="myMusic.fristMusic()"/>
<img title="上一首歌曲" src="images/play/last.png" onclick="myMusic.lastMusic()"/>
<img title="点击暂停" id="pop" src="images/play/pause.png" onclick="myMusic.playOrPause()" imgVal="0"/>
<img title="下一首歌曲" src="images/play/next.png" onclick="myMusic.nextMusic()"/>
<img title="最后一首歌曲" src="images/play/end.png" onclick="myMusic.end()"/>
</div>
<div id="play"></div>
<div id="nextMusic"></div>
</div>
</div>
<div style="width:100%">
<div class="songStyle float_l">
<h3>歌曲列表 <div class="float_r"><span class="playMode">
<select id="playMode">
<option value="1">全部循环</option>
<option value="2">单曲循环</option>
<option value="3">随机播放</option>
</select>
</span></div></h3>
<div id="songs">
<ul id="musicList">
</ul>
</div>
</div>
<div class="infoStyle float_l">
<h3>歌曲信息</h3>
<div style="width:100%" id="infos">
<div class="info float_l">
<div><strong><span>歌名:</span><span id="name"></span></strong></div>
<div><strong><span>歌手:</span><span id="author"></span></strong></div>
<div><strong><span>专辑:</span><span id="CD"></span></strong></div>
</div>
<div class="picInfo float_l">
<img id="picInfo" style="width:100%;height:100%;"/>
</div>
</div>
<ul id="musicList">
</ul>
</div>
</div>
</body>
</html>
记住引入jquery.js,文中的图片均来自网络。
到这儿,基本都做好了:
今天续做了一个歌词播放的效果,不过还未完善好。
- 大小: 46.5 KB
- 大小: 44.1 KB
- 大小: 79.9 KB
分享到:
相关推荐
Java仿千千静听音乐播放器源代码.rar Java企业人事管理系统源码.rar java俄罗斯方块 java凭图游戏 Java利用DES私钥对称加密代码实例 Java加密解密工具集 JCT v1.0源码包.rar Java半透明图片实现的步骤及源代码.rar ...
操作案例4:制作音乐播放器页面 本章总结 本章作业 第6章jQuery Mobile基础 1 列表 1.1 整页列表与插入列表 1.2 视觉分隔符 1.3 交互行 1.4 图片 1.4.1 图标 1.4.2 缩略图 1.4.3 计数气泡 2 表单组件 2.1 表单动作 ...
音乐网站作为一个新时代传媒的产物,早已超过了 国界,使听音乐变的如此便捷,它摒弃了传统听音乐媒体的不足,正在快速向前发展。 二.课题的提出意义 当今时代是一个互联网络告诉发展和发达的时代,本课题的研究...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
0084 利用回溯法将一组数平均分成两组 56 0085 利用冒泡法对数字进行排序 58 0086 用回溯法找出n个自然数中取r个数的所有组合 58 0087 0~N位数的任意组合 59 0088 在数组中快速查找近似值 60 0089 实现...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
13. Flash制作出的动画文件可以插入到html文档中,也可以单独形成网页。 14. 在Flash中,可以将图层设置为遮罩层。 15. 在Flash中,用铅笔工具绘制一条水平直线,先选择铅笔工具再按住Shift键拖动绘制即可。 16. 在...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,...
第8章 多媒体与图形 案例1 播放Gif动画 案例2 播放Flash动画 案例3 播放AVl文件 案例4 可连续播放的音乐播放器 案例5 带记忆的MP3播放器 案例6 播放WAV 案例7 播放指定的AVI-MID-WAV...