小贝子编程

为什么我的播放暂停按钮移动时，我按播放上一个或播放下一个按钮(HTML, CSS, JS)



我想弄清楚为什么播放暂停按钮一直向上移动，当我按下播放前一个或下一个按钮时，它仍然完全静止，当我单独按下播放暂停按钮时，但一旦按下上一个或下一个按钮，它跳到按钮div的左侧，我不确定这是否是由javascript或css引起的?有什么想法吗?此播放器取自:https://codepen.io/himalayasingh/pen/QZKqOX

按下播放-下一键后播放-暂停键上移的播放器图像

music.html

<div id="app-cover">
<div id="bg-artwork"></div>
<div id="bg-layer"></div>
<div id="player">
<div id="player-track">
<div id="album-name"></div>
<div id="track-name"></div>
<div id="track-time">
<div id="current-time"></div>
<div id="track-length"></div>
</div>
<div id="s-area">
<div id="ins-time"></div>
<div id="s-hover"></div>
<div id="seek-bar"></div>
</div>
</div>
<div id="player-content">
<div id="album-art">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg" class="active" id="_1">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_2.jpg" id="_2">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_3.jpg" id="_3">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_4.jpg" id="_4">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_5.jpg" id="_5">
<div id="buffer-box">Buffering ...</div>
</div>
<div id="player-controls">
<div class="control">
<div class="button" id="play-previous">
<i class="fas fa-backward"></i>
</div>
</div>
<div class="control">
<div class="button" id="play-pause-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="control">
<div class="button" id="play-next">
<i class="fas fa-forward"></i>
</div>
</div>
</div>
</div>
</div>
</div>

music.js

<script>
$(function()
{
var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Dawn','Me & You','Electro Boy','Home','Proxy (Original Mix)'], trackNames = ['Skylike - Dawn','Alex Skrindo - Me & You','Kaaze - Electro Boy','Jordan Schor - Home','Martin Garrix - Proxy'], albumArtworks = ['_1','_2','_3','_4','_5'], trackUrl = ['https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/3.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/4.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/5.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
function playPause()
{
setTimeout(function()
{
if(audio.paused)
{
playerTrack.addClass('active');
albumArt.addClass('active');
checkBuffering();
i.attr('class','fas fa-pause');
audio.play();
}
else
{
playerTrack.removeClass('active');
albumArt.removeClass('active');
clearInterval(buffInterval);
albumArt.removeClass('buffering');
i.attr('class','fas fa-play');
audio.pause();
}
},300);
}

function showHover(event)
{
seekBarPos = sArea.offset(); 
seekT = event.clientX - seekBarPos.left;
seekLoc = audio.duration * (seekT / sArea.outerWidth());

sHover.width(seekT);

cM = seekLoc / 60;

ctMinutes = Math.floor(cM);
ctSeconds = Math.floor(seekLoc - ctMinutes * 60);

if( (ctMinutes < 0) || (ctSeconds < 0) )
return;

if( (ctMinutes < 0) || (ctSeconds < 0) )
return;

if(ctMinutes < 10)
ctMinutes = '0'+ctMinutes;
if(ctSeconds < 10)
ctSeconds = '0'+ctSeconds;

if( isNaN(ctMinutes) || isNaN(ctSeconds) )
insTime.text('--:--');
else
insTime.text(ctMinutes+':'+ctSeconds);

insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0);

}
function hideHover()
{
sHover.width(0);
insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);       
}

function playFromClickedPos()
{
audio.currentTime = seekLoc;
seekBar.width(seekT);
hideHover();
}
function updateCurrTime()
{
nTime = new Date();
nTime = nTime.getTime();
if( !tFlag )
{
tFlag = true;
trackTime.addClass('active');
}
curMinutes = Math.floor(audio.currentTime / 60);
curSeconds = Math.floor(audio.currentTime - curMinutes * 60);

durMinutes = Math.floor(audio.duration / 60);
durSeconds = Math.floor(audio.duration - durMinutes * 60);

playProgress = (audio.currentTime / audio.duration) * 100;

if(curMinutes < 10)
curMinutes = '0'+curMinutes;
if(curSeconds < 10)
curSeconds = '0'+curSeconds;

if(durMinutes < 10)
durMinutes = '0'+durMinutes;
if(durSeconds < 10)
durSeconds = '0'+durSeconds;

if( isNaN(curMinutes) || isNaN(curSeconds) )
tProgress.text('00:00');
else
tProgress.text(curMinutes+':'+curSeconds);

if( isNaN(durMinutes) || isNaN(durSeconds) )
tTime.text('00:00');
else
tTime.text(durMinutes+':'+durSeconds);

if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
trackTime.removeClass('active');
else
trackTime.addClass('active');

seekBar.width(playProgress+'%');

if( playProgress == 100 )
{
i.attr('class','fa fa-play');
seekBar.width(0);
tProgress.text('00:00');
albumArt.removeClass('buffering').removeClass('active');
clearInterval(buffInterval);
}
}

function checkBuffering()
{
clearInterval(buffInterval);
buffInterval = setInterval(function()
{ 
if( (nTime == 0) || (bTime - nTime) > 1000  )
albumArt.addClass('buffering');
else
albumArt.removeClass('buffering');
bTime = new Date();
bTime = bTime.getTime();
},100);
}
function selectTrack(flag)
{
if( flag == 0 || flag == 1 )
++currIndex;
else
--currIndex;
if( (currIndex > -1) && (currIndex < albumArtworks.length) )
{
if( flag == 0 )
i.attr('class','fa fa-play');
else
{
albumArt.removeClass('buffering');
i.attr('class','fa fa-pause');
}
seekBar.width(0);
trackTime.removeClass('active');
tProgress.text('00:00');
tTime.text('00:00');
currAlbum = albums[currIndex];
currTrackName = trackNames[currIndex];
currArtwork = albumArtworks[currIndex];
audio.src = trackUrl[currIndex];

nTime = 0;
bTime = new Date();
bTime = bTime.getTime();
if(flag != 0)
{
audio.play();
playerTrack.addClass('active');
albumArt.addClass('active');

clearInterval(buffInterval);
checkBuffering();
}
albumName.text(currAlbum);
trackName.text(currTrackName);
albumArt.find('img.active').removeClass('active');
$('#'+currArtwork).addClass('active');

bgArtworkUrl = $('#'+currArtwork).attr('src');
bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'});
}
else
{
if( flag == 0 || flag == 1 )
--currIndex;
else
++currIndex;
}
}
function initPlayer()
{   
audio = new Audio();
selectTrack(0);

audio.loop = false;

playPauseButton.on('click',playPause);

sArea.mousemove(function(event){ showHover(event); });

sArea.mouseout(hideHover);

sArea.on('click',playFromClickedPos);

$(audio).on('timeupdate',updateCurrTime);
playPreviousTrackButton.on('click',function(){ selectTrack(-1);} );
playNextTrackButton.on('click',function(){ selectTrack(1);});
}

initPlayer();
});
</script>

custom.css

#app-cover  
{
position: relative;
top: 100px;
right: 0;
left: 0;
width: 430px;
height: 100px;
margin: -4px auto;
}

