音乐播放（(jsp+servlet+html+js)）

阅读更多

 
                           在线音乐播放(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 = "";
 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 = "\n";
  tip += "\n";
  resp.getWriter().println(tip);
  resp.getWriter().println(musicList);

  String js = ";\n";

  String loading = "\n";

  resp.getWriter().println(loading);
  resp.getWriter().println(js);
  resp.getWriter().flush();
 }

 /**
  * 生成播放列表
  * 
  * @param dir
  *            : 歌曲所在目录。
  * @return
  */
 private synchronized String makePlayList(String dir) {
  String table = "
\n";
  makePlayList2(dir);
  table += playlist;
  table += "
\n";
  table += "
\n";
  table += "
\n";

  // HttpServlet是单实例的，所以要重置变量。。。
  playlist = "";
  index = 0;
  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 += ""
         + (index < 10 ? "0" + index : index)
         + "."
         + f.getName() + "" + "\n";
       System.out.println("index-->" + index);
      } else {
       makePlayList2(f.getAbsolutePath()
         .replace("\\", "/"));
      }

      if (index % 4 == 0) { // 1行4首歌曲
       tr += "";
       playlist += 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 = "";
  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 = "
";
     fso = new ActiveXObject("Scripting.FileSystemObject");
     e = new Enumerator(fso.Drives);

     for (; !e.atEnd(); e.moveNext()) {
      ul += "
"
        + this.driveImage[0]
        + ""
        + e.item()
        + "
";
     }

     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 = "
";
      // 列出子目录
      fc = new Enumerator(folder.SubFolders);
      for (; !fc.atEnd(); fc.moveNext()) {
       var li = "
"
         + this.driveImage[0]
         + ""
         + fc.item()
         + "
";
       ul += li;
      }

      //fc = new Enumerator(folder.files);
      // 列出目录下的文件
      // for (; !fc.atEnd(); fc.moveNext())
      // {
      // var li = "
"+driveImage[0]+""+fc.item()+"
";
      // ul += li;
      // }

      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("
正在查找数据, 请稍候...
");
                  document.write("
正在查找数据, 请稍候...
");
                  document.write("
");
                 },
 //显示您所需要的提示---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"%>














 

  
选择歌曲目录：