coder
/
CloudMusic


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="CodeHim">
    <title>Playlist</title>

    <!-- css/style.css -->
    <style>
        @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

        *, *:before, *:after {
            outline: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        input, button {
            outline: none;
        }

        a, a:hover, a:visited {
            color: #ddd;
            text-decoration: none;
        }

        .flex {
            display: -webkit-flex;
            display: flex;
        }

        .flex-wrap {
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .flex-align {
            -webkit-align-items: center;
            align-items: center;
        }

        .w-full {
            width: 100%;
        }

        /* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
        #simp button, #simp input, #simp img {
            border: 0;
        }

        #simp {
            max-width: 600px;
            font-size: 14px;
            font-family: "Segoe UI", Tahoma, sans-serif;
            text-align: initial;
            line-height: initial;
            background: #17212b;
            color: #ddd;
            margin: 0 auto;
            border-radius: 6px;
            overflow: hidden;
        }

            #simp .simp-album {
                padding: 20px 25px 5px;
            }

                #simp .simp-album .simp-cover {
                    margin-right: 20px;
                }

                    #simp .simp-album .simp-cover img {
                        max-width: 80px;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                        display: block;
                    }

                #simp .simp-album .simp-title {
                    font-size: 120%;
                    font-weight: bold;
                }

                #simp .simp-album .simp-artist {
                    font-size: 90%;
                    color: #6c7883;
                }

            #simp .simp-controls {
                padding: 15px;
            }

                #simp .simp-controls button {
                    font-size: 130%;
                    width: 32px;
                    height: 32px;
                    background: none;
                    color: #ddd;
                    padding: 7px;
                    cursor: pointer;
                    border: 0;
                    border-radius: 3px;
                }

                    #simp .simp-controls button[disabled] {
                        color: #636469;
                        cursor: initial;
                    }

                    #simp .simp-controls button:not([disabled]):hover {
                        background: #4082bc;
                        color: #fff;
                    }

                #simp .simp-controls .simp-prev, #simp .simp-controls .simp-next {
                    font-size: 100%;
                }

                #simp .simp-controls .simp-tracker, #simp .simp-controls .simp-volume {
                    flex: 1;
                    margin-left: 10px;
                    position: relative;
                }

                #simp .simp-controls .simp-buffer {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    left: 0;
                    height: 5px;
                    margin-top: -2.5px;
                    border-radius: 100px;
                }

                #simp .simp-controls .simp-loading .simp-buffer {
                    -webkit-animation: audio-progress 1s linear infinite;
                    animation: audio-progress 1s linear infinite;
                    background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
                    background-repeat: repeat-x;
                    background-size: 25px 25px;
                    color: transparent;
                }

                #simp .simp-controls .simp-time, #simp .simp-controls .simp-others {
                    margin-left: 10px;
                }

                #simp .simp-controls .simp-volume {
                    max-width: 110px;
                }

                    #simp .simp-controls .simp-volume .simp-mute {
                        margin-right: 5px;
                    }

                #simp .simp-controls .simp-others .simp-active {
                    background: #242f3d;
                }

                #simp .simp-controls .simp-others .simp-shide button {
                    font-size: 100%;
                    padding: 0;
                    width: 24px;
                    height: 14px;
                    display: block;
                }

                #simp .simp-controls input[type=range] {
                    -webkit-appearance: none;
                    background: transparent;
                    height: 19px;
                    margin: 0;
                    width: 100%;
                    display: block;
                    position: relative;
                    z-index: 2;
                }

                    #simp .simp-controls input[type=range]::-webkit-slider-runnable-track {
                        background: rgba(183,197,205,.66);
                        height: 5px;
                        border-radius: 2.5px;
                        transition: box-shadow .3s ease;
                        position: relative;
                    }

                    #simp .simp-controls input[type=range]::-moz-range-track {
                        background: rgba(183,197,205,.66);
                        height: 5px;
                        border-radius: 2.5px;
                        transition: box-shadow .3s ease;
                        position: relative;
                    }

                #simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track {
                    background: #2f3841;
                }

                #simp .simp-controls .simp-load .simp-progress::-moz-range-track {
                    background: #2f3841;
                }

                #simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track {
                    background: rgba(255,255,255,.25);
                }

                #simp .simp-controls .simp-loading .simp-progress::-moz-range-track {
                    background: rgba(255,255,255,.25);
                }

                #simp .simp-controls input[type=range]::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    background: #fff;
                    height: 13px;
                    width: 13px;
                    margin-top: -4px;
                    cursor: pointer;
                    border-radius: 50%;
                    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);
                }

                #simp .simp-controls input[type=range]::-moz-range-thumb {
                    -webkit-appearance: none;
                    background: #fff;
                    height: 13px;
                    width: 13px;
                    cursor: pointer;
                    border-radius: 50%;
                    box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);
                }

            #simp .simp-footer {
                padding: 10px 10px 12px;
                font-size: 90%;
                text-align: center;
                opacity: .7;
            }

            #simp .simp-display {
                overflow: hidden;
                max-height: 650px;
                transition: max-height .5s ease-in-out;
            }

            #simp .simp-hide {
                max-height: 0;
            }
            /* playlist */
            #simp ul {
                margin: 5px 0 0;
                padding: 0;
                list-style: none;
                max-height: calc(100vh - 300px);
            }

                #simp ul li {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                    margin: 0;
                    padding: 8px 20px;
                    cursor: pointer;
                }

                    #simp ul li:last-child {
                        padding-bottom: 13px;
                    }

                    #simp ul li:nth-child(odd) {
                        background: #0e1621;
                    }

                    #simp ul li:hover {
                        background: #242f3d;
                    }

                    #simp ul li.simp-active {
                        background: #4082bc;
                        color: #fff;
                    }

                    #simp ul li .simp-desc {
                        font-size: 90%;
                        opacity: .5;
                        margin-left: 5px;
                    }
            /* playlist scrollbar */
            #simp ul {
                overflow-y: auto;
                overflow-x: hidden;
                scrollbar-color: #73797f #2f3841;
            }

                #simp ul::-webkit-scrollbar-track {
                    background-color: #2f3841;
                }

                #simp ul::-webkit-scrollbar {
                    width: 6px;
                    background-color: #2f3841;
                }

                #simp ul::-webkit-scrollbar-thumb {
                    background-color: #73797f;
                }
        /* progress animation */
        @-webkit-keyframes audio-progress {
            to {
                background-position: 25px 0;
            }
        }

        @keyframes audio-progress {
            to {
                background-position: 25px 0;
            }
        }
        /* mobile */
        @media screen and (max-width:480px) {
            #simp .simp-controls .simp-volume, #simp .simp-controls .simp-others {
                display: none;
            }

            #simp .simp-controls .simp-time {
                margin-right: 10px;
            }
        }

        @media screen and (max-width:370px) {
            #simp .simp-time .simp-slash, #simp .simp-time .end-time {
                display: none;
            }
        }
    </style>
    <!-- css/demo.css -->
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
        @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            font-style: normal;
            font-weight: 300;
            font-smoothing: antialiased;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 15px;
            background: #eee;
        }

        .intro {
            background: #fff;
            padding: 60px 30px;
            color: #333;
            margin-bottom: 15px;
            line-height: 1.5;
            text-align: center;
        }

            .intro h1 {
                font-size: 18pt;
                padding-bottom: 15px;
            }

            .intro p {
                font-size: 14px;
            }

        .action {
            text-align: center;
            display: block;
            margin-top: 20px;
        }

        a.btn {
            text-decoration: none;
            color: #666;
            border: 2px solid #666;
            padding: 10px 15px;
            display: inline-block;
            margin-left: 5px;
        }

            a.btn:hover {
                background: #666;
                color: #fff;
                transition: .3s;
                -webkit-transition: .3s;
            }

        .btn:before {
            font-family: FontAwesome;
            font-weight: normal;
            margin-right: 10px;
        }

        .github:before {
            content: "\f09b"
        }

        .down:before {
            content: "\f019"
        }

        .back:before {
            content: "\f112"
        }

        .credit {
            background: #fff;
            padding: 12px;
            font-size: 9pt;
            text-align: center;
            color: #333;
            margin-top: 40px;
        }

            .credit span:before {
                font-family: FontAwesome;
                color: #e41b17;
                content: "\f004";
            }

            .credit a {
                color: #333;
                text-decoration: none;
            }

                .credit a:hover {
                    color: #1DBF73;
                }

                    .credit a:hover:after {
                        font-family: FontAwesome;
                        content: "\f08e";
                        font-size: 9pt;
                        position: absolute;
                        margin: 3px;
                    }

        main {
            background: #fff;
            padding:: 20px;
        }

        article li {
            color: #444;
            font-size: 15px;
            margin-left: 33px;
            line-height: 1.5;
            padding: 5px;
        }

        article h1,
        article h2,
        article h3,
        article h4,
        article p {
            padding: 14px;
            color: #333;
        }

        article p {
            font-size: 15px;
            line-height: 1.5;
        }

        @media only screen and (min-width: 720px) {
            main {
                max-width: 720px;
                margin-left: auto;
                margin-right: auto;
                padding: 24px;
            }
        }

        .set-overlayer,
        .set-glass,
        .set-sticky {
            cursor: pointer;
            height: 45px;
            line-height: 45px;
            padding: 0 15px;
            color: #333;
            font-size: 16px;
        }

            .set-overlayer:after,
            .set-glass:after,
            .to-active:after,
            .set-sticky:after {
                font-family: FontAwesome;
                font-size: 18pt;
                position: relative;
                float: right;
            }

            .set-overlayer:after,
            .set-glass:after,
            .set-sticky:after {
                content: "\f204";
                transition: .6s;
            }

        .to-active:after {
            content: "\f205";
            color: #008080;
            transition: .6s;
        }

        .set-overlayer,
        .set-glass,
        .set-sticky,
        .source,
        .theme-tray {
            margin: 10px;
            background: #f2f2f2;
            border-radius: 5px;
            border: 2px solid #f1f1f1;
            box-sizing: border-box;
        }
        /* Syntax Highlighter*/

        pre.prettyprint {
            padding: 15px !important;
            margin: 10px;
            border: 0 !important;
            background: #f2f2f2;
            overflow: auto;
        }

        .source {
            white-space: pre;
            overflow: auto;
            max-height: 400px;
        }

        code {
            border: 1px solid #ddd;
            padding: 2px;
            border-radius: 2px;
        }
    </style>

