<!DOCTYPE html>
<html>
<head>
<title>music player</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style type="text/css">
#player{width: 356px;height: 135px;border:1px solid #272822;background-color:#2F2E2E;border-radius: 10px;box-shadow: 6px 7px 6px #1E1E1E;position: relative;top:10px;left:10px;opacity: 1; }
#mywind{position: absolute;left: 2px;top:2px;width: 32px;height: 32px;}
.button{width: 135px;height: 40px;position: absolute;left: 0px;top:87px;border-radius: 10px;}
.button a img{border-radius: 40px;}
#prebtn{position: absolute;left: 10px;top:7px;}
#play{position: absolute;left: 46px;top:2px;}
.pause{position: absolute;left:55px;display: none; }
#next{position: absolute;left:90px;top:7px;}
.probar{position: absolute;right: 72px;bottom: 9px;width: 153px;height: 10px;background-color: #D5DCDE;}
.Smessage{font-family:"AlexBrush-Regular";font-size: 23px;font-weight: bold; position: absolute;left: 70px;top:20px;z-index: 200;color:#02103F;}
</style>
<script type="text/javascript">
function overchapre(){
document.getElementById("prebtn").src="img/pre_over.png";
}
function outchapre(){
document.getElementById("prebtn").src="img/pre.png";
}
function overchaplay(){
var audio=document.getElementById('Audio');
if(audio.paused) {
document.getElementById("playbtn").src = "img/play_over.png";
}else{
document.getElementById("playbtn").src = "img/stop_over.png";
}
}
function outchaplay(){
var audio=document.getElementById('Audio');
if(audio.paused) {
document.getElementById("playbtn").src = "img/play.png";
}else{
document.getElementById("playbtn").src = "img/stop_over.png";
}
}
function overchaNext(){
document.getElementById("nextbtn").src="img/next_over.png";
}
function outchaNext(){
document.getElementById("nextbtn").src="img/next.png";
}
function musicplay() {
var audio=document.getElementById('Audio');
if(audio.paused){
audio.play();
document.getElementById("playbtn").src="img/stop.png";
}else{
audio.pause();
document.getElementById("playbtn").src="img/play.png";
}
}
</script>
<body>
<audio id="Audio" src="music/倉木麻衣 - Stay By My Side.mp3"></audio>
<div><p class="Smessage">Stay By My Side</p></div>
<div id="player">
<div id="mywind"><img src="swen.png" alt=""></div>
<div class="button">
<a id="prebu" onMouseOver="overchapre()" onMouseOut="outchapre()" οnclick="preSg()">
<img id="prebtn" src="img/pre.png" alt="" title="previous" /></a>
<a id="play" onMouseOver="overchaplay()"" onMouseOut="outchaplay()" οnclick="musicplay()"><img id="playbtn" src="img/play.png" title="play" alt=""></a>
<a id="next" onMouseOver="overchaNext()" onMouseOut="outchaNext()" οnclick="nexSg()"><img id="nextbtn" src="img/next.png" title="next" alt=""></a>
</div>
<div class="lyricdis"></div>
<div class="playimg">
<img src="mai-k.png" alt="" style="height: 100px; width: 100px; position: absolute;right: 0px;top:0px;border-radius: 9px;" >
</div>
<!--<div class="probar"></div>-->
</div>
</body>
</html>
网页音乐播放器
最新推荐文章于 2022-07-07 11:52:01 发布