myeclipse jquery jsp+SQL server 实现MP3播放器
陈成济
jsp文件：
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.*" import="java.sql.*" pageEncoding="UTF-8"%>
<%@ page import="com.StringUtil, com.DBConn"%>
<%@ include file="system/easyui_header_bean.jsp"%>
<html>
<title>mp3</title>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="plugin/jqeasyui155/themes/default/easyui155.me.css">
<link rel="stylesheet" type="text/css" href="plugin/jqeasyui155/themes/icon.css">
<link rel="stylesheet" type="text/css" href="system/css/icon.css">
<script type="text/javascript" src="plugin/jquery214.min.js"></script>
<script type="text/javascript" src="plugin/jqeasyui155/jquery.easyui.min.js"></script>
<script type="text/javascript" src="plugin/jqeasyui155/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="system/easyui_common.js?time=New Date()"></script>
<script type="text/javascript" src="javascript/easyui_functions.js?"></script>
<script type="text/javascript" src="javascript/mp3.js?time=New Date()"></script>
</head>
<script>
</script>
<body style="font-size:13; margin:1px 1px 1px 1px;">
<div id="main" style="font-size:13px;font-family:微软雅黑;"> </div>
</body>
</html>
js文件：
$(function(){
document.myBanBackSpace;
document.myBanBackSpace;
var str='<div id="mypanel" class="easyui-panel"title=" mp3">\
<div id="panel1" class="easyui-panel" >\
<ul id="tree1" class="easyui-tree">\
</ul>\
</div>\
<div id="panel2" class="easyui-panel" style="position: absolute;top:33px;left:301px">';
$("#main").append(str);
str+='<div id="playPause" style="position:absolute; top:140px;left:60px"><a href="#" class="easyui-linkbutton">暂停</a></div>\
<div id="makeBig" style="position:absolute; top:140px;left:160px"><a href="#" class="easyui-linkbutton">放大</a></div>\
<div id="makeSmall" style="position:absolute; top:140px;left:260px"><a href="#" class="easyui-linkbutton">缩小</a></div>\
<div id="makeNormal" style="position:absolute; top:200px;left:60px"><a href="#" class="easyui-linkbutton">普通</a></div>\
<div id="skip" style="position:absolute;top:200px;left:160px"><a href="#" class="easyui-linkbutton">跳动</a></div>\
<div id="mute" style="position:absolute;top:200px;left:260px"><a href="#" class="easyui-linkbutton">静音</a></div>\
<audio id="song" controls="controls" autoplay="autoplay" loop="loop" width="400" style="margin:50px 40px 0px 40px"></audio>\
</div>\
</div>';
$("#mypanel").append(str);
//添加属性
$("#mypanel").panel({width:700,height:432});
$("#panel2").panel({width:400,height:400});
$("#panel1").panel({width:400,height:400});
$("#playPause").linkbutton({width:70,height:40});
$("#makeBig").linkbutton({width:70,height:40});
$("#makeSmall").linkbutton({width:70,height:40});
$("#makeNormal").linkbutton({width:70,height:40});
$("#skip").linkbutton({width:70,height:40});
$("#mute").linkbutton({width:70,height:40});
//从数据库中调取数据
xmlfile='system/sql.xml';
var params={};
var rs=myRunSqlProcedure('mp3', params);
var rows=rs.rows;
var myAudio=document.getElementById("song");//用tree的onselect事件
//树及六个按钮-事件
$('#playPause').bind('click', function(){//点击暂停
if (myAudio.paused) myAudio.play();
else myAudio.pause();
});
$('#makeBig').bind('click', function(){//点击放大音量
myAudio.width=560;
});
$('#makeSmall').bind('click', function(){//点击缩小音量
myAudio.width=310;
});
$('#makeNormal').bind('click', function(){//点击正常音量
myAudio.width=420;
});
$('#skip').bind('click', function(){//点击跳动
var length=myAudio.duration; //总时长second
if (myAudio.currentTime+60<=length) myAudio.currentTime=myAudio.currentTime+60;
else myAudio.currentTime=1;
//ended如果媒体文件播放完毕，则返回true
});
$('#mute').bind('click', function(){//点击静音
if (myAudio.muted) myAudio.muted=false;
else myAudio.muted=true;
});
$('#tree1').tree({
data:rows,//显示第一列数据
onClick:function(node){//点击播放
var path = node.msrc;
myAudio.src = path;
myAudio.play();
}
});
});
数据库文件：
drop table if exists musics
create table musics(
mid varchar(100),
mname varchar(100),
msrc varchar(100)
)
insert into musics(mid,mname,msrc)values('001','奥斯卡大奖','system/001_wpdh.mp3')
insert into musics(mid,mname,msrc)values('002','逝去的歌','system/002_sqdg.mp3')
insert into musics(mid,mname,msrc)values('003','哈达克','system/006_dy.mp3')
insert into musics(mid,mname,msrc)values('004','单价','system/011_xyg.mp3')
go
drop procedure mp3
go
create procedure mp3
as
select mid+' '+mname as text,msrc as msrc from musics
go
类似资料：