Javascript Windows MediaPlayer完整示范版

最新推荐文章于 2014-01-02 17:40:53 发布

原创最新推荐文章于 2014-01-02 17:40:53 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #windows #button #function #input #string

RIA 专栏收录该内容

12 篇文章

订阅专栏

这是一个使用JavaScript与JSP实现的Windows MediaPlayer示例，包括主页面、后台处理文件上传和音乐管理类。功能包括播放列表、音量调节、快进、播放控制等。案例中，音乐文件通过SmartUpload组件进行上传，并保存到服务器mp3目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主页面(采用jsp实现)

<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <%@page import="org.accp.jwebplayer.biz.MusicBiz"%> <!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=gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Insert title here</title> <mce:script type="text/javascript"></mce:script> </head> <body> <% MusicBiz musicBiz =new MusicBiz(); String[] musices = musicBiz.getMusics(application.getRealPath("/")+"mp3"); %> <table> <tr> <td> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="wmp">  <param name="rate" value="1" /> <param name="balance" value="0" />  <param name="currentPosition" value="0" /> <param name="playCount" value="1" />  <param name="autoStart" value="-1" />  <param name="currentMarker" value="0" /> <param name="invokeURLs" value="-1" /> <param name="volume" value="50" />  <param name="mute" value="0" />  <param name="uiMode" value="full" />  <param name="stretchToFit" value="0" /> <param name="windowlessVideo" value="0" /> <param name="enabled" value="-1" /> <param name="no_enableContextMenu" value="-1" /> <param name="fullScreen" value="0" />  <param name="enableErrorDialogs" value="-1" />  </object> </td> <td> <fieldset title="播放列表" style="height:230px;"> <span style="color:orange;font-size:12px;" mce_style="color:orange;font-size:12px;">播放列表</span> <a href="#" mce_href="#" onclick="$('playList').options.length=0;" style="font-size:12px;" mce_style="font-size:12px;">清空列表</a> <br/> <select size="6" id="playList" style="height:220px;width:200px;" ondblclick="$('wmp').URL=this.value;index=this.selectedIndex;showMusicInfo();"> <% if (musices!=null && musices.length>0){ for(int i=0;i<musices.length;i++){ %> <option <%=i==0?"selected='selected'":"" %> value="mp3/<%=musices[i] %>"><%=musices[i].replace(".mp3","") %></option> <% } } %> </select> <br/> </fieldset> </td> <td> <fieldset style="height:230px;"> <a href="#" mce_href="#" onclick="showMusicInfo();">当前播放媒体信息:</a> <ul> <li>名称:<span id="spnCurrentMediaName"></span></li> <li>长度:<span id="spnCurrentMediaDuration"></span>秒 <li>宽度:<span id="spnCurrentMediaWidth"></span>像素 <li>高度:<span id="spnCurrentMediaHeight"></span>像素 <li>标志数:<span id="spnCurrentMediaMarkerCount"></span> <li>源地址:<span id="spnCurrentSourceURL"></span> </ul> </fieldset> </td> </tr> </table> <hr/> <FORM name="Form1" action="Controller.jsp" enctype ="multipart/form-data" method="POST"> <fieldset style="height:100px;padding-top: 10px"> <input style="width:81px;" type="button" value="开始" onclick="wmp.controls.play();"/> <input style="width:81px;" type="button" value="暂停" onclick="wmp.controls.pause();"/> <input style="width:81px;"type="button" value="停止" onclick="wmp.controls.stop();"/> <input style="width:81px;" type="button" value="+" onclick="if ($('wmp').settings.volume<=100){$('wmp').settings.volume+=10;}" /> 调节音量 <input style="width:81px;" type="button" value="-" onclick="if ($('wmp').settings.volume>0){$('wmp').settings.volume-=10;}"/> <p></p> <input style="width:81px;"type="button" value="上一首" onclick="pre();"/> <input style="width:81px;"type="button" value="下一首" onclick="next();"/> <input style="width:81px;"type="button" value="快进" onclick="Forward();"/>  显示模式: <select onchange="$('wmp').uiMode=this.value;"> <option value="full">全部</option> <option value="none">仅视频</option> <option value="mini">常用</option> <option value="invisible">隐藏</option> </select> <input style="width:81px;" type="button" value="播放器版本" onclick="alert($('wmp').versionInfo)"/> <p></p> 跳到<input type="text" id="position" value="1.0" style="margin-left: 10px;margin-right:10px;border: solid 1px blue;width:81px;"/>秒播放 <input style="width:81px;" onclick="playposition();" type="button" value="确定"/> <input type="button" onclick="alert($('wmp').controls.currentPosition);" value="当前位置"> </fieldset> <hr/> <fieldset style="padding-left: 10px;padding-top: 10px;padding-bottom: 10px;" mce_style="padding-left: 10px;padding-top: 10px;padding-bottom: 10px;"> 上传歌曲:<input type="file" name="musicFile" /><br/> 歌曲名称:<input type="text" name="musicName" /> <input type="submit" value="上传音乐" /> </fieldset> </FORM> </body> </html>

二、后台处理上传的页面(采用jsp实现)

<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <%@page import="com.jspsmart.upload.SmartUpload"%> <%@page import="com.jspsmart.upload.File"%> <% request.setCharacterEncoding("gb2312"); SmartUpload mySmartUpload = new SmartUpload(); mySmartUpload.initialize(this.getServletConfig(), request, response); // 依据form的内容上传 mySmartUpload.upload(); //取出文件名 String musicName = mySmartUpload.getRequest().getParameter("musicName"); //处理文件名 musicName = musicName!=null && !musicName.equals("")? musicName: null; //取出上传的文件 File musicFile = mySmartUpload.getFiles().getFile(0); //处理文件名 musicName = musicName==null? musicFile.getFileName(): musicName+"."+musicFile.getFileExt(); //处理扩展名 musicName = musicName.endsWith(".mp3")? musicName: musicName+"."+musicFile.getFileExt(); if (!musicFile.isMissing()){ musicFile.saveAs("mp3/"+musicName,musicFile.SAVEAS_VIRTUAL); } response.sendRedirect("index.jsp"); %>

三、遍历服务器mp3目录的Java类:

package org.accp.jwebplayer.biz; import java.io.*; /** * 音乐管理类 * */ public class MusicBiz { /** * 获得指定路径下的所有音乐文件 * */ public String[] getMusics(String path){ String[] musics = null; File file = new File(path); File[] files = file.listFiles(new FilenameFilter(){ @Override public boolean accept(File arg0, String arg1) { return arg1.toLowerCase().endsWith(".mp3"); } }); if (files.length>0){ musics = new String[files.length]; for(int i=0;i<files.length;i++){ musics[i] = files[i].getName(); } } return musics; } }

说明：

1.本案例才用javascript访问window media player实现,当前限定了您使用的平台必须是windows平台了

2.本案例采用jsp实现,实现了Media Player的大部分功能,考虑学生的理解性，没有做什么封装和简化处理

3.可以采用jquery、ajax技术使代码更加简洁

4.文件上传采用smartupload实现

4.项目结构如下图: