在线音乐播放(jsp+servlet+html+js)
在页面选择歌曲文件夹(可以包含子目录),提交后后台生成播放列表。
当音乐文件过多时,页面会有相应的提示信息。
单击播放列表中的因为,可播放选择的音乐文件。
文件描述:
FileNameFilter.java:文件过滤器,仅扫描mp3,.wav,.mid,.rm,.rmvb,.flv,.swf,.wmv类型文件。
PlayListServlet.java:根据选择的目录,生成对应的播放列表。
PlayServlet.java:单击一首歌曲时,生成播放器并自动开始播放。
folderSelectTree.js:生成文件夹树形结构。
jsCoverCtrl.js:进行页面提示。
playIndex.jsp:选择歌曲目录的页面。
具体实现:
FileNameFilter.java:
import java.io.File;
import java.io.FileFilter;
/**
* 文件:FileNameFilter.java
* 描述:TODO
* 作者:EX-QINCIDONG001
* 日期:2012-2-15
*/
/**
* @author EX-QINCIDONG001
* 文件扩展名过滤器。
*/
public class FileNameFilter implements FileFilter{
// 可接收的文件类型,.mp3,.wav,.mid,.rm,.rmvb,.flv,.swf,.wmv
private String[] accepts;
public FileNameFilter(String[] accepts) {
this.accepts = accepts;
}
/* (non-Javadoc)
* @see java.io.FileFilter#accept(java.io.File)
*/
@Override
public boolean accept(File pathname) {
boolean ok = false;
if (pathname.isFile()) {
for(String ext : accepts) {
if (pathname.getName().endsWith(ext)) {
ok = true;
break;
}
}
}
else {
ok = true;
}
return ok;
}
}
PlayListServlet.java:
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 文件:PlayListServlet.java
* 描述:TODO
* 作者:luckystar2008
* 日期:2012-2-14
*/
/**
* @author luckystar2008
* 生成播放列表。
*/
public class PlayListServlet extends HttpServlet {
int index = 0;
String playlist = "";
String tr = "<tr>";
String accepts[] = { ".mp3", ".wma", ".mid", ".rm", ".rmvb", ".flv", ".swf" };
/**
* serialVersionUID
*/
private static final long serialVersionUID = 6523452712664052932L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
super.doGet(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("gb18030");
String dir = req.getParameter("musicDir");
dir = dir.replace("\\", "/");
String musicList = makePlayList(dir);
resp.setContentType("text/html;charset=gb18030");
resp.setCharacterEncoding("gb18030");
String tip = "<script type='text/javascript' src='jsCoverCtrl.js'></script>\n";
tip += "<script type='text/javascript' language='JavaScript'>\n";
tip += "<!--\n";
tip += "var currentPageStatus = document.readyState.toLowerCase();\n";
tip += "JSCoverCtrl.viewWithString('正在加载页面.....请稍侯');\n";
tip += "//-->\n";
tip += "</script>\n";
resp.getWriter().println(tip);
resp.getWriter().println(musicList);
String js = "<script>\n";
js += "function tdMouseOver(o) {\n";
js += " var tr = o;\n";
js += "tr.style.cursor = 'hand';\n";
js += "tr.style.backgroundColor = '#3366FF';\n";
js += "}\n";
js += "function tdMouseOut(o) {\n";
js += "var tr = o;\n";
js += "tr.style.backgroundColor = '#FFFFFF';\n";
js += "}\n";
js += "function flayMusic(o) {\n";
js += "var tr = o;\n";
js += "}\n";
js += "function play(f){\n";
// js += "alert(f);\n";
js += "playForm.action = 'play.do';\n";
js += "playForm.music.value = f;\n";
js += "playForm.submit();\n";
js += "}\n";
js += "</script>;\n";
String loading = "<script type='text/javascript' language='JavaScript'>\n";
loading += " setInterval('doit()',100);\n";
loading += " function doit(){\n";
loading += " var currentPageStatus = document.readyState.toLowerCase();\n";
loading += " if(currentPageStatus=='complete'){\n";
loading += " JSCoverCtrl.hideAllCover();\n";
loading += " }\n";
loading += " }\n";
loading += " </script>\n";
resp.getWriter().println(loading);
resp.getWriter().println(js);
resp.getWriter().flush();
}
/**
* 生成播放列表
*
* @param dir
* : 歌曲所在目录。
* @return
*/
private synchronized String makePlayList(String dir) {
String table = "<div><table border=1 style='font-size:13px;'>\n";
makePlayList2(dir);
table += playlist;
table += "</table></div>\n";
table += "<div style='float:left;'><iframe id='musicFrm' name='musicFrm' width='500px' height='220px'>\n</iframe></div>\n";
table += "<form action='' method='post' name='playForm' target='musicFrm'><input type='hidden' name='music' ></form>\n";
// HttpServlet是单实例的,所以要重置变量。。。
playlist = "";
index = 0;
tr = "<tr>";
return table;
}
/**
* 生成tr,td
*
* @param dir
* @return
*/
private synchronized void makePlayList2(String dir) {
System.out.println(dir);
if (dir == null || dir.trim().length() == 0) {
return;
} else {
File dirs = new File(dir);
if (dirs.exists()) {
if (dirs.isDirectory()) {
File[] files = dirs.listFiles(new FileNameFilter(accepts));
for (File f : files) {
if (f.isFile()) {
index++;
tr += "<td οnmοuseοver='tdMouseOver(this);'οnmοuseοut='tdMouseOut(this);' οnclick=\"play('"
+ f.getAbsolutePath().replace("\\", "/")
+ "')\">"
+ (index < 10 ? "0" + index : index)
+ "."
+ f.getName() + "</td>" + "\n";
System.out.println("index-->" + index);
} else {
makePlayList2(f.getAbsolutePath()
.replace("\\", "/"));
}
if (index % 4 == 0) { // 1行4首歌曲
tr += "</tr>";
playlist += tr;
tr = "<tr>";
}
}
}
}
}
}
}
PlayServlet.java:
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class PlayServlet
*/
public class PlayServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public PlayServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("gb18030");
String musicPath = request.getParameter("music");
String obj = "<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' id='MediaPlayer1' width='400' height='150'>";
obj += " <param name='AudioStream' value='-1'>";
obj += "<param name='AutoSize' value='0'>";
obj += "<param name='AutoStart' value='-1'>";
obj += "<param name='AnimationAtStart' value='-1'>";
obj += "<param name='AllowScan' value='-1'>";
obj += "<param name='AllowChangeDisplaySize' value='-1'>";
obj += "<param name='AutoRewind' value='0'>";
obj += "<param name='Balance' value='0'>";
obj += "<param name='BaseURL' value>";
obj += "<param name='BufferingTime' value='5'>";
obj += "<param name='CaptioningID' value>";
obj += "<param name='ClickToPlay' value='-1'>";
obj += "<param name='CursorType' value='0'>";
obj += "<param name='CurrentPosition' value='-1'>";
obj += "<param name='CurrentMarker' value='0'>";
obj += "<param name='DefaultFrame' value>";
obj += "<param name='DisplayBackColor' value='0'>";
obj += "<param name='DisplayForeColor' value='16777215'>";
obj += "<param name='DisplayMode' value='0'>";
obj += "<param name='DisplaySize' value='2'>";
obj += "<param name='Enabled' value='-1'>";
obj += "<param name='EnableContextMenu' value='-1'>";
obj += "<param name='EnablePositionControls' value='-1'>";
obj += "<param name='EnableFullScreenControls' value='0'>";
obj += "<param name='EnableTracker' value='-1'> ";
obj += "<param name='Filename' value='" + musicPath + "'>";
obj += "<param name='InvokeURLs' value='-1'>";
obj += "<param name='Language' value='-1'>";
obj += "<param name='Mute' value='0'>";
obj += "<param name='PlayCount' value='1'>";
obj += "<param name='PreviewMode' value='0'>";
obj += "<param name='Rate' value='1'>";
obj += "<param name='SAMILang' value>";
obj += "<param name='SAMIStyle' value>";
obj += "<param name='SAMIFileName' value>";
obj += "<param name='SelectionStart' value='-1'>";
obj += "<param name='SelectionEnd' value='-1'>";
obj += "<param name='SendOpenStateChangeEvents' value='-1'>";
obj += "<param name='SendWarningEvents' value='-1'>";
obj += "<param name='SendErrorEvents' value='-1'>";
obj += "<param name='SendKeyboardEvents' value='0'>";
obj += "<param name='SendMouseClickEvents' value='0'>";
obj += "<param name='SendMouseMoveEvents' value='0'>";
obj += "<param name='SendPlayStateChangeEvents' value='-1'>";
obj += "<param name='ShowCaptioning' value='0'>";
obj += "<param name='ShowControls' value='-1'>";
obj += "<param name='ShowAudioControls' value='-1'>";
obj += "<param name='ShowDisplay' value='0'>";
obj += "<param name='ShowGotoBar' value='0'>";
obj += "<param name='ShowPositionControls' value='-1'>";
obj += "<param name='ShowStatusBar' value='-1'>";
obj += "<param name='ShowTracker' value='-1'>";
obj += "<param name='TransparentAtStart' value='0'>";
obj += "<param name='VideoBorderWidth' value='0'>";
obj += "<param name='VideoBorderColor' value='0'>";
obj += "<param name='VideoBorder3D' value='0'>";
obj += "<param name='Volume' value='-40'>";
obj += "<param name='WindowlessVideo' value='0'>";
obj += "</object>";
response.setContentType("text/html;charset=gb18030");
response.getWriter().println(obj);
}
}
folderSelectTree.js:
var FolderTree = function() {
//var ft = this;
// 文件夹图标,分别在树展开和关闭时显示
this.driveImage = new Array("+", "-");
// 要呈现树的容器ID
this.containerId = '';
// 初始化是否ok
this.show = true;
this.init = function(treeIcon, containerId) {
if (treeIcon != null && !typeof (treeIcon) == Array) {
alert("文件夹树形图标是一个数组,包含树展开和关闭,请确认!");
this.show = false;
}
if (treeIcon != null) {
this.driveImage = treeIcon;
}
if (containerId != null) {
this.containerId = containerId;
}
this.makeFolderTree();
},
// 在指定的容器展现树
this.makeFolderTree = function() {
if (this.show) {
var fso, s, n, e, x;
var ul = "<ul id='drivelist'>";
fso = new ActiveXObject("Scripting.FileSystemObject");
e = new Enumerator(fso.Drives);
for (; !e.atEnd(); e.moveNext()) {
ul += "<li style='list-style:none;'><span οnclick='ft.liMouseClick(this);'>"
+ this.driveImage[0]
+ "</span><span>"
+ e.item()
+ "</span><input type=checkbox name='dir' value='"
+ e.item()
+ "' οnclick='ft.checkConfirmOneSelected();'></li>";
}
ul += "</ul>";
if (this.containerId == '') {
document.body.innerHTML = ul;
} else {
document.getElementById(this.containerId).innerHTML = ul;
}
}
},
// 单击节点时,获取子目录并展现
this.liMouseClick = function(o) {
o = o.parentElement;
var s1 = o.childNodes[0].innerHTML.toLowerCase();
s1 = o.childNodes[0].childNodes[0].src;
// 获取文件名
s1 = s1.substring(s1.lastIndexOf('/')+1,s1.length);
//s1 = s1.substring(s1.indexOf('src') , s1.length - 2);
var s2 = this.driveImage[0];
if (s2.indexOf(s1) > 0) {
// 先判断是否已经单击过,未单击过才列出它的子目录。
if (o.childNodes.length <= 3) // 1个span(+,-),1个span(目录),1个checkbox
{
// 获取子目录和文件
// 根目录
var rootFolder = o.childNodes[1].innerText + "\\";
var fso = new ActiveXObject(
"Scripting.FileSystemObject");
var folder = fso.GetFolder(rootFolder);
var ul = "<ul>";
// 列出子目录
fc = new Enumerator(folder.SubFolders);
for (; !fc.atEnd(); fc.moveNext()) {
var li = "<li style='list-style:none;'><span οnclick='ft.liMouseClick(this);'>"
+ this.driveImage[0]
+ "</span><span>"
+ fc.item()
+ "</span><input type=checkbox name='dir' value='"
+ fc.item()
+ "' οnclick='ft.checkConfirmOneSelected();'></li>";
ul += li;
}
//fc = new Enumerator(folder.files);
// 列出目录下的文件
// for (; !fc.atEnd(); fc.moveNext())
// {
// var li = "<li style='list-style:none;'
// οnclick='liMouseClick(this);'><span>"+driveImage[0]+"</span><span>"+fc.item()+"</span></li>";
// ul += li;
// }
ul += "</ul>";
o.innerHTML = o.innerHTML + ul;
}
o.childNodes[0].innerHTML = this.driveImage[1];
} else {
for ( var i = 3; i < o.childNodes.length; i++) {
o.removeChild(o.childNodes[i]);
}
o.childNodes[0].innerHTML = this.driveImage[0];
}
},
// 保证只能选择一个目录
this.checkConfirmOneSelected = function() {
var checkboxs = document.getElementsByTagName('input');
var index = 0;
for ( var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].type == 'checkbox') {
if (checkboxs[i].checked) {
index++;
}
}
}
if (index > 1) {
alert('请选择一个文件夹!');
return;
}
},
// 返回选择的目录
this.showSelectedFolder = function() {
this.checkConfirmOneSelected();
var checkboxs = document.getElementsByTagName('input');
var selectedFolderString = '';
for ( var i = 0; i < checkboxs.length; i++) {
if (checkboxs[i].type == 'checkbox') {
if (checkboxs[i].checked) {
selectedFolderString = checkboxs[i].parentElement.childNodes[1].innerText + "/";
break;
}
}
}
/*if (selectedFolderString != '')
{
alert('选择的文件夹是:' + selectedFolderString);
}
else {
alert('未选择文件夹');
}*/
return (selectedFolderString);
}
}
jsCoverCtrl.js:
var JSCoverCtrl = {
createCover :function(){
document.write("<div id='JSCoverCtrlLoadinglookup' style='position:absolute; top:20; left:20; z-index:10; visibility:hidden'><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD bgcolor=6487DC><TABLE id='loadingTable' WIDTH=180 height=70 BORDER=0 CELLSPACING=2 CELLPADDING=0><TR><td bgcolor=E9F2FC align=center><font size=-1>正在查找数据, 请稍候...</font></td></tr></table></td></tr></table></div>");
document.write("<div id='JSCoverCtrlLoadingTemplate' style='position:absolute; top:20; left:20; z-index:10; visibility:hidden'><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD bgcolor=6487DC><TABLE WIDTH=180 height=70 BORDER=0 CELLSPACING=2 CELLPADDING=0><TR><td bgcolor=E9F2FC align=center><font size=-1><span id=JSCoverCtrlLoadingText contenteditable=true>正在查找数据, 请稍候...</span></font></td></tr></table></td></tr></table></div>");
document.write("<div id='JSCoverCtrlCover' style='position:absolute; top:0; left:0; z-index:11; visibility:hidden; height:100%; width:100%' ><TABLE id='JSCoverCtrlCovertable' WIDTH=100% height=100% BORDER=0 CELLSPACING=0 CELLPADDING=0 ><TR ><TD align=center> </td></tr></table></div>");
},
//显示您所需要的提示---displapString
viewWithString :function(displayString){
if(displayString != null)
{
JSCoverCtrlLoadingText.innerHTML=displayString;
JSCoverCtrlLoadingTemplate.style.top=document.all("JSCoverCtrlCovertable").offsetHeight/2-35;
JSCoverCtrlLoadingTemplate.style.left=document.all("JSCoverCtrlCovertable").offsetWidth/2-70;
JSCoverCtrlLoadingTemplate.style.visibility="visible";
}
else {
JSCoverCtrlLoadinglookup.style.top=document.all("JSCoverCtrlCover").offsetHeight/2-20;
JSCoverCtrlLoadinglookup.style.left=document.all("JSCoverCtrlCover").offsetWidth/2-20;
JSCoverCtrlLoadinglookup.style.visibility="visible";
}
JSCoverCtrlCover.style.visibility="visible";
},
//显示您所需要的提示---displapString
hideAllCover :function(){
if (JSCoverCtrlCover.style.visibility=="visible") JSCoverCtrlCover.style.visibility="hidden";
if (JSCoverCtrlLoadingTemplate.style.visibility=="visible") JSCoverCtrlLoadingTemplate.style.visibility="hidden";
if (JSCoverCtrlLoadinglookup.style.visibility=="visible") JSCoverCtrlLoadinglookup.style.visibility="hidden";
}
}
JSCoverCtrl.createCover();
playIndex.jsp:
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<meta http-equiv="cache-control" content="no-cache">
<title>Insert title here</title>
<script type="text/javascript" src="jsCoverCtrl.js"></script>
<script type="text/javascript" src="folderSelectTree.js"></script>
<script type="text/javascript">
var ft;
function submitForm() {
var musicDir = playListForm.musicDir;
var dir = ft.showSelectedFolder();
if (dir == '') {
alert('请选择一个文件夹!');
return;
}
musicDir.value = dir;
JSCoverCtrl.viewWithString('正在检查并提交.....请稍侯');
playListForm.submit();
}
window.onload = function() {
ft = new FolderTree();
var treeIcons = new Array("<img src='./icons/folder.gif' width='15px' height='15px'>","<img src='./icons/folder-open.gif' width='15px' height='15px'>");
ft.init(treeIcons,'tree');
}
</script>
</head>
<body>
<form action="playlist.do" " method="post" name='playListForm'>
<table>
<tr>
<td>选择歌曲目录:</td>
<td>
<input type='hidden' name='musicDir' id="musicDir">
<div id='tree'></div>
</td>
</tr>
<tr align="center">
<td><input type='button' value='确定' οnclick='submitForm();'></td>
</tr>
</table>
</form>
</body>
</html>