《JavaWeb---简单应用---服务器向客户端提供音乐资源（二）》---歌曲展示页面提升，实现渐变色显示，选中行变色...-优快云博客

本文介绍了一个使用Java和JSP实现的音乐列表页面，该页面不仅展示了音乐信息，还提供了播放和下载的功能。通过简单的JavaScript调用实现了音乐的在线播放，并且通过JSTL和EL表达式动态显示音乐列表。

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

在以前基础上又在当页添加了播放器，点击简单播放，即可实现播放选中曲目.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.io.File"%>
<%@ page import="java.net.URL"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>

		<title>音乐列表</title>

<style>
body {
	text-align: center;
}

.even{
	background-color: #FFFF99
}
.odd{
	background-color: #FFCCFF
}

tr:HOVER {
	background-color: #00FFCC
}
</style>

<script language="javascript">
function playMusic(url){
FenghuoMP.filename=url;
FenghuoMP.autostart=true;
}
</script>

</head>

<body>
	<font color="red">本站提供下列音乐：</font>
	<br />
	
	<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
		id="FenghuoMP" height="40" width="300" >
		<param name="Filename"
			value="${pageContext.request.contextPath }/resource/musiclist.m3u">
		<param name="autostart" value="0">
		<param name="stretchToFit" value="0"> 
	</object><br />

	<%-- 利用JSTL结合EL表达式，将域中歌曲信息展现给用户 --%>
	<table border="1" width="50%">
	<c:forEach var="music" items="${musics }" varStatus="i">
	<tr class="${i.count%2==0? 'even':'odd' }">
		<td>${music.value }</td>
		<td><a href='${pageContext.request.contextPath }/resource/music/${music.key }'>下载</a></td>
		<td><a href='${pageContext.request.contextPath }/servlet/PlayMusic?resname=${music.key }'
			target='_blank'> 播放</a></td>
		<td><a href='javascript:void(0)' onclick="playMusic('${pageContext.request.contextPath }/resource/music/${music.key }')"> 简单播放</a>
		<br /></td>
	</tr>
	</c:forEach>
	</table>
	
</body>
</html>