plyr实现一个极简音乐播放器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：plyr实现一个极简音乐播放器效果代码，带播放列表和下载功能。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/plyr.min.css">

    <style>
        /* Font Family
        ================================================== */
        
        @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap");
        
        
        /* Global Styles
        ================================================== */
        
        html,body {
        -webkit-font-smoothing:antialiased;
        -webkit-text-size-adjust:100%;
        background-color:#0665a2;
        color:#fff;
        font-size:1rem;
        font-family:"Source Sans Pro", arial, sans-serif;
        font-weight:400;
        letter-spacing:.025rem;
        line-height:1.618;
        padding:1rem 0;
        }
        
        *,::before,::after {
        box-sizing:border-box;
        }
        
        * {
        -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color:transparent;
        }
        
        
        /* Setup
        ================================================== */
        
        .container { position:relative; margin:0 auto; max-width:800px; width:100%; }
        .column { width:inherit; }
        
        
        /* Typography / Links
        ================================================== */
        
        p { color:#fff; display:block; font-size:.9rem; font-weight:400; margin:0 0 2px; }
        
        a,a:visited { color:#8cc3e6; outline:0; text-decoration:underline; }
        a:hover,a:focus { color:#bbdef5; }
        p a,p a:visited { line-height:inherit; }
        
        
        /* Misc.
        ================================================== */
        
        .add-bottom { margin-bottom:2rem !important; }
        .left { float:left; }
        .right { float:right; }
        .center { text-align:center; }
        .hidden { display:none; }
        
        .no-support {
        margin:2rem auto;
        text-align:center;
        width:90%;
        }
        
        
        /* Audio Player Styles
        ================================================== */
        
        audio {
        display:none;
        }
        
        #audiowrap,
        #plwrap {
        margin:0 auto;
        }
        
        #tracks {
        font-size:0;
        position:relative;
        text-align:center;
        }
        
        #nowPlay {
        display:block;
        font-size:0;
        }
        
        #nowPlay span {
        display:inline-block;
        font-size:1.05rem;
        vertical-align:top;
        }
        
        #nowPlay span#npAction {
        padding:21px;
        width:30%;
        }
        
        #nowPlay span#npTitle {
        padding:21px;
        text-align:right;
        width:70%;
        }
        
        #plList li {
        cursor:pointer;
        display:block;
        margin:0;
        padding:21px 0;
        }
        
        #plList li:hover {
        background-color:rgba(0, 0, 0, .1);
        }
        
        .plItem {
        position:relative;
        }
        
        .plTitle {
        left:50px;
        overflow:hidden;
        position:absolute;
        right:65px;
        text-overflow:ellipsis;
        top:0;
        white-space:nowrap;
        }
        
        .plNum {
        padding-left:21px;
        width:25px;
        }
        
        .plLength {
        padding-left:21px;
        position:absolute;
        right:21px;
        top:0;
        }
        
        .plSel,
        .plSel:hover {
        background-color:rgba(0, 0, 0, .1);
        color:#fff;
        cursor:default !important;
        }
        
        #tracks a {
        border-radius:3px;
        color:#fff;
        cursor:pointer;
        display:inline-block;
        font-size:2.3rem;
        height:40px;
        line-height:.2;
        margin:0 5px 30px;
        padding:12px;
        text-decoration:none;
        transition:background .3s ease;
        }
        
        #tracks a:hover,
        #tracks a:active {
        background-color:rgba(0, 0, 0, .1);
        color:#fff;
        }
        
        #tracks a::-moz-focus-inner {
        border:0;
        padding:0;
        }
        
        
        /* Plyr Overrides
        ================================================== */
        
        .plyr--audio .plyr__controls {
        background-color:transparent;
        border:none;
        color:#fff;
        font-family:"Source Sans Pro", arial, sans-serif;
        padding:20px 20px 20px 13px;
        width:100%;
        }
        
        a.plyr__controls__item.plyr__control:hover,
        .plyr--audio .plyr__controls button:hover,
        .plyr--audio .plyr__controls button.tab-focus:focus,
        .plyr__play-large {
        background-color:rgba(0, 0, 0, .1);
        }
        
        .plyr__progress--played,
        .plyr__volume--display {
        color:rgba(0, 0, 0, .1);
        }
        
        .plyr--audio .plyr__progress--buffer,
        .plyr--audio .plyr__volume--display {
        background-color:rgba(0, 0, 0, .1);
        }
        
        .plyr--audio .plyr__progress--buffer {
        color:rgba(0, 0, 0, .1);
        }
        
        .plyr__controls .plyr__controls__item.plyr__time {
        font-size:14px;
        margin-left:7px;
        }
        
        
        /* Media Queries
        ================================================== */
        
        @media only screen and (max-width:600px) {
            #nowPlay span#npAction { display:none; }
            #nowPlay span#npTitle { display:block; text-align:center; width:100%; }
        }
    </style>



</head>

<body>
    <div class="container">
        <div class="column add-bottom">
            <div id="mainwrap">
                <div id="nowPlay">
                    <span id="npAction">Paused...</span><span id="npTitle"></span>
                </div>
                <div id="audiowrap">
           .........完整代码请登录后点击上方下载按钮下载查看