该音乐播放器实现了播放器和导航图同步的功能，点击对应歌曲可以播放对应歌曲并让图片旋转，如果点击的是同一首歌可以继续播放，同时还添加了进度条的功能，可以拖动进度条来改变歌曲播放的进度。
注：该播放器的图片路径需要改为 (1-5).jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(img/b1.jpg) no-repeat;
background-size: 100% 100%;
}
#top{
position: absolute;
width: 960px;
height: 250px;
margin: auto;
left: 0;
right: 0;
top:6%;
background: url(img/banner_bg.jpg) no-repeat;
background-size: 100% 100%;
list-style: none;
text-decoration: none;
}
ul li{
position: absolute;
width: 120px;
height: 120px;
border-radius: 50% 50%;
color: transparent;
}
#tp1{
background: url(img/1.jpg) no-repeat;
background-size: 100% 100%;
left: 0;
top: 0;
}
#tp2{
background: url(img/2.jpg) no-repeat;
background-size: 100% 100%;
left: 150px;
top: 90px;
}
#tp3{
background: url(img/3.jpg) no-repeat;
background-size: 100% 100%;
left: 324px;
top: 66px;
}
#tp4{
background: url(img/4.jpg) no-repeat;
background-size: 100% 100%;
left: 500px;
top: 20px;
}
#tp5{
background: url(img/5.jpg) no-repeat;
background-size: 100% 100%;
left: 650px;
top: 100px;
}
.change{
animation: rota 1.5s linear infinite;
transform-origin: center center;
}
.none{
}
@keyframes rota{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
#player_box{
position: absolute;
width: auto;
height: 115px;
background: black;
top: 60%;
}
#player{
display: inline-block;
width: 575px;
height: 115px;
background: black;
}
#player img{
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 115px;
height: 115px;
}
#songName{
position: absolute;
display: inline-block;
top: 0;
left: 150px;
top: 35px;
width: 170px;
height: 50px;
line-height: 50px;
font-size: 20px;
color:white;
}
video{
display: none;
}
#suofang{
position: relative;
display: inline-block;
width:20px;
height: 115px;
background: url(img/player_bg.png) no-repeat;
}
#prev{
position: absolute;
display: block;
width:40px ;
height:40px ;
top:35px;
left:350px;
background: url(img/player_bg.png);
background-position: -69px 6px;
}c
#prev:hover{
background-position: -69px -25px;
}
#start{
position: absolute;
display: block;
width:50px ;
height:50px ;
top:32px;
left:400px;
background: url(img/player_bg.png);
background-position: -98px 5px;
}
#start:hover{
background-position: -98px -38px;
}
#pause{
position: absolute;
display: block;
width:50px ;
height:50px ;
top:32px;
left:400px;
background: url(img/player_bg.png);
background-position: -284px -85px;
display:none;
}
#pause:hover{
background-position: -326px -85px;
}
#next{
position: absolute;
display: block;
top:35px;
left:460px;
width:40px ;
height:40px ;
background: url(img/player_bg.png);
background-position: -145px 6px;
}
#next:hover{
background-position: -145px -25px;
}
#songTime{
position: absolute;
display: inline-block;
width: 70px;
height: 20px;
top:92px;
left: 250px;
font-size: 12px;
color: white;
}
#scroll{
width: 220px;
height: 4px;
background: #ccc;
position: relative;
top:100px;
left:325px;
}
#bar{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 4px;
background: #336699;
}
#pointer{
position: absolute;
top: -4px;
left: 0px;
width:4px;
height:12px;
background: #336699;
display:none;
}
</style>
</head>
<body>
<div id="container">
<ul id="top">
<li id="tp1" value="1">勾指起誓</li>
<li id="tp2" value="2">一花一世界</li>
<li id="tp3" value="3">where did you go</li>
<li id="tp4" value="4">白色光年</li>
<li id="tp5" value="5">宠爱</li>
</ul>
<div id="player_box">
<div id="player">
<video id="aud" src="music/1.mp3" controls="controls">
当前浏览器不支持audio
</video>
<img src="img/1.jpg" >
<span id="songName" title="">勾指起誓</span>
<a id="prev" href="javascript:void(0);" onclick="prev()"></a>
<a id="start" href="javascript:void(0);" onclick="start()"></a>
<a id="pause" href="javascript:void(0);" onclick="pause()"></a>
<a id="next" href="javascript:void(0);" onclick="next()"></a>
<span id="songTime">00:00/00:00</span>
<div id="scroll">
<div id="bar">
</div>
<div id="pointer">
</div>
</div>
</div>
<div id="suofang"></div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var count = 0;
var index = 1;
var musicSrc = '';
var imgSrc;
var video = document.getElementsByTagName("video")[0];
var img = document.getElementsByTagName("img")[0];
var aud = document.getElementById('aud');
var time = document.getElementById('songTime');
var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var pointer = document.getElementById('pointer');
var allTime;//歌的总时长
var curTime;//当前播放的时间
var barLeft;
var flag = false;
function TimeSpan() {//在 音频播放时调用这个函数
setInterval(process, 1000);
}
//进度条主函数
function process(){
curTime = aud.currentTime;
alltime = aud.duration;
var current_Time = timeFormat(curTime);
var whole_Time = timeFormat(alltime);
var per = curTime/alltime;
bar.style.width = per*220+'px';
pointer.style.left = (per*220)+'px';
time.innerHTML = current_Time+'/'+whole_Time;
var Process_Now=(aud.currentTime/aud.Now)+"px";//将Process_Now转换为整数并给它加一个px单位
}
scroll.onmouseover = function(){
$('#pointer').css('display','block');
}
scroll.onmouseout = function(){
$('#pointer').css('display','none');
}
pointer.onmousedown = function(e){
var event = e || window.event;
var leftvalue = event.clientX - this.offsetLeft;
var that = this;
document.onmousemove = function(e){
var event = e || window.event;
var barLeft = event.clientX - leftvalue;
var width = scroll.offsetWidth;
var per = barLeft/width;
var al_time = Math.round(alltime);
aud.currentTime = per*al_time;
bar.style.width = per*220+'px';
pointer.style.left = (per*220)+'px';
if(barLeft<0){
barLeft = 0;
}else if(barLeft > 220){
barLeft = 220;
}
that.style.left = barLeft+'px';
bar.style.width = barLeft+'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
//将单位为秒的的时间转换成mm:ss的形式
function timeFormat(number) {
var minute = parseInt(number / 60);
var second = parseInt(number % 60);
minute = minute >= 10 ? minute : "0" + minute;
second = second >= 10 ? second : "0" + second;
return minute + ":" + second;
}
$('#suofang').on('click',function(){
if(flag){
$("#player_box").animate({left: '0'}, "slow");
$('#suofang').css({'background-position':'0 0'});
flag = false;
}else{
$("#player_box").animate({left: '-578px'}, "slow");
$('#suofang').css({'background-position':'-23px 0'});
flag = true;
}
});
$('ul li').on('click',function(){
$('span').text($(this).html());
$(this).siblings().removeClass('change');
if($(this).hasClass('change')){
$(this).removeClass('change');
pause();
return;
}else if(index!= this.value){
index = this.value;
musicSrc = 'music/'+index+'.mp3';
video.src = musicSrc;
}
start();
});
function play(){
TimeSpan();
video.play();
}
function start(){
var $li = $($('li')[index-1]);
$($('span')[0]).text($li.html());
imgSrc = 'img/'+index+'.jpg';
img.src = imgSrc;
$li.siblings().removeClass('change');
$li.addClass('change');
$('#start').css('display','none');
$('#pause').css('display','block');
play();
}
function pause(){
$('li').removeClass('change');
$('#pause').css('display','none');
$('#start').css('display','block');
video.pause();
}
function prev(){
if(index==1){
index = 5;
}else{
index--;
}
musicSrc = 'music/'+index+'.mp3';
video.src = musicSrc;
start();
}
function next(){
if(index==5){
index = 1;
}else{
index++;
}
musicSrc = 'music/'+index+'.mp3';
video.src = musicSrc;
start();
}
</script>
</body>
</html>
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
