react+mediaelementandplayer插件实现带播放列表的音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:react+mediaelementandplayer插件实现带播放列表的音乐播放器代码
代码标签: react mediaelementandplayer 插件 实现 播放 列表 音乐 播放器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&display=swap'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mediaelementplayer.min.css">
<style>
body {
font-family: "Rubik", sans-serif;
color: #071739;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #000;
}
body h1 {
font-size: 36px;
margin-bottom: 0;
}
body .card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 371px;
padding: 0 5px;
margin-top: 40px;
border-radius: 20px;
color: #fff;
font-weight: 100;
box-shadow: 0px 0px 70px 0px #274684;
background: #071739;
overflow: hidden;
}
body .card .current-song {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 20px 0px;
border-radius: 20px;
color: #071739;
background: #fff;
}
body .card .current-song audio {
display: none;
}
body .card .current-song .img-wrap {
position: relative;
margin: 0 auto;
width: 270px;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0px 10px 40px 0px rgba(39, 70, 132, 0.7);
}
body .card .current-song .img-wrap img {
width: auto;
height: 100%;
}
body .card .current-song .song-name {
margin-top: 30px;
font-size: 22px;
}
body .card .current-song .song-autor {
color: #709fdc;
}
body .card .current-song .time {
display: flex;
justify-content: space-between;
margin-top: 10px;
width: 240px;
}
body .card .current-song #timeline {
position: relative;
margin: 0 auto;
width: 240px;
height: 5px;
background: #709fdc;
border-radius: 5px;
cursor: pointer;
}
body .card .current-song #timeline:hover .hover-playhead {
opacity: 1;
}
body .card .current-song #timeline:hover .hover-playhead::before {
opacity: 1;
}
body .card .current-song #timeline:hover .hover-playhead::after {
opacity: 1;
}
body .card .current-song #timeline #playhead {
position: relative;
z-index: 2;
width: 0;
height: 5px;
border-radius: 5px;
background: #071739;
}
body .card .current-song #timeline .hover-playhead {
position: absolute;
z-index: 1;
top: 0;
width: 0;
height: 5px;
opacity: 0;
border-radius: 5px;
background: #274684;
transition: opacity 0.3s;
}
body .card .current-song #timeline .hover-playhead::before {
opacity: 0;
content: attr(data-content);
display: block;
position: absolute;
top: -30px;
right: -23px;
width: 40px;
padding: 3px;
text-align: center;
color: white;
background: #274684;
border-radius: calc( 20px - 12px);
}
body .card .current-song #timeline .hover-playhead::after {
opacity: 0;
content: "";
display: block;
position: absolute;
top: -8px;
right: -8px;
border-top: 8px solid #274684;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
body .card .current-song .controls {
margin-top: 10px;
}
body .card .current-song .controls button {
color: #071739;
border-radius: 50%;
margin: 15px;
font-size: 18px;
text-align: center;
transition: 0.2s;
cursor: pointer;
border: none;
background: 0;
}
body .card .current-song .controls button:focus {
outline: none;
}
body .card .current-song .controls button.play {
width: 50px;
height: 50px;
border: 1px solid #e2e2e2;
}
body .card .current-song .controls button.play:hover {
left: 0;
box-shadow: 0px 0px 15px 0px rgba(39, 70, 132, 0.7);
}
body .card .current-song .controls button.play .fa-play {
transform: translateX(2px);
}
body .card .current-song .controls button.prev-next {
width: 35px;
height: 35px;
}
body .card .current-song .controls button.prev-next:hover {
transform: scale(1.2);
}
body .card .play-list {
display: flex;
flex-direction: column;
padding: 10px;
height: 180px;
overflow-y: scroll;
}
body .card .play-list .track {
display: flex;
align-items: center;
margin-bottom: 10px;
border-radius: calc( 20px - 10px);
border: 1px solid transparent;
transition: 0.3s;
cursor: pointer;
}
body .card .play-list .track:hover {
background: #274684;
border-color: #274684;
position: relative;
}
body .card .play-list .track.current-audio {
background: #274684;
box-shadow: 0px 0px 15px 0px #274684;
}
body .card .play-list .track.play-now {
background: #274684;
box-shadow: 0px 0px 15px 0px #274684;
position: relative;
}
body .card .play-list .track.play-now:after {
content: "";
display: block;
position: absolute;
left: 17px;
width: 57px;
height: 57px;
border-radius: calc( 20px - 10px);
font-size: 16px;
-webkit-animation: play 2s linear infinite;
animation: play 2s linear infinite;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 56 56' style='enable-background:new 0 0 56 56;' xml:space='preserve'%3E%3Cpath style='fill:%23071739;' d='M47.799,8.201c-10.935-10.935-28.663-10.935-39.598,0c-10.935,10.935-10.935,28.663,0,39.598 c10.935,10.935,28.663,10.935,39.598,0C58.734,36.864,58.734,19.136,47.799,8.201z M32.95,32.95c-2.734,2.734-7.166,2.734-9.899,0 c-2.734-2.734-2.734-7..........完整代码请登录后点击上方下载按钮下载查看
网友评论0