#player
{
position: relative;
height: 105%;
z-index: 3;
}
#player-track
{
position: absolute;
top: 0;
right: 15px;
left: 15px;
padding: 13px 22px 10px 184px;
background-color: #829aa3;
border-radius: 15px 15px 0 0;
transition: 0.9s ease top;
z-index: 1;
}
#player-track.active
{
top: -100px;
}
#album-name
{
color: #54576f;
font-size: 17px;
font-weight: bold;
}
#track-name
{
color: #acaebd;
font-size: 13px;
margin: 2px 0 13px 0;
}
#track-time
{
height: 12px;
margin-bottom: 3px;
overflow: hidden;
}
#current-time
{
float: left;
}
#track-length
{
float: right;
}
#current-time, #track-length
{
color: transparent;
font-size: 11px;
background-color: #ffe8ee;
border-radius: 10px;
transition: 0.3s ease all;
}
#track-time.active #current-time, #track-time.active #track-length
{
color: #f86d92;
background-color: transparent;
}
#s-area, #seek-bar
{
position: relative;
height: 4px;
border-radius: 4px;
}
#s-area
{
background-color:#ffe8ee;
cursor: pointer;
}
#ins-time
{
position: absolute;
top: -29px;
color: #fff;
font-size: 12px;
white-space: pre;
padding: 5px 6px;
border-radius: 4px;
display:none;
}
#s-hover
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
opacity: 0.2;
z-index: 2;
}
#ins-time, #s-hover
{
background-color: #3b3d50;
}
#seek-bar
{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
background-color: #fd6d94;
transition: 0.2s ease width;
z-index: 1;
}
#player-content
{
position: relative;
height: 100%;
background-color: rgb(6, 21, 29);
box-shadow: 0px 0px 40px #989797;
border-radius: 15px;
z-index: 2;
}
#album-art
{
position: absolute;
top: -40px;
width: 115px;
height: 115px;
margin-left: 40px;
transform: rotateZ(0);
transition: 0.3s ease all;
box-shadow: 0 0 0 10px #fff;
border-radius: 50%;
overflow: hidden;
}
#album-art.active
{
top: -60px;
box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}
#album-art:before
{
content: '';
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 20px;
height: 20px;
margin: -10px auto 0 auto;
background-color: #d6dee7;
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff;
z-index: 2;
}
#album-art img
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
}
#album-art img.active
{
opacity: 1;
z-index: 1;
}
#album-art.active img.active
{
z-index: 1;
animation: rotateAlbumArt 3s linear 0s infinite forwards;
}
@keyframes rotateAlbumArt
{
0%{ transform: rotateZ(0); }
100%{ transform: rotateZ(360deg); }
}
#buffer-box
{
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 13px;
color: #1f1f1f;
font-size: 13px;
font-family: Helvetica;
text-align: center;
font-weight: bold;
line-height: 1;
padding: 6px;
margin: -12px auto 0 auto;
background-color: rgba(255, 255, 255, 0.19);
opacity: 0;
z-index: 2;
}
#album-art img, #buffer-box
{
transition: 0.1s linear all;
}
#album-art.buffering img
{
opacity: 0.25;
}
#album-art.buffering img.active
{
opacity: 0.8;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#album-art.buffering #buffer-box
{
opacity: 1;
}
#player-controls
{
width: 250px;
height: 100%;
margin: 0 5px 0 141px;
float: right;
overflow: hidden;
}
.control
{
width: 33.333%;
float: left;
padding: 0px;
height: 100%;
}
.button
{
width: 20px;
height: 20px;
padding: 25px;
left: 15px;
top: 25px;
background-color: rgb(40, 40, 40);
border-radius: 10px;
cursor: pointer;
position: relative;
}
#play-pause-button i {
position: absolute;
}
.button i
{
display: block;
color: #d6dee7;
font-size: 20px;
text-align: center;
position: absolute;
right: 14px;
line-height: 0;
}
.button, .button i
{
transition: 0.2s ease all;
}
.button:hover i
{
color: rgb(84, 247, 163);
}
#ytd-url {
display: block;
position: fixed;
right: 0;
bottom: 0;
padding: 10px 14px;
margin: 20px;
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #ae5f87;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(174, 95, 135, 0.86);
z-index: 125;
}

为.button i样式删除额外的cssright: 14px; line-height: 0。

.button i
{
display: block;
color: #d6dee7;
font-size: 20px;
text-align: center;
position: absolute;
/*right: 14px;           //Remove this line
line-height: 0;*/        //Remove this line
} 


$(function()
{
var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Dawn','Me & You','Electro Boy','Home','Proxy (Original Mix)'], trackNames = ['Skylike - Dawn','Alex Skrindo - Me & You','Kaaze - Electro Boy','Jordan Schor - Home','Martin Garrix - Proxy'], albumArtworks = ['_1','_2','_3','_4','_5'], trackUrl = ['https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/1.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/3.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/4.mp3','https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/5.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
function playPause()
{
setTimeout(function()
{
if(audio.paused)
{
playerTrack.addClass('active');
albumArt.addClass('active');
checkBuffering();
i.attr('class','fas fa-pause');
audio.play();
}
else
{
playerTrack.removeClass('active');
albumArt.removeClass('active');
clearInterval(buffInterval);
albumArt.removeClass('buffering');
i.attr('class','fas fa-play');
audio.pause();
}
},300);
}

function showHover(event)
{
seekBarPos = sArea.offset(); 
seekT = event.clientX - seekBarPos.left;
seekLoc = audio.duration * (seekT / sArea.outerWidth());

sHover.width(seekT);

cM = seekLoc / 60;

ctMinutes = Math.floor(cM);
ctSeconds = Math.floor(seekLoc - ctMinutes * 60);

if( (ctMinutes < 0) || (ctSeconds < 0) )
return;

if( (ctMinutes < 0) || (ctSeconds < 0) )
return;

if(ctMinutes < 10)
ctMinutes = '0'+ctMinutes;
if(ctSeconds < 10)
ctSeconds = '0'+ctSeconds;

if( isNaN(ctMinutes) || isNaN(ctSeconds) )
insTime.text('--:--');
else
insTime.text(ctMinutes+':'+ctSeconds);

insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0);

}
function hideHover()
{
sHover.width(0);
insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0);       
}

