全屏带歌词显示音乐播放器效果代码-html代码-BFW代码库

代码语言：html
所属分类：多媒体
代码描述：全屏带歌词显示音乐播放器效果代码，可以显示歌词、进度、背景大图及音乐人照片、播放进度、声音调节等功能。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">

<style>
    @charset "utf-8";
html{overflow-x:hidden;overflow-y:auto;-webkit-user-select:none}
.le{float:left}
.ri{float:right}
*{margin:0;padding:0}
body,html{width:100%;height:100%;overflow:hidden}
body{font:12px/1.5 "hiragino sans gb","Helvetica Neue",Helvetica,STHeiTi;-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
li{list-style:none}
a,img{-webkit-touch-callout:none}
.wrap{position:relative;width:100%;height:100%;overflow:hidden}
.box{position:absolute;top:0;bottom:112px;z-index:5;width:100%;overflow:hidden}
.flex_box{display:-webkit-box;-webkit-box-orient:vertical;display:-ms-flexbox;-ms-flex-direction:column;width:100%;height:100%}
.flex_item{-webkit-box-flex:1;-ms-flex:1;position:relative}
.user_info{position:absolute;top:10px;left:0;z-index:6;height:32px;line-height:32px;-webkit-border-radius:0 300px 300px 0;border-radius:0 300px 300px 0;background:rgba(0,0,0,.25)}
.user_info .txt{float:left;margin:0 5px;font-size:12px;color:#fff}
.user_info .avatar{float:left;width:25px;height:25px;margin:4px 4px 0 0;-webkit-border-radius:300px;border-radius:300px}
.user_info .avatar img{display:block;width:100%;height:100%;-webkit-border-radius:300px;border-radius:300px}
.song_info{display:-webkit-box;-webkit-box-align:center;display:-ms-flexbox;-ms-flex-align:center;position:absolute;top:0;bottom:0;width:100%}
.song_info .cont{width:100%}
.song_info .singer,.song_info .song{width:60%;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#fff}
.song_info .song{font-size:18px;font-weight:400}
.song_info .singer{margin-top:4px;font-size:15px}
.song_info .singer .arrow{display:inline-block;position:relative;top:1px;width:8px;height:13px;margin-left:5px;background:url(data:image/png;base64,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) no-repeat;background-size:50px 200px;background-position:0 -160px}
.album_cover .cover_container{position:relative;max-width:50%;height:100%;margin:42px auto;padding-bottom:23px}
.cover_container p{color:#fff;font-size:22px;text-align:center}
.album_cover img{display:block;width:100%;background:#fff}
.kognzhianniu .btn_pause,.kognzhianniu .btn_play{position:absolute;bottom:0;left:50%;z-index:10;width:46px;height:46px;overflow:hidden;margin-left:-23px}
.name{width:30%;height:50px;position:absolute;left:11px;bottom:28px;z-index:9999999;overflow:hidden}
.song{width:40px;position:absolute;top:10%}
.song img{width:inherit}
.singer{color:#fff;width:83%;position:absolute;left:45px;top:22%}
.vlue{width:200px;height:22px;position:absolute;left:65%;bottom:41px;z-index:9999999;overflow:hidden}
.vlue-icon{font-size:14px;border:none;width:22px;height:22px;border-radius:32px;cursor:pointer}
.vlue-icon i{display:block;width:22px;height:22px;background-position:center;background-repeat:no-repeat}
.v_o{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABGElEQVQ4T6WT0VECQRBE+0UgGQgZQAQSAmZABmIGZoAZSAiXgRqBZIAZSAZN9dYetSKHUm7VfVztzOuZnln0z8OlfNtLSQ/AbChuEGD7WVIAN8Axzva4Qh8DPQuwvZE0rYCPE8BI0ls+YEUl3jYlRjngObC37QBsLySNgE3N2Uma5GIvadsAtiH3/w0gFUV5CXS1RQVQFIZMau9rFWtgYnsuaX0VICJNRTFzdxXAdgz8qp6kgtdrATF4DCzqjiwLQNJT48E7ELPKOZlCGS/waTsxXT+eo+t1/i9AWZQGkPIzxiRnwSI6/eF+nXGXXiXd9z03FRXzJM2A7dAmRi393tWev8XZThtld357TGltBUT17LkI+MtLPwBPOrS2Gi0S7QAAAABJRU5ErkJggg==)}
.v_c{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABCklEQVQ4T52TwU1DMRBE31wQx5RACVABoQLogKQDqIB0AFSQcEAcIRUQQQOUQAl0MGi+bMkK+Cfgo7V+OzuzFjuO7Ymkr16Zxt7bngFLYC5p9VttF2D7Dggg3VeSFnsDbKfbFLgAAtp0AbaPgMuGnkdRNs3stje7AJH4WaSG8wEsqnEVUO5PJV2nyPYxcCPbBs4kpdOP0wBeogR4Bu6BV2C9NyAelK7vwAHwJGlWASeSIr2roAG8AYfAo6T5AJA0FudgIpARBtk1mYxTFbQZr1s1WyYmmavGxEUAuUh09cTdZeP2eIzbQxejskhDOkV6f5E6xk3KnOdlPx7+tMoVWsa7/ddnaiCj3/kbXwCYoyIk9KUAAAAASUVORK5CYII=)}
.range-volume{position:absolute;top:2%;left:15%}
.range-volume #volume{width:160px;border:1px solid #000;height:5px;vertical-align:middle;border-radius:20px;background-color:#000;outline:0;margin-top:9px;appearance:none;-webkit-appearance:none}
#volume::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border:1px solid #000;border-radius:10px;background:#fff}
.kognzhianniu .btn_pause span,.kognzhianniu .btn_play span{position:absolute;top:0;left:0;z-index:2;width:46px;height:46px;line-height:999em;background:url(data:image/png;base64,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) no-repeat;background-size:50px 200px}
.kognzhianniu .btn_pause span{background-position:0 -50px}
.kognzhianniu .btn_pause i,.kognzhianniu .btn_play .........完整代码请登录后点击上方下载按钮下载查看