您的位置：首页 > Web前端 > JQuery

myeclipse jquery jsp+SQL server 实现MP3播放器

2019-04-09 11:02 615 查看

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="&nbsp;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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航