function playFromClickedPos()
{
audio.currentTime = seekLoc;
seekBar.width(seekT);
hideHover();
}
function updateCurrTime()
{
nTime = new Date();
nTime = nTime.getTime();
if( !tFlag )
{
tFlag = true;
trackTime.addClass('active');
}
curMinutes = Math.floor(audio.currentTime / 60);
curSeconds = Math.floor(audio.currentTime - curMinutes * 60);

durMinutes = Math.floor(audio.duration / 60);
durSeconds = Math.floor(audio.duration - durMinutes * 60);

playProgress = (audio.currentTime / audio.duration) * 100;

if(curMinutes < 10)
curMinutes = '0'+curMinutes;
if(curSeconds < 10)
curSeconds = '0'+curSeconds;

if(durMinutes < 10)
durMinutes = '0'+durMinutes;
if(durSeconds < 10)
durSeconds = '0'+durSeconds;

if( isNaN(curMinutes) || isNaN(curSeconds) )
tProgress.text('00:00');
else
tProgress.text(curMinutes+':'+curSeconds);

if( isNaN(durMinutes) || isNaN(durSeconds) )
tTime.text('00:00');
else
tTime.text(durMinutes+':'+durSeconds);

if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
trackTime.removeClass('active');
else
trackTime.addClass('active');

seekBar.width(playProgress+'%');

if( playProgress == 100 )
{
i.attr('class','fa fa-play');
seekBar.width(0);
tProgress.text('00:00');
albumArt.removeClass('buffering').removeClass('active');
clearInterval(buffInterval);
}
}

function checkBuffering()
{
clearInterval(buffInterval);
buffInterval = setInterval(function()
{ 
if( (nTime == 0) || (bTime - nTime) > 1000  )
albumArt.addClass('buffering');
else
albumArt.removeClass('buffering');
bTime = new Date();
bTime = bTime.getTime();
},100);
}
function selectTrack(flag)
{
if( flag == 0 || flag == 1 )
++currIndex;
else
--currIndex;
if( (currIndex > -1) && (currIndex < albumArtworks.length) )
{
if( flag == 0 )
i.attr('class','fa fa-play');
else
{
albumArt.removeClass('buffering');
i.attr('class','fa fa-pause');
}
seekBar.width(0);
trackTime.removeClass('active');
tProgress.text('00:00');
tTime.text('00:00');
currAlbum = albums[currIndex];
currTrackName = trackNames[currIndex];
currArtwork = albumArtworks[currIndex];
audio.src = trackUrl[currIndex];

nTime = 0;
bTime = new Date();
bTime = bTime.getTime();
if(flag != 0)
{
audio.play();
playerTrack.addClass('active');
albumArt.addClass('active');

clearInterval(buffInterval);
checkBuffering();
}
albumName.text(currAlbum);
trackName.text(currTrackName);
albumArt.find('img.active').removeClass('active');
$('#'+currArtwork).addClass('active');

bgArtworkUrl = $('#'+currArtwork).attr('src');
bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'});
}
else
{
if( flag == 0 || flag == 1 )
--currIndex;
else
++currIndex;
}
}
function initPlayer()
{   
audio = new Audio();
selectTrack(0);

audio.loop = false;

playPauseButton.on('click',playPause);

sArea.mousemove(function(event){ showHover(event); });

sArea.mouseout(hideHover);

sArea.on('click',playFromClickedPos);

$(audio).on('timeupdate',updateCurrTime);
playPreviousTrackButton.on('click',function(){ selectTrack(-1);} );
playNextTrackButton.on('click',function(){ selectTrack(1);});
}

initPlayer();
});
#app-cover  
{
position: relative;
top: 100px;
right: 0;
left: 0;
width: 430px;
height: 100px;
margin: -4px auto;
}

