jsp 音乐连播

最新推荐文章于 2023-03-02 22:07:29 发布

iteye_19303

最新推荐文章于 2023-03-02 22:07:29 发布

阅读量184

点赞数 1

分类专栏： JSP 文章标签：音乐 JSP HTML

JSP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

音乐列表页面 list.jsp

<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<html>
<head>
<title>Music List</title>
<script>
var selects="";
function selectAll(){
var cbxs = document.forms["frm"].musics;
var songNames = document.forms["frm"].mName;
for(var i=0;i<cbxs.length;i++){
selects+=songNames[i].value+";";
cbxs[i].checked=true;

}
}
function selectOth(){
var cbxs = document.forms["frm"].musics;
var songNames = document.forms["frm"].mName;
for(var i=0;i<cbxs.length;i++){
document.forms["frm"].musics[i].checked=!document.forms["frm"].musics[i].checked;
}
selects="";
}
function musicPage(){
selects="";
var cbxs = document.forms["frm"].musics;
var songNames = document.forms["frm"].mName;
for(var i=0;i<cbxs.length;i++){
if (cbxs[i].checked){
selects+=songNames[i].value+";";
}

}
if (selects.length==0) {alert("Please Select Music to Play!");return false;}
document.getElementById("selectSongHidden").value=selects;
alert(document.getElementById("selectSongHidden").value);
return true;
}
</script>
</head>
<body>
<table border=1 width="80%" height="300">
<thead>
<th>选中</th>
<th>音乐名</th>
<th>歌手</th>
<td>发布时间</th>
</thead>
<tbody>
<form name="frm" action="demo.jsp" method="post" οnsubmit="return musicPage();">
<input type="hidden" name="selectSongHidden" id="selectSongHidden">
<tr>
<td><input type="checkbox" name="musics"></td>
<td><input type="hidden" value="冰冷长街.mp3" name="mName" >冰冷长街.mp3</td>
<td>冰冷长街</td>
<td>2009-11-20</td>
</tr>

<tr>
<td><input type="checkbox" name="musics" ></td>
<td><input type="hidden" value="凤凰传奇-自由飞翔.wma" name="mName" >凤凰传奇-自由飞翔.wma</td>
<td>凤凰传奇</td>
<td>2009-11-20</td>
</tr>

<tr>
<td><input type="checkbox" name="musics"></td>
<td><input type="hidden" value="难道爱一个人有错吗.wma" name="mName" >难道爱一个人有错吗.wma</td>
<td>郑源</td>
<td>2009-11-20</td>
</tr>

<tr>
<td colspan="3">
<input type="submit" value="试听">
<input type="button" value="全选" οnclick="selectAll()">
<input type="button" value="反选" οnclick="selectOth()">
</td>
</tr>
</tbody>
</table>
</body>
</html>

音乐播放页面 play.jsp

<%@ page language="java" import="java.io.*" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>

<%
String hiddenvalue = request.getParameter("selectSongHidden");
String []names= hiddenvalue.split(";");
out.println("你选择了如下歌曲:"+"<br>");
for(int i=0;i<names.length;i++){
names[i] ="E:/Music/" + names[i];
out.println(names[i]+"<br>");
}
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript" for="mediaPlayerObject"
event="playStateChange(NewState)">
switch (NewState) { // 监听播放器的状态来实现连播
case 1:
// alert("test");
break;
case 2:
// alert("Paused");
break;
case 3:
// alert("Playing");
break;
case 8:
// alert("stopped");
//WMP停止播放后，还要进行一些处理，所以要延时再调用PlayMusic()，如果直接PlayMusic()，WMP会无反应。这是实现连播的关键，当播放停止时运行 PlayMusic()实现播放下一曲
setTimeout("PlayMusic();", 1000);
break;
default:
//alert(NewState.toString());
break;
}
</script>
<script language="javascript">
var i=0;
var selects ="<%=hiddenvalue%>";
selects= selects.split(";");
function PlayMusic() { // 下一曲
if (i>=selects.length) return ;
player = document.getElementById("mediaPlayerObject");
var url="E:/Music/"+selects[i++];
alert(url);
player.URL =url ;
player.controls.play();
}
</script>

</HEAD>
<BODY οnlοad="PlayMusic();">
<OBJECT id="mediaPlayerObject" style="WIDTH: 200px; HEIGHT: 68px"

type="application/x-oleobject" border="0" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<PARAM NAME="URL" VALUE="">

<PARAM NAME="rate" VALUE="1">

<PARAM NAME="balance" VALUE="0">

<PARAM NAME="currentPosition" VALUE="0">

<PARAM NAME="defaultFrame" VALUE="">

<PARAM NAME="playCount" VALUE="1">

<PARAM NAME="autoStart" VALUE="-1">

<PARAM NAME="currentMarker" VALUE="0">

<PARAM NAME="invokeURLs" VALUE="-1">

<PARAM NAME="baseURL" VALUE="">

<PARAM NAME="volume" VALUE="80">

<PARAM NAME="mute" VALUE="0">

<PARAM NAME="uiMode" VALUE="full">

<PARAM NAME="stretchToFit" VALUE="-1">

<PARAM NAME="windowlessVideo" VALUE="0">

<PARAM NAME="enabled" VALUE="-1">

<PARAM NAME="enableContextMenu" VALUE="false">

<PARAM NAME="fullScreen" VALUE="0">

<PARAM NAME="SAMIStyle" VALUE="">

<PARAM NAME="SAMILang" VALUE="">

<PARAM NAME="SAMIFilename" VALUE="">

<PARAM NAME="captioningID" VALUE="">

<PARAM NAME="enableErrorDialogs" VALUE="0">

<param name="ShowControls" value="0">

</OBJECT>

WMP中播放状态判断问题 <br>
PlayStateChange 事件表示Media Player的播放状态已经改变，Media Player可能的状态有：<br>
0 播放已经停止（mpStopped） <br>
1 播放暂停（mpPaused ） <br>
2 正在播放（mpPlaying） <br>
3 正在等待流开始（mpWaiting） <br>
4 向前搜索（mpScanForward）<br>
5 向后搜索（mpScanReverse） <br>
6 向前跳跃（mpSkipForward） <br>
7 向后跳跃（mpSkipReverse） <br>
8 流已经关闭（mpClosed） <br>
objPlayer.controls.play();//开始播放
</BODY>
</HTML>