<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.play-bar{
background: #313131;
height: 50px;
border-radius: 5px;
opacity: 0.8;
}
.play-bar-main{
margin: 0 auto;
width: 1100px;
}
.prv{
background: url("images/playbar.png");
background-position: 10px -120px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
cursor: pointer;
}
.prv:hover{
background-position: -27px -120px;
}
.nxt{
background: url("images/playbar.png");
background-position: -71px -120px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
cursor: pointer;
}
.nxt:hover{
background-position: -105px -120px;
}
.pause-stop{
background: url("images/playbar.png");
background-position: 6px -199px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
}
.icon{
background: url("images/icon.jpg");
background-repeat: no-repeat;
background-position: 0px 5px;
margin-left: 20px;
width: 40px;
height: 40px;
}
.btns ul{
list-style-type: none;
text-align: center;
}
.btns li{
float: left;
}
div{
color: #fff;
}
.play{
margin-left: 20px;
float: left;
}
.sound{
background: url("images/playbar.png");
background-position: 9px -247px;
background-repeat: no-repeat;
width: 40px;
height: 40px;
cursor: pointer;
position:relative;
}
.sound:hover{
background-position: -23px -247px;
position:relative;
}
.sound-list{
text-align:center;
}
.audio{
background:#313131;
display:none;
}
.volume-wrap{
float:left;
position:relative;
left:90px;
top:30px;
}
input[type="range"] {
-webkit-appearance: none;
margin-top: 2px;
background-color: #54c5ed;
border-radius: 15px;
width: 100px;
height: 5px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
top: 1px;
height: 15px;
width: 15px;
background: #999;
box-shadow: 0 0 1px #999;
border: 4px solid #fff;
border-radius: 50%;
}
.playlist{
width: 38px;
height:30px;
line-height: 27px;
text-align: center;
color: #666;
text-shadow: 0 1px 0 #080707;
background:url("images/playbar.png");
background-position: -42px -68px;
float:left;
position:relative;
top:20px;
left:100px;
cursor:pointer;
}
.items ul{
list-style-type: none;
background:yellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js">
</script>
</head>
<body>
<div class="play-bar">
<div class="play-bar-main">
<div class="btns">
<ul>
<li id="prv" class="prv" onclick="prvMusic()"></li>
<li class="pause-stop" id="pause-stop" onclick="playPause()">
<audio class="audio" id="myAudio" preload="auto" controls >
<source id="mp3-source" src="images/fade.mp3" type="audio/mp3"></source>
</audio>
</li>
<li id="nxt" class="nxt"></li>
<li class="icon"><img src="" alt=""/></li>
</ul>
</div>
<div class="play">
<br/>
<a class="f-thide name fc1 f-fl" title="Let's not fall in love">Let's not fall in love</a>
<a class="">BIGBANG</a>
<span class="j-flag time"><em id="current-time"></em>/<em id="duration"></em></span>
</div>
<div class="volume-wrap">
<input type="range" value="20" max="100" min="0" id="volume" />
</div>
<p id="volume-txt"></p>
</div>
<div id="playlist" class="playlist">
<div id="items" class="items">
<ul>
<li>sugar</li>
<li>faded</li>
<li>sugar</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script>
var time = document.getElementById("myAudio");
$("#myAudio").on("canplay",function(){
var t = $('#myAudio').get(0).duration;
$("#duration").text(parseInt(t/60)+":"+parseInt(t%60));
});
var curTime = $("#current-time");
function showJ(){
$("#current-time").text(parseInt(time.currentTime/60)+":"+parseInt(time.currentTime)%60);
}
setInterval("showJ()",1000);
var myAudio = document.getElementById('myAudio');
function prvMusic(){
$("#myAudio").attr("src","images/Sugar.mp3");
myAudio.play();
}
function playPause(){
var pauseStop = document.getElementById("pause-stop");
if (myAudio.paused){
pauseStop.style.backgroundPosition=" -34px -160px";
myAudio.play();
}else{
pauseStop.style.backgroundPosition="6px -199px";
myAudio.pause();
}
}
var p = document.getElementById('volume-txt'),
txt = document.getElementById('volume');
txt.onmousedown = function() {
txt.onmousemove = function() {
p.innerHTML = txt.value;
myAudio.volume=txt.value/100;
};
};
$("#playlist").click(function(){
$("#items").toggle(700);
});
</script>
从src设为服务器地址images/mp3,报错net::ERR_CONTENT_LENGTH_MISMATCH,
之前还报ClientAbort,请问大神们这该怎么解决?