#player
{
position: relative;
height: 105%;
z-index: 3;
}
#player-track
{
position: absolute;
top: 0;
right: 15px;
left: 15px;
padding: 13px 22px 10px 184px;
background-color: #829aa3;
border-radius: 15px 15px 0 0;
transition: 0.9s ease top;
z-index: 1;
}
#player-track.active
{
top: -100px;
}
#album-name
{
color: #54576f;
font-size: 17px;
font-weight: bold;
}
#track-name
{
color: #acaebd;
font-size: 13px;
margin: 2px 0 13px 0;
}
#track-time
{
height: 12px;
margin-bottom: 3px;
overflow: hidden;
}
#current-time
{
float: left;
}
#track-length
{
float: right;
}
#current-time, #track-length
{
color: transparent;
font-size: 11px;
background-color: #ffe8ee;
border-radius: 10px;
transition: 0.3s ease all;
}
#track-time.active #current-time, #track-time.active #track-length
{
color: #f86d92;
background-color: transparent;
}
#s-area, #seek-bar
{
position: relative;
height: 4px;
border-radius: 4px;
}
#s-area
{
background-color:#ffe8ee;
cursor: pointer;
}
#ins-time
{
position: absolute;
top: -29px;
color: #fff;
font-size: 12px;
white-space: pre;
padding: 5px 6px;
border-radius: 4px;
display:none;
}
#s-hover
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
opacity: 0.2;
z-index: 2;
}
#ins-time, #s-hover
{
background-color: #3b3d50;
}
#seek-bar
{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
background-color: #fd6d94;
transition: 0.2s ease width;
z-index: 1;
}
#player-content
{
position: relative;
height: 100%;
background-color: rgb(6, 21, 29);
box-shadow: 0px 0px 40px #989797;
border-radius: 15px;
z-index: 2;
}
#album-art
{
position: absolute;
top: -40px;
width: 115px;
height: 115px;
margin-left: 40px;
transform: rotateZ(0);
transition: 0.3s ease all;
box-shadow: 0 0 0 10px #fff;
border-radius: 50%;
overflow: hidden;
}
#album-art.active
{
top: -60px;
box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}
#album-art:before
{
content: '';
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 20px;
height: 20px;
margin: -10px auto 0 auto;
background-color: #d6dee7;
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff;
z-index: 2;
}
#album-art img
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
}
#album-art img.active
{
opacity: 1;
z-index: 1;
}
#album-art.active img.active
{
z-index: 1;
animation: rotateAlbumArt 3s linear 0s infinite forwards;
}
@keyframes rotateAlbumArt
{
0%{ transform: rotateZ(0); }
100%{ transform: rotateZ(360deg); }
}
#buffer-box
{
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 13px;
color: #1f1f1f;
font-size: 13px;
font-family: Helvetica;
text-align: center;
font-weight: bold;
line-height: 1;
padding: 6px;
margin: -12px auto 0 auto;
background-color: rgba(255, 255, 255, 0.19);
opacity: 0;
z-index: 2;
}
#album-art img, #buffer-box
{
transition: 0.1s linear all;
}
#album-art.buffering img
{
opacity: 0.25;
}
#album-art.buffering img.active
{
opacity: 0.8;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#album-art.buffering #buffer-box
{
opacity: 1;
}
#player-controls
{
width: 250px;
height: 100%;
margin: 0 5px 0 141px;
float: right;
overflow: hidden;
}
.control
{
width: 33.333%;
float: left;
padding: 0px;
height: 100%;
}
.button
{
width: 20px;
height: 20px;
padding: 25px;
left: 15px;
top: 25px;
background-color: rgb(40, 40, 40);
border-radius: 10px;
cursor: pointer;
position: relative;
}
#play-pause-button i {
position: absolute;
}
.button i
{
display: block;
color: #d6dee7;
font-size: 20px;
text-align: center;
position: absolute;
/*right: 14px;*/            /*Remove this line*/
/*line-height: 0;*/         /*Remove this line*/
}
.button, .button i
{
transition: 0.2s ease all;
}
.button:hover i
{
color: rgb(84, 247, 163);
}
#ytd-url {
display: block;
position: fixed;
right: 0;
bottom: 0;
padding: 10px 14px;
margin: 20px;
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #ae5f87;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(174, 95, 135, 0.86);
z-index: 125;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app-cover">
<div id="bg-artwork"></div>
<div id="bg-layer"></div>
<div id="player">
<div id="player-track">
<div id="album-name"></div>
<div id="track-name"></div>
<div id="track-time">
<div id="current-time"></div>
<div id="track-length"></div>
</div>
<div id="s-area">
<div id="ins-time"></div>
<div id="s-hover"></div>
<div id="seek-bar"></div>
</div>
</div>
<div id="player-content">
<div id="album-art">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg" class="active" id="_1">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_2.jpg" id="_2">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_3.jpg" id="_3">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_4.jpg" id="_4">
<img src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_5.jpg" id="_5">
<div id="buffer-box">Buffering ...</div>
</div>
<div id="player-controls">
<div class="control">
<div class="button" id="play-previous">
<i class="fas fa-backward"></i>
</div>
</div>
<div class="control">
<div class="button" id="play-pause-button">
<i class="fas fa-play"></i>
</div>
</div>
<div class="control">
<div class="button" id="play-next">
<i class="fas fa-forward"></i>
</div>
</div>
</div>
</div>
</div>
</div>

你也可以在这里测试

我发现错误了，是另一个css类"这被用于页面上的另一个元素，它不断改变音乐播放按钮，我的CSS类不够具体。需要记住，专一性是css的关键!

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium