Scribd Logo
Upload

Welcome to Scribd!

  • Music Player 2

    Uploaded by

    Bart Foxworth
    2 views3 pages
    This document defines the CSS and HTML for a music player interface. It includes styling for circular progress bar, play/pause buttons, and displays for song name and artist. The player has a fixed position and is implemented with common elements like divs, links to font libraries, and an audio tag to embed the music file.

    Original Description:

    Original Title

    music player 2

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document defines the CSS and HTML for a music player interface. It includes styling for circular progress bar, play/pause buttons, and displays for song name and artist. The player has a fixed position and is implemented with common elements like divs, links to font libraries, and an audio tag to embed the music file.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views3 pages

    Music Player 2

    Uploaded by

    Bart Foxworth
    This document defines the CSS and HTML for a music player interface. It includes styling for circular progress bar, play/pause buttons, and displays for song name and artist. The player has a fixed position and is implemented with common elements like divs, links to font libraries, and an audio tag to embed the music file.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.

    js"></script>
    <link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">

    <!-------MUSIC PLAYER BY GLENTHEMES------->


    <script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
    <style>
    /*-------MUSIC PLAYER BY GLENTHEMES-------*/
    :root {
    --Circle-Size:38px;
    --Progress-Border-Size:2px;
    --Progress-Empty:#eee;
    --Progress-Fill:#FF8AD8;
    --Player-Background:#fbfbfb;
    --Play-Pause-Buttons-Size:14px;
    --Play-Pause-Buttons-Color:#FF8AD8;
    --Player-Text-Margin:16px;

    --Song-Name-Font-Size:10px;
    --Song-Name-Color:#FF8AD8;

    --Artist-Name-Font-Size:11px;
    --Artist-Name-Color:#FFDEF4;
    }

    #glenplayer07 {
    position:fixed;
    bottom:0;margin-bottom:30px;
    left:0;margin-left:30px;
    z-index:99;
    }

    .flamingo {
    display:flex;
    align-items:center;
    }

    .circleofdeath {
    width:var(--Circle-Size);
    height:var(--Circle-Size);
    border-radius:100%;
    overflow:hidden;
    }

    .tinfoil {
    width:var(--Circle-Size);
    height:var(--Circle-Size);
    background:var(--Progress-Empty);
    border-radius:100%;
    }

    .oven {
    background:var(--Progress-Fill);
    }

    .oliveoil {
    width:100%;
    height:100%;
    }

    .crust {
    position:absolute;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--Circle-Size);
    height:var(--Circle-Size);
    }

    .cherry {
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
    height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
    background:var(--Player-Background);
    border-radius:100%;
    cursor:pointer;
    z-index:1;
    }

    .music-controls {display:flex;align-items:center}

    .music-controls .material-icons {
    font-size:var(--Play-Pause-Buttons-Size);
    color:var(--Play-Pause-Buttons-Color);
    }

    .pausee {display:none;}

    .beff {display:none;}
    .aff {display:block;}

    .music-info {
    margin-left:var(--Player-Text-Margin);
    line-height:1em;
    }

    .song-name {
    font-family:arial;
    font-size:var(--Song-Name-Font-Size);
    text-transform:uppercase;
    letter-spacing:0.3px;
    color:var(--Song-Name-Color);
    }

    .artist-name {
    margin-top:3px;
    font-family:arial;
    font-size:var(--Artist-Name-Font-Size);
    letter-spacing:0.3px;
    color:var(--Artist-Name-Color);
    }
    </style>
    <!-------MUSIC PLAYER BY GLENTHEMES------->
    <div id="glenplayer07">
    <div class="flamingo">
    <div class="circleofdeath">
    <div class="tinfoil">
    <div class="oliveoil"></div>
    </div>
    <div class="crust">
    <div class="cherry">
    <div class="music-controls">
    <i class="material-icons playy">play_arrow</i>
    <i class="material-icons pausee">pause</i>
    </div>
    </div><!--cherry-->
    </div><!--crust-->
    </div><!--circleofdeath-->

    <div class="music-info">
    <div class="song-name">dance dance</div>
    <div class="artist-name">moe shop</div>
    </div><!--music-info-->
    </div><!--flamingo-->
    </div><!--glenplayer07-->

    <audio id="audio" src="https://dl.dropbox.com/s/jtzuk5zeve3mx9k/Moe%20Shop%20-


    %20Dance%20Dance%20%28w%20Android52%29%20%5BMoshi%20Moshi%20EP%5D.mp3?dl=0"
    type="audio"></audio>
    <!----end music player---->

    You might also like