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