[해피CGI][cgimall] 반응형이 지원되는 음악 미디어 플레이어 Responsive Audio Player

반응형이 지원되는 음악 미디어 플레이어입니다.

소스를 변경하여 다양하게 응용 가능합니다.

HTML 구조

<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">

                <div id="audio0">

                    <audio id="audio1" preload controls>Your browser does not support HTML5 Audio! 😢</audio>

                </div>

                <div id="tracks">

                    <a id="btnPrev">&larr;</a><a id="btnNext">&rarr;</a>

                </div>

            </div>

            <div id="plwrap">

                <ul id="plList"></ul>

            </div>

        </div>

    </div>

    <div class="column add-bottom center">

       

Music by Mythium

       

Download: zip / torrent

    </div>

</div>

 

CSS 소스

/* 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;

}

 

.
.
.

 

JS 소스

// Mythium Archive: https://archive.org/details/mythium/

 

jQuery(function ($) {

    'use strict'

    var supportsAudio = !!document.createElement('audio').canPlayType;

    if (supportsAudio) {

        // initialize plyr

        var player = new Plyr('#audio1', {

            controls: [

                'restart',

                'play',

                'progress',

                'current-time',

                'duration',

                'mute',

                'volume',

                'download'

            ]

        });

        // initialize playlist and controls

        var index = 0,

            playing = false,

            mediaPath = 'https://archive.org/download/mythium/',

            extension = '',

            tracks = [{

                "track": 1,

                "name": "All This Is - Joe L.'s Studio",

                "duration": "2:46",

                "file": "JLS_ATI"

            }, {

                "track": 2,

                "name": "The Forsaken - Broadwing Studio (Final Mix)",

                "duration": "8:30",

                "file": "BS_TF"

            }, {

                "track": 3,

                "name": "All The King's Men - Broadwing Studio (Final Mix)",

                "duration": "5:01",

                "file": "BS_ATKM"

            }, {

                "track": 4,

                "name": "The Forsaken - Broadwing Studio (First Mix)",

                "duration": "8:31",

                "file": "BSFM_TF"

            }, {

                "track": 5,

                "name": "All The King's Men - Broadwing Studio (First Mix)",

                "duration": "5:05",

                "file": "BSFM_ATKM"

            }, {

                "track": 6,

                "name": "All This Is - Alternate Cuts",

                "duration": "2:48",

                "file": "AC_ATI"

            },
.
.
.

첨부파일을 다운로드하거나 해당 사이트로 이동하여 전체 소스를 확인하실 수 있습니다.