js+css实现简洁的音乐播放器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js+css实现简洁的音乐播放器效果代码，包含播放、下一首、上一首、进度显示、歌名显示、专辑照片等。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *:focus
    {
        outline: none;
    }
    
    body
    {
        font-family: Helvetica, Arial;
        margin: 0;
        background-color: #ffeff5;
    }
    
    #app-cover
    {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        width: 430px;
        height: 100px;
        margin: -4px auto;
    }
    
    #bg-artwork
    {
        position: fixed;
        top: -30px;
        right: -30px;
        bottom: -30px;
        left: -30px;
       
       
        filter: blur(40px);
        -webkit-filter: blur(40px);
        z-index: 1;
    }
    
    #bg-layer
    {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #fff;
        opacity: 0.51;
        z-index: 2;
    }
    
    #player
    {
        position: relative;
        height: 100%;
        z-index: 3;
    }
    
    #player-track
    {
        position: absolute;
        top: 0;
        right: 15px;
        left: 15px;
        padding: 13px 22px 10px 184px;
        background-color: #fff7f7;
        border-radius: 15px 15px 0 0;
        transition: 0.3s ease top;
        z-index: 1;
    }
    
    #player-track.active
    {
        top: -92px;
    }
    
    #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: #fff;
        box-shadow: 0 30px 80px #656565;
        border-radius: 15px;
        z-index: 2;
    }
    
    #album-art
    {
        position: absolute;
        top: -40px;
        width: 115px;
        height: 115px;
        margin-left: 40px;
        -webkit-transform: rotateZ(0);
                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;
        -webkit-animation: rotateAlbumArt 3s linear 0s infinite forwards;
                animation: rotateAlbumArt 3s linear 0s infinite forwards;
    }
    
    @-webkit-keyframes rotateAlbumArt
    {
        0%{ -webkit-transform: rotateZ(0); transform: rotateZ(0); }
        100%{ -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
    }
    
    @keyframes rotateAlbumArt
    {
        0%{ -webkit-transform: rotateZ(0); transform: rotateZ(0); }
        100%{ -webkit-transform: rotateZ(360deg); 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: 12px 0;
    }
    
    .button
    {
        width: 26px;
        height: 26px;
        padding: 25px;
        background-color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    
    .button i
    {
        display: block;
        color: #d6dee7;
        font-size: 26px;
        text-align: center;
        line-height: 1;
    }
    
    .button, .button i
    {
        transition: 0.2s ease all;
    }
    
    .button:hover
    {
        background-color: #d6d6de;
    }
    
    .button:hover i
    {
        color: #fff;
    }
    
    #follow-me-link
    { 
        top: 10px;
        font-size: 13px;
        padding: 5px 7px;
        background-color: #f86d92;
        border-radius: 2px;
    }
    
    #share-link
    {
        top: 45px;
        width: 16px;
        height: 16px;
        padding: 10px;
        font-size: 16px;
        background-color: #7dca24;
        border-radius: 50%;
    }
    
    #follow-me-link, #share-link
    {
        position: fixed;
        right: 10px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        z-index: 125;
    }
    </style>

</head>

<body>

    <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="//repo.bfw.wiki/bfwrepo/image/5e584482a56eb.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="active" id="_1">
                    <img src="//repo.bfw.wiki/bfwrepo/image/5fcd6f952cb56.png" id="_2">
                    <img src="//repo.bfw.wiki/bfwrepo/image/61132edb7fba9.png" id="_3">
                    <img src="//repo.bfw.wiki/bfwrepo/image/61132edb7fba9.png" id="_4">
                    <img src="//repo.bfw.wiki/bfwrepo/image/61132edb7fba9.png" id="_5">
                    <div id="buffer-box">缓冲…</div>
                </div>
                <div id="player-controls">
                    <div class="control">
                        <div class="button" id="play-previous">
                            <i class="fas fa fa-step-backward "></i>
                        </div>
                    </div>
                    <div class="control">
                        <div cl.........完整代码请登录后点击上方下载按钮下载查看