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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看