</head>
<body>
    <main>
        <!-- Start DEMO HTML (Use the following code into your project)-->
        <div class="simple-audio-player" id="simp" data-config='{"shide_top":false,"shide_btm":false,"auto_load":true}'>
            <div class="simp-playlist">
                <ul>
                    <!--
                    <li><span class="simp-source" data-src="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D</span><span class="simp-desc">Johann Pachelbel</span></li>
                    <li><span class="simp-source" data-src="https://www.script-tutorials.com/demos/363/data/05.mp3">Artist 5</span></li>
                    <li><span class="simp-source" data-src="https://www.dropbox.com/s/6pays95q2a9jrsf/2020.01.02.mp3?dl=1" data-cover="https://i.postimg.cc/sDBycWS8/NMS-2019.jpg">Nightmare Side</span><span class="simp-desc">Set Stori</span></li>
                    <li class="simp-active"><span class="simp-source" data-src="https://www.dropbox.com/s/k011ag91uktonbv/Angklung%20Preman%20Pensiun.mp3?dl=1">Angklung Preman Pensiun</span></li>
                    <li><span class="simp-source" data-src="https://www.dropbox.com/s/prgte33m86n9ce7/Canon%20Rock%20%28JerryC%29%20-%20funtwo.mp3?dl=1">Canon Rock (JerryC)</span><span class="simp-desc">by Funtwo</span></li>
                    <li><span class="simp-source" data-src="http://listento.ardanradio.com:1059/;">105.9 FM Ardan Radio</span><span class="simp-desc">Streaming Radio</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/78_jailhouse-rock_elvis-presley-jerry-leiber-mike-stoller_gbia0080595b/Jailhouse%20Rock%20-%20Elvis%20Presley%20-%20Jerry%20Leiber-restored.mp3">Jailhouse Rock</span><span class="simp-desc">Elvis Presley</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/J._Period_and_Michael_Jackson_-_Man_Or_The_Music-2010/17%20Smooth%20Criminal.mp3">Smooth Criminal</span><span class="simp-desc">Michael Jackson</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/OldPop_256/VillagePeople-Y.m.c.a.mp3">Y.M.C.A</span><span class="simp-desc">Village People</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/chuckberryjohnnyb.goode/Chuck%20Berry%20-%20Johnny%20B.%20Goode.mp3">Johnny B. Goode</span><span class="simp-desc">Chuck Berry</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/AnimalsTheHouseOfTheRisingSun_201811/Animals%20-%20The%20House%20Of%20The%20Rising%20Sun.mp3">House of the Rising Sun</span><span class="simp-desc">The Animals</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/DontStopMeNow_255/Queen-DontStopMeNow.mp3">Don't Stop Me Now</span><span class="simp-desc">Queen</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/NeverGonnaGiveYouUpOriginal/Never%20Gonna%20Give%20You%20Up%20Original.mp3">Never Gonna Give You Up</span><span class="simp-desc">Rick Astley</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/gunsnrosessweetchildomine_202003/Guns%20N%27%20Roses%20-%20Sweet%20Child%20%27O%20Mine.mp3">Sweet Child O' Mine</span><span class="simp-desc">Guns N' Roses</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/01.TheFinalCountdown/01.%20The%20Final%20Countdown.mp3">The Final Countdown</span><span class="simp-desc">Europe</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/1MyHeartWillGoOnLoveThemeFromTitanic/1%20-%20My%20Heart%20Will%20Go%20On%20%28Love%20Theme%20from%20_Titanic_%29.mp3">My Heart Will Go On</span><span class="simp-desc">Céline Dion</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/tntvillage_323140/John%20Lennon%20-%20Imagine/01%20Imagine.mp3">Imagine</span><span class="simp-desc">John Lennon</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/TheBeatles1970HeyJudeAppleRecords6e062.0434807HeyJude/The%20Beatles%20-%201970%20-%20Hey%20Jude%20%28Apple%20Records%3B%20%236e%20062.04348%29_07%20-%20Hey%20Jude.mp3">Hey Jude</span><span class="simp-desc">The Beatles</span></li>
                    <li><span class="simp-source" data-src="https://archive.org/download/TakeMeHomeCountryRoad/JohnDenver-TakeMeHomeCountryRoad.mp3">Take Me Home, Country Roads</span><span class="simp-desc">John Denver</span></li>
                    -->
                    <!-- list place here -->
                </ul>
            </div>
            <div class="simp-footer">GUI Made with 💖 &amp; 🙌 by <a href="https://bit.ly/sekedus" target="_blank" title="Sekedus">Sekedus</a></div>
        </div>
        <!-- END EDMO HTML (Happy Coding!)-->
    </main>

    <!-- js/script.js -->
    <script>
        /*
Example: https://www.codehim.com/demo/javascript-audio-player-with-playlist/
*/
        // Multiple events to a listener
        function addEventListener_multi(element, eventNames, handler) {
            var events = eventNames.split(' ');
            events.forEach(e => element.addEventListener(e, handler, false));
        }

        // Random numbers in a specific range
        function getRandom(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // Position element inside element
        function getRelativePos(elm) {
            var pPos = elm.parentNode.getBoundingClientRect(); // parent pos
            var cPos = elm.getBoundingClientRect(); // target pos
            var pos = {};

            pos.top = cPos.top - pPos.top + elm.parentNode.scrollTop,
                pos.right = cPos.right - pPos.right,
                pos.bottom = cPos.bottom - pPos.bottom,
                pos.left = cPos.left - pPos.left;

            return pos;
        }

        function formatTime(val) {
            var h = 0, m = 0, s;
            val = parseInt(val, 10);
            if (val > 60 * 60) {
                h = parseInt(val / (60 * 60), 10);
                val -= h * 60 * 60;
            }
            if (val > 60) {
                m = parseInt(val / 60, 10);
                val -= m * 60;
            }
            s = val;
            val = (h > 0) ? h + ':' : '';
            val += (m > 0) ? ((m < 10 && h > 0) ? '0' : '') + m + ':' : '0:';
            val += ((s < 10) ? '0' : '') + s;
            return val;
        }

        function simp_initTime() {
            simp_controls.querySelector('.start-time').innerHTML = formatTime(simp_audio.currentTime); //calculate current value time
            if (!simp_isStream) {
                simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration); //calculate total value time
                simp_progress.value = simp_audio.currentTime / simp_audio.duration * 100; //progress bar
            }

            // ended of the audio
            if (simp_audio.currentTime == simp_audio.duration) {
                simp_controls.querySelector('.simp-plause').classList.remove('fa-pause');
                simp_controls.querySelector('.simp-plause').classList.add('fa-play');
                simp_audio.removeEventListener('timeupdate', simp_initTime);

                if (simp_isNext) { //auto load next audio
                    var elem;
                    simp_a_index++;
                    if (simp_a_index == simp_a_url.length) { //repeat all audio
                        simp_a_index = 0;
                        elem = simp_a_url[0];
                    } else {
                        elem = simp_a_url[simp_a_index];
                    }
                    simp_changeAudio(elem);
                    simp_setAlbum(simp_a_index);
                } else {
                    simp_isPlaying = false;
                }
            }
        }

        function simp_initAudio() {
            // if readyState more than 2, audio file has loaded
            simp_isLoaded = simp_audio.readyState == 4 ? true : false;
            simp_isStream = simp_audio.duration == 'Infinity' ? true : false;
            simp_controls.querySelector('.simp-plause').disabled = false;
            simp_progress.disabled = simp_isStream ? true : false;
            if (!simp_isStream) {
                simp_progress.parentNode.classList.remove('simp-load', 'simp-loading');
                simp_controls.querySelector('.end-time').innerHTML = formatTime(simp_audio.duration);
            }
            simp_audio.addEventListener('timeupdate', simp_initTime); //tracking load progress
            if (simp_isLoaded && simp_isPlaying) simp_audio.play();

            // progress bar click event
            addEventListener_multi(simp_progress, 'touchstart mousedown', function (e) {
                if (simp_isStream) {
                    e.stopPropagation();
                    return false;
                }
                if (simp_audio.readyState == 4) {
                    simp_audio.removeEventListener('timeupdate', simp_initTime);
                    simp_audio.pause();
                }
            });

            addEventListener_multi(simp_progress, 'touchend mouseup', function (e) {
                if (simp_isStream) {
                    e.stopPropagation();
                    return false;
                }
                if (simp_audio.readyState == 4) {
                    simp_audio.currentTime = simp_progress.value * simp_audio.duration / 100;
                    simp_audio.addEventListener('timeupdate', simp_initTime);
                    if (simp_isPlaying) simp_audio.play();
                }
            });
        }

        function simp_loadAudio(elem) {
            simp_progress.parentNode.classList.add('simp-loading');
            simp_controls.querySelector('.simp-plause').disabled = true;
            simp_audio.querySelector('source').src = elem.dataset.src;
            simp_audio.load();

            simp_audio.volume = parseFloat(simp_v_num / 100); //based on valume input value
            simp_audio.addEventListener('canplaythrough', simp_initAudio); //play audio without stop for buffering

            // if audio fails to load, only IE/Edge 9.0 or above
            simp_audio.addEventListener('error', function () {
                alert('Please reload the page.');
            });
        }

        function simp_setAlbum(index) {
            simp_cover.innerHTML = simp_a_url[index].dataset.cover ? '<div style="background:url(' + simp_a_url[index].dataset.cover + ') no-repeat;background-size:cover;width:80px;height:80px;"></div>' : '<i class="fa fa-music fa-5x"></i>';
            simp_title.innerHTML = simp_source[index].querySelector('.simp-source').innerHTML;
            simp_artist.innerHTML = simp_source[index].querySelector('.simp-desc') ? simp_source[index].querySelector('.simp-desc').innerHTML : '';
        }

        function simp_changeAudio(elem) {
            simp_isLoaded = false;
            simp_controls.querySelector('.simp-prev').disabled = simp_a_index == 0 ? true : false;
            simp_controls.querySelector('.simp-plause').disabled = simp_auto_load ? true : false;
            simp_controls.querySelector('.simp-next').disabled = simp_a_index == simp_a_url.length - 1 ? true : false;
            simp_progress.parentNode.classList.add('simp-load');
            simp_progress.disabled = true;
            simp_progress.value = 0;
            simp_controls.querySelector('.start-time').innerHTML = '00:00';
            simp_controls.querySelector('.end-time').innerHTML = '00:00';
            elem = simp_isRandom && simp_isNext ? simp_a_url[getRandom(0, simp_a_url.length - 1)] : elem;

            // playlist, audio is running
            for (var i = 0; i < simp_a_url.length; i++) {
                simp_a_url[i].parentNode.classList.remove('simp-active');
                if (simp_a_url[i] == elem) {
                    simp_a_index = i;
                    simp_a_url[i].parentNode.classList.add('simp-active');
                }
            }

            // scrolling to element inside element
            var simp_active = getRelativePos(simp_source[simp_a_index]);
            simp_source[simp_a_index].parentNode.scrollTop = simp_active.top;

            if (simp_auto_load || simp_isPlaying) simp_loadAudio(elem);

            if (simp_isPlaying) {
                simp_controls.querySelector('.simp-plause').classList.remove('fa-play');
                simp_controls.querySelector('.simp-plause').classList.add('fa-pause');
            }
        }

        function simp_startScript() {
            ap_simp = document.querySelector('#simp');
            simp_audio = ap_simp.querySelector('#audio');
            simp_album = ap_simp.querySelector('.simp-album');
            simp_cover = simp_album.querySelector('.simp-cover');
            simp_title = simp_album.querySelector('.simp-title');
            simp_artist = simp_album.querySelector('.simp-artist');
            simp_controls = ap_simp.querySelector('.simp-controls');
            simp_progress = simp_controls.querySelector('.simp-progress');
            simp_volume = simp_controls.querySelector('.simp-volume');
            simp_v_slider = simp_volume.querySelector('.simp-v-slider');
            simp_v_num = simp_v_slider.value; //default volume
            simp_others = simp_controls.querySelector('.simp-others');
            simp_auto_load = simp_config.auto_load; //auto load audio file

            if (simp_config.shide_top) simp_album.parentNode.classList.toggle('simp-hide');
            if (simp_config.shide_btm) {
                simp_playlist.classList.add('simp-display');
                simp_playlist.classList.toggle('simp-hide');
            }

            if (simp_a_url.length <= 1) {
                simp_controls.querySelector('.simp-prev').style.display = 'none';
                simp_controls.querySelector('.simp-next').style.display = 'none';
                simp_others.querySelector('.simp-plext').style.display = 'none';
                simp_others.querySelector('.simp-random').style.display = 'none';
            }

            // Playlist listeners
            simp_source.forEach(function (item, index) {
                if (item.classList.contains('simp-active')) simp_a_index = index; //playlist contains '.simp-active'
                item.addEventListener('click', function () {
                    simp_audio.removeEventListener('timeupdate', simp_initTime);
                    simp_a_index = index;
                    simp_changeAudio(this.querySelector('.simp-source'));
                    simp_setAlbum(simp_a_index);
                });
            });

            // FIRST AUDIO LOAD =======
            simp_changeAudio(simp_a_url[simp_a_index]);
            simp_setAlbum(simp_a_index);
            // FIRST AUDIO LOAD =======

            // Controls listeners
            simp_controls.querySelector('.simp-plauseward').addEventListener('click', function (e) {
                var eles = e.target.classList;
                if (eles.contains('simp-plause')) {
                    if (simp_audio.paused) {
                        if (!simp_isLoaded) simp_loadAudio(simp_a_url[simp_a_index]);
                        simp_audio.play();
                        simp_isPlaying = true;
                        eles.remove('fa-play');
                        eles.add('fa-pause');
                    } else {
                        simp_audio.pause();
                        simp_isPlaying = false;
                        eles.remove('fa-pause');
                        eles.add('fa-play');
                    }
                } else {
                    if (eles.contains('simp-prev') && simp_a_index != 0) {
                        simp_a_index = simp_a_index - 1;
                        e.target.disabled = simp_a_index == 0 ? true : false;
                    } else if (eles.contains('simp-next') && simp_a_index != simp_a_url.length - 1) {
                        simp_a_index = simp_a_index + 1;
                        e.target.disabled = simp_a_index == simp_a_url.length - 1 ? true : false;
                    }
                    simp_audio.removeEventListener('timeupdate', simp_initTime);
                    simp_changeAudio(simp_a_url[simp_a_index]);
                    simp_setAlbum(simp_a_index);
                }
            });

            // Audio volume
            simp_volume.addEventListener('click', function (e) {
                var eles = e.target.classList;
                if (eles.contains('simp-mute')) {
                    if (eles.contains('fa-volume-up')) {
                        eles.remove('fa-volume-up');
                        eles.add('fa-volume-off');
                        simp_v_slider.value = 0;
                    } else {
                        eles.remove('fa-volume-off');
                        eles.add('fa-volume-up');
                        simp_v_slider.value = simp_v_num;
                    }
                } else {
                    simp_v_num = simp_v_slider.value;
                    if (simp_v_num != 0) {
                        simp_controls.querySelector('.simp-mute').classList.remove('fa-volume-off');
                        simp_controls.querySelector('.simp-mute').classList.add('fa-volume-up');
                    }
                }
                simp_audio.volume = parseFloat(simp_v_slider.value / 100);
            });

            // Others
            simp_others.addEventListener('click', function (e) {
                var eles = e.target.classList;
                if (eles.contains('simp-plext')) {
                    simp_isNext = simp_isNext && !simp_isRandom ? false : true;
                    if (!simp_isRandom) simp_isRanext = simp_isRanext ? false : true;
                    eles.contains('simp-active') && !simp_isRandom ? eles.remove('simp-active') : eles.add('simp-active');
                } else if (eles.contains('simp-random')) {
                    simp_isRandom = simp_isRandom ? false : true;
                    if (simp_isNext && !simp_isRanext) {
                        simp_isNext = false;
                        simp_others.querySelector('.simp-plext').classList.remove('simp-active');
                    } else {
                        simp_isNext = true;
                        simp_others.querySelector('.simp-plext').classList.add('simp-active');
                    }
                    eles.contains('simp-active') ? eles.remove('simp-active') : eles.add('simp-active');
                } else if (eles.contains('simp-shide-top')) {
                    simp_album.parentNode.classList.toggle('simp-hide');
                } else if (eles.contains('simp-shide-bottom')) {
                    simp_playlist.classList.add('simp-display');
                    simp_playlist.classList.toggle('simp-hide');
                }
            });
        }

        // Start simple player
        if (document.querySelector('#simp')) {
            var simp_auto_load, simp_audio, simp_album, simp_cover, simp_title, simp_artist, simp_controls, simp_progress, simp_volume, simp_v_slider, simp_v_num, simp_others;
            var ap_simp = document.querySelector('#simp');
            var simp_playlist = ap_simp.querySelector('.simp-playlist');
            var simp_source = simp_playlist.querySelectorAll('li');
            var simp_a_url = simp_playlist.querySelectorAll('[data-src]');
            var simp_a_index = 0;
            var simp_isPlaying = false;
            var simp_isNext = true; //auto play
            var simp_isRandom = false; //play random
            var simp_isRanext = false; //check if before random starts, simp_isNext value is true
            var simp_isStream = false; //radio streaming
            var simp_isLoaded = false; //audio file has loaded
            var simp_config = ap_simp.dataset.config ? JSON.parse(ap_simp.dataset.config) : {
                shide_top: false, //show/hide album
                shide_btm: false, //show/hide playlist
                auto_load: false //auto load audio file
            };

            var simp_elem = '';
            simp_elem += '<audio id="audio" preload><source src="" type="audio/mpeg"></audio>';
            simp_elem += '<div class="simp-display"><div class="simp-album w-full flex-wrap"><div class="simp-cover"><i class="fa fa-music fa-5x"></i></div><div class="simp-info"><div class="simp-title">Title</div><div class="simp-artist">Artist</div></div></div></div>';
            simp_elem += '<div class="simp-controls flex-wrap flex-align">';
            simp_elem += '<div class="simp-plauseward flex flex-align"><button type="button" class="simp-prev fa fa-backward" disabled></button><button type="button" class="simp-plause fa fa-play" disabled></button><button type="button" class="simp-next fa fa-forward" disabled></button></div>';
            simp_elem += '<div class="simp-tracker simp-load"><input class="simp-progress" type="range" min="0" max="100" value="0" disabled /><div class="simp-buffer"></div></div>';
            simp_elem += '<div class="simp-time flex flex-align"><span class="start-time">00:00</span><span class="simp-slash">&#160;/&#160;</span><span class="end-time">00:00</span></div>';
            simp_elem += '<div class="simp-volume flex flex-align"><button type="button" class="simp-mute fa fa-volume-up"></button><input class="simp-v-slider" type="range" min="0" max="100" value="100" /></div>';
            simp_elem += '<div class="simp-others flex flex-align"><button type="button" class="simp-plext simp-active fa fa-play-circle" title="Auto Next"></button><button type="button" class="simp-random fa fa-random" title="Random"></button><div class="simp-shide"><button type="button" class="simp-shide-top fa fa-caret-up" title="Show/Hide Album"></button><button type="button" class="simp-shide-bottom fa fa-caret-down" title="Show/Hide Playlist"></button></div></div>';
            simp_elem += '</div>'; //simp-controls

            var simp_player = document.createElement('div');
            simp_player.classList.add('simp-player');
            simp_player.innerHTML = simp_elem;
            ap_simp.insertBefore(simp_player, simp_playlist);
            simp_startScript();

        }
    </script>
</body>
</html>