Tutorial Membuat Pemutar Musik dengan JS dan HTML

Baik pada kesempatan ini zlearn mau berbagi tutorial tentang programing javascript dan HTMl yaitu gimana sih caranya membuat Pemutar Musik menggunakan Javascript dan Html 5. Nah di tutorial zlearn kali ini akan membuat sebuah pemutar musik berabsi HTML dan JS apakah Bisa. Bisa tentunnya ya oke lagsung saja simak tutorial zlearn mengenai  Cara Membuat Pemutar Musik dengan JS dan HTML





Nah langsung saja masuk ke tutorial zlearn membuat pemutar musik dengan js dan html berkut tutorialnya silahkan ikuti dengan seksama dan teliti:

  • Pertama buat sebuah file dengan nama index.html  berikut script htmlnya:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Pemutar Musik Html 5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /* Font Family
================================================== */

@import url("//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

.container { position:relative; margin:0 auto; width:700px; }
.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:556px; }
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
.container { width:300px; }
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:420px; }
}


/* CSS Reset
================================================== */

html,body,div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

body { line-height:1; }
ul { list-style:none; }


/* Basic Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#111;
color:#C8C7C8;
font:20px/24px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
padding:5px 0;
}

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}


/* Typography
================================================== */

h1,h6,p { color:#808080; font-weight:200; }
h1 { font-size:42px; line-height:44px; margin:20px 0 0; }
h6 { font-size:18px; line-height:20px; margin:4px 0 20px; }
p { font-size:18px; line-height:20px; margin:0 0 2px; }


/* Links
================================================== */

a,a:visited { color:#ddd; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbb; }
p a,p a:visited { line-height:inherit; }


/* Misc.
================================================== */

.add-bottom { margin-bottom:20px !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }


/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { margin:0 15px 0 14px; width:670px; }
#mainwrap { box-shadow:0 0 6px 1px rgba(0,0,0,.25); }
#audiowrap { background-color:#231F20; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color:#231F20; cursor:pointer; display:block; margin:0; padding:21px 0; }
#plList li:hover { background-color:#262223; }
.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:#262223!important; cursor:default!important; }
a[id^="btn"] { background-color:#231F20; color:#C8C7C8; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#262223; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { margin-left:9px; outline:none; width:680px; }
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#080808!important; }

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { margin-left:6px; width:687px; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#080808!important; }

/* IE 11 */
html[data-useragent*="rv:11.0"] audio { margin-left:2px; width:695px; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#080808!important; }

/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="Apple"] #plList li { background-color:#000; }
html[data-useragent*="Apple"] #plList li:hover { background-color:#080808; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#080808!important; }

/* IOS 7 */
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio { margin-left:3px; width:690px; }
html[data-useragent*="OS 7"] #audiowrap { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:#e6e6e6; color:#373837; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 7"] #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }

/* IOS 8 */
html[data-useragent*="OS 8"] body { color:#373837; }
html[data-useragent*="OS 8"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 8"] #audiowrap { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] a[id^="btn"] { background-color:#e4e4e4; color:#373837; }
html[data-useragent*="OS 8"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 8"] #plList li { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { background-color:#eee!important; }

/* IOS 9 */
html[data-useragent*="OS 9"] body { color:#373837; }
html[data-useragent*="OS 9"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 9"] #audiowrap { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] a[id^="btn"] { background-color:#d5d5d5; color:#373837; }
html[data-useragent*="OS 9"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 9"] #plList li { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { background-color:#eee!important; }

/* Chrome */
html[data-useragent*="Chrome"] body { color:#5a5a5a; }
html[data-useragent*="Chrome"] audio { margin-left:9px; width:677px; }
html[data-useragent*="Chrome"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#eee!important; }

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:689px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }


/* Audio Player Media Queries
================================================== */

/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:526px; }
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
html[data-useragent*="rv:11.0"] audio { width:551px; }
html[data-useragent*="OS 7"] audio { width:546px; }
html[data-useragent*="OS 8"] audio { width:550px; }
html[data-useragent*="OS 9"] audio { width:550px; }
html[data-useragent*="Chrome"] audio { width:533px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:545px; }
}

/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:390px; }
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
html[data-useragent*="rv:11.0"] audio { width:415px; }
html[data-useragent*="OS 7"] audio { width:410px; }
html[data-useragent*="OS 8"] audio { width:414px; }
html[data-useragent*="OS 9"] audio { width:414px; }
html[data-useragent*="Chrome"] audio { width:397px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }
#npTitle { width:245px; }
}

/* Mobile Portrait */
@media only screen and (max-width: 479px) {
audio { width:270px; }
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
html[data-useragent*="rv:11.0"] audio { width:295px; }
html[data-useragent*="OS 7"] audio { width:290px; }
html[data-useragent*="OS 8"] audio { width:294px; }
html[data-useragent*="OS 9"] audio { width:294px; }
html[data-useragent*="Chrome"] audio { width:277px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
#npTitle { width:167px; }
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="column center">
        <h1>HTML5 Audio Player</h1>
        <h6>w/ responsive playlist</h6>
    </div>
    <div class="column add-bottom">
        <div id="mainwrap">
            <div id="nowPlay">
                <span class="left" id="npAction">Paused...</span>
                <span class="right" id="npTitle"></span>
            </div>
            <div id="audiowrap">
                <div id="audio0">
                    <audio preload id="audio1" controls="controls">Your browser does not support HTML5 Audio!</audio>
                </div>
                <div id="tracks">
                    <a id="btnPrev">&laquo;</a>
                    <a id="btnNext">&raquo;</a>
                </div>
            </div>
            <div id="plwrap">
                <ul id="plList"></ul>
            </div>
        </div>
    </div>
    <div class="column add-bottom center">
        <p>Created by <a href="http://www.markhillard.com/">mh</a>. Music by <a href="http://www.mythium.net/">Mythium</a>.</p>
        <p>Download: <a href="https://archive.org/download/mythium/mythium_vbr_mp3.zip">zip</a> / <a href="https://archive.org/download/mythium/mythium_archive.torrent">torrent</a></p>
    </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='http://api.html5media.info/1.1.8/html5media.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>


  • Baik setelah itu buat sebuah folder dengan nama js  dan   buat sebuah file dengan nama index.js  berikut scriptnya:
// html5media enables <video> and <audio> tags in all major browsers
// External File: https://api.html5media.info/1.1.8/html5media.min.js


// Add user agent as an attribute on the <html> tag...
// Inspiration: https://css-tricks.com/ie-10-specific-styles/
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform);


// HTML5 audio player + playlist controls...
// Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio
// Mythium Archive: https://archive.org/details/mythium/
jQuery(function ($) {
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {
        var index = 0,
            playing = false,
            mediaPath = 'https://archive.org/download/mythium/',
            extension = '',
            tracks = [{
                "track": 1,
                "name": "All This Is - Joe L.'s Studio",
                "length": "2:46",
                "file": "JLS_ATI"
            }, {
                "track": 2,
                "name": "The Forsaken - Broadwing Studio (Final Mix)",
                "length": "8:31",
                "file": "BS_TF"
            }, {
                "track": 3,
                "name": "All The King's Men - Broadwing Studio (Final Mix)",
                "length": "5:02",
                "file": "BS_ATKM"
            }, {
                "track": 4,
                "name": "The Forsaken - Broadwing Studio (First Mix)",
                "length": "8:32",
                "file": "BSFM_TF"
            }, {
                "track": 5,
                "name": "All The King's Men - Broadwing Studio (First Mix)",
                "length": "5:05",
                "file": "BSFM_ATKM"
            }, {
                "track": 6,
                "name": "All This Is - Alternate Cuts",
                "length": "2:49",
                "file": "AC_ATI"
            }, {
                "track": 7,
                "name": "All The King's Men (Take 1) - Alternate Cuts",
                "length": "5:45",
                "file": "AC_ATKMTake_1"
            }, {
                "track": 8,
                "name": "All The King's Men (Take 2) - Alternate Cuts",
                "length": "5:27",
                "file": "AC_ATKMTake_2"
            }, {
                "track": 9,
                "name": "Magus - Alternate Cuts",
                "length": "5:46",
                "file": "AC_M"
            }, {
                "track": 10,
                "name": "The State Of Wearing Address (fucked up) - Alternate Cuts",
                "length": "5:25",
                "file": "AC_TSOWAfucked_up"
            }, {
                "track": 11,
                "name": "Magus - Popeye's (New Years '04 - '05)",
                "length": "5:54",
                "file": "PNY04-05_M"
            }, {
                "track": 12,
                "name": "On The Waterfront - Popeye's (New Years '04 - '05)",
                "length": "4:41",
                "file": "PNY04-05_OTW"
            }, {
                "track": 13,
                "name": "Trance - Popeye's (New Years '04 - '05)",
                "length": "13:17",
                "file": "PNY04-05_T"
            }, {
                "track": 14,
                "name": "The Forsaken - Popeye's (New Years '04 - '05)",
                "length": "8:13",
                "file": "PNY04-05_TF"
            }, {
                "track": 15,
                "name": "The State Of Wearing Address - Popeye's (New Years '04 - '05)",
                "length": "7:03",
                "file": "PNY04-05_TSOWA"
            }, {
                "track": 16,
                "name": "Magus - Popeye's (Valentine's Day '05)",
                "length": "5:44",
                "file": "PVD_M"
            }, {
                "track": 17,
                "name": "Trance - Popeye's (Valentine's Day '05)",
                "length": "10:47",
                "file": "PVD_T"
            }, {
                "track": 18,
                "name": "The State Of Wearing Address - Popeye's (Valentine's Day '05)",
                "length": "5:37",
                "file": "PVD_TSOWA"
            }, {
                "track": 19,
                "name": "All This Is - Smith St. Basement (01/08/04)",
                "length": "2:49",
                "file": "SSB01_08_04_ATI"
            }, {
                "track": 20,
                "name": "Magus - Smith St. Basement (01/08/04)",
                "length": "5:46",
                "file": "SSB01_08_04_M"
            }, {
                "track": 21,
                "name": "Beneath The Painted Eye - Smith St. Basement (06/06/03)",
                "length": "13:08",
                "file": "SSB06_06_03_BTPE"
            }, {
                "track": 22,
                "name": "Innocence - Smith St. Basement (06/06/03)",
                "length": "5:16",
                "file": "SSB06_06_03_I"
            }, {
                "track": 23,
                "name": "Magus - Smith St. Basement (06/06/03)",
                "length": "5:47",
                "file": "SSB06_06_03_M"
            }, {
                "track": 24,
                "name": "Madness Explored - Smith St. Basement (06/06/03)",
                "length": "4:52",
                "file": "SSB06_06_03_ME"
            }, {
                "track": 25,
                "name": "The Forsaken - Smith St. Basement (06/06/03)",
                "length": "8:44",
                "file": "SSB06_06_03_TF"
            }, {
                "track": 26,
                "name": "All This Is - Smith St. Basement (12/28/03)",
                "length": "3:01",
                "file": "SSB12_28_03_ATI"
            }, {
                "track": 27,
                "name": "Magus - Smith St. Basement (12/28/03)",
                "length": "6:10",
                "file": "SSB12_28_03_M"
            }, {
                "track": 28,
                "name": "Madness Explored - Smith St. Basement (12/28/03)",
                "length": "5:06",
                "file": "SSB12_28_03_ME"
            }, {
                "track": 29,
                "name": "Trance - Smith St. Basement (12/28/03)",
                "length": "12:33",
                "file": "SSB12_28_03_T"
            }, {
                "track": 30,
                "name": "The Forsaken - Smith St. Basement (12/28/03)",
                "length": "8:57",
                "file": "SSB12_28_03_TF"
            }, {
                "track": 31,
                "name": "All This Is (Take 1) - Smith St. Basement (Nov. '03)",
                "length": "4:55",
                "file": "SSB___11_03_ATITake_1"
            }, {
                "track": 32,
                "name": "All This Is (Take 2) - Smith St. Basement (Nov. '03)",
                "length": "5:46",
                "file": "SSB___11_03_ATITake_2"
            }, {
                "track": 33,
                "name": "Beneath The Painted Eye (Take 1) - Smith St. Basement (Nov. '03)",
                "length": "14:06",
                "file": "SSB___11_03_BTPETake_1"
            }, {
                "track": 34,
                "name": "Beneath The Painted Eye (Take 2) - Smith St. Basement (Nov. '03)",
                "length": "13:26",
                "file": "SSB___11_03_BTPETake_2"
            }, {
                "track": 35,
                "name": "The Forsaken (Take 1) - Smith St. Basement (Nov. '03)",
                "length": "8:38",
                "file": "SSB___11_03_TFTake_1"
            }, {
                "track": 36,
                "name": "The Forsaken (Take 2) - Smith St. Basement (Nov. '03)",
                "length": "8:37",
                "file": "SSB___11_03_TFTake_2"
            }],
            buildPlaylist = $.each(tracks, function(key, value) {
                var trackNumber = value.track,
                    trackName = value.name,
                    trackLength = value.length;
                if (trackNumber.toString().length === 1) {
                    trackNumber = '0' + trackNumber;
                } else {
                    trackNumber = '' + trackNumber;
                }
                $('#plList').append('<li><div class="plItem"><div class="plNum">' + trackNumber + '.</div><div class="plTitle">' + trackName + '</div><div class="plLength">' + trackLength + '</div></div></li>');
            }),
            trackCount = tracks.length,
            npAction = $('#npAction'),
            npTitle = $('#npTitle'),
            audio = $('#audio1').bind('play', function () {
                playing = true;
                npAction.text('Now Playing...');
            }).bind('pause', function () {
                playing = false;
                npAction.text('Paused...');
            }).bind('ended', function () {
                npAction.text('Paused...');
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audio.play();
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
            btnPrev = $('#btnPrev').click(function () {
                if ((index - 1) > -1) {
                    index--;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            btnNext = $('#btnNext').click(function () {
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            li = $('#plList li').click(function () {
                var id = parseInt($(this).index());
                if (id !== index) {
                    playTrack(id);
                }
            }),
            loadTrack = function (id) {
                $('.plSel').removeClass('plSel');
                $('#plList li:eq(' + id + ')').addClass('plSel');
                npTitle.text(tracks[id].name);
                index = id;
                audio.src = mediaPath + tracks[id].file + extension;
            },
            playTrack = function (id) {
                loadTrack(id);
                audio.play();
            };
        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
        loadTrack(index);
    }
});

  • Dan yang terakhir buat sebuah file dengan nama style.css di folder css
/* Font Family
================================================== */

@import url("//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400");


/* Desktop
================================================== */

.container { position:relative; margin:0 auto; width:700px; }
.column { width:inherit; }


/* Tablet (Portrait)
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { width:556px; }
}


/* Mobile (Portrait)
================================================== */

@media only screen and (max-width: 767px) {
.container { width:300px; }
}


/* Mobile (Landscape)
================================================== */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width:420px; }
}


/* CSS Reset
================================================== */

html,body,div,span,h1,h6,p,a,ul,li,audio {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

body { line-height:1; }
ul { list-style:none; }


/* Basic Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
background-color:#111;
color:#C8C7C8;
font:20px/24px "Yanone Kaffeesatz", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
padding:5px 0;
}

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
}


/* Typography
================================================== */

h1,h6,p { color:#808080; font-weight:200; }
h1 { font-size:42px; line-height:44px; margin:20px 0 0; }
h6 { font-size:18px; line-height:20px; margin:4px 0 20px; }
p { font-size:18px; line-height:20px; margin:0 0 2px; }


/* Links
================================================== */

a,a:visited { color:#ddd; outline:0; text-decoration:underline; }
a:hover,a:focus { color:#bbb; }
p a,p a:visited { line-height:inherit; }


/* Misc.
================================================== */

.add-bottom { margin-bottom:20px !important; }
.left { float:left; }
.right { float:right; }
.center { text-align:center; }


/* Custom Styles
================================================== */

/* Highlight Styles */
::selection { background-color:#262223; color:#444; }


/* Audio Player Styles
================================================== */

/* Default / Desktop / Firefox */
audio { margin:0 15px 0 14px; width:670px; }
#mainwrap { box-shadow:0 0 6px 1px rgba(0,0,0,.25); }
#audiowrap { background-color:#231F20; margin:0 auto; }
#plwrap { margin:0 auto; }
#tracks { position:relative; text-align:center; }
#nowPlay { display:inline; }
#npTitle { margin:0; padding:21px; text-align:right; }
#npAction { padding:21px; position:absolute; }
#plList { margin:0; }
#plList li { background-color:#231F20; cursor:pointer; display:block; margin:0; padding:21px 0; }
#plList li:hover { background-color:#262223; }
.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:#262223!important; cursor:default!important; }
a[id^="btn"] { background-color:#231F20; color:#C8C7C8; cursor:pointer; display:inline-block; font-size:50px; margin:0; padding:21px 27px; text-decoration:none; }
a[id^="btn"]:last-child { margin-left:-4px; }
a[id^="btn"]:hover,a[id^="btn"]:active { background-color:#262223; }
a[id^="btn"]::-moz-focus-inner { border:0; padding:0; }

/* IE 9 */
html[data-useragent*="MSIE 9.0"] audio { margin-left:9px; outline:none; width:680px; }
html[data-useragent*="MSIE 9.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 9.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 9.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 9.0"] .plSel,
html[data-useragent*="MSIE 9.0"] .plSel:hover { background-color:#080808!important; }

/* IE 10 */
html[data-useragent*="MSIE 10.0"] audio { margin-left:6px; width:687px; }
html[data-useragent*="MSIE 10.0"] #audiowrap { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="MSIE 10.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] #plList li { background-color:#000; }
html[data-useragent*="MSIE 10.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="MSIE 10.0"] .plSel,
html[data-useragent*="MSIE 10.0"] .plSel:hover { background-color:#080808!important; }

/* IE 11 */
html[data-useragent*="rv:11.0"] audio { margin-left:2px; width:695px; }
html[data-useragent*="rv:11.0"] #audiowrap { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="rv:11.0"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] #plList li { background-color:#000; }
html[data-useragent*="rv:11.0"] #plList li:hover { background-color:#080808; }
html[data-useragent*="rv:11.0"] .plSel,
html[data-useragent*="rv:11.0"] .plSel:hover { background-color:#080808!important; }

/* All Apple Products */
html[data-useragent*="Apple"] audio { margin:0; width:100%; }
html[data-useragent*="Apple"] #audiowrap { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"] { background-color:#000; }
html[data-useragent*="Apple"] a[id^="btn"]:hover { background-color:#080808; }
html[data-useragent*="Apple"] #plList li { background-color:#000; }
html[data-useragent*="Apple"] #plList li:hover { background-color:#080808; }
html[data-useragent*="Apple"] .plSel,
html[data-useragent*="Apple"] .plSel:hover { background-color:#080808!important; }

/* IOS 7 */
html[data-useragent*="OS 7"] body { color:#373837; }
html[data-useragent*="OS 7"] audio { margin-left:3px; width:690px; }
html[data-useragent*="OS 7"] #audiowrap { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] a[id^="btn"] { background-color:#e6e6e6; color:#373837; }
html[data-useragent*="OS 7"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 7"] #plList li { background-color:#e6e6e6; }
html[data-useragent*="OS 7"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 7"] .plSel,
html[data-useragent*="OS 7"] .plSel:hover { background-color:#eee!important; }

/* IOS 8 */
html[data-useragent*="OS 8"] body { color:#373837; }
html[data-useragent*="OS 8"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 8"] #audiowrap { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] a[id^="btn"] { background-color:#e4e4e4; color:#373837; }
html[data-useragent*="OS 8"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 8"] #plList li { background-color:#e4e4e4; }
html[data-useragent*="OS 8"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 8"] .plSel,
html[data-useragent*="OS 8"] .plSel:hover { background-color:#eee!important; }

/* IOS 9 */
html[data-useragent*="OS 9"] body { color:#373837; }
html[data-useragent*="OS 9"] audio { margin-left:6px; width:694px; }
html[data-useragent*="OS 9"] #audiowrap { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] a[id^="btn"] { background-color:#d5d5d5; color:#373837; }
html[data-useragent*="OS 9"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="OS 9"] #plList li { background-color:#d5d5d5; }
html[data-useragent*="OS 9"] #plList li:hover { background-color:#eee; }
html[data-useragent*="OS 9"] .plSel,
html[data-useragent*="OS 9"] .plSel:hover { background-color:#eee!important; }

/* Chrome */
html[data-useragent*="Chrome"] body { color:#5a5a5a; }
html[data-useragent*="Chrome"] audio { margin-left:9px; width:677px; }
html[data-useragent*="Chrome"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"] a[id^="btn"] { background-color:#fafafa; color:#5a5a5a; }
html[data-useragent*="Chrome"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"] .plSel,
html[data-useragent*="Chrome"] .plSel:hover { background-color:#eee!important; }

/* Chrome / Android / Tablet */
html[data-useragent*="Chrome"][data-useragent*="Android"] body { color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:689px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #audiowrap { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"] { background-color:#fafafa; color:#373837; }
html[data-useragent*="Chrome"][data-useragent*="Android"] a[id^="btn"]:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li { background-color:#fafafa; }
html[data-useragent*="Chrome"][data-useragent*="Android"] #plList li:hover { background-color:#eee; }
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel,
html[data-useragent*="Chrome"][data-useragent*="Android"] .plSel:hover { background-color:#eee!important; }


/* Audio Player Media Queries
================================================== */

/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {
audio { width:526px; }
html[data-useragent*="MSIE 9.0"] audio { width:536px; }
html[data-useragent*="MSIE 10.0"] audio { width:543px; }
html[data-useragent*="rv:11.0"] audio { width:551px; }
html[data-useragent*="OS 7"] audio { width:546px; }
html[data-useragent*="OS 8"] audio { width:550px; }
html[data-useragent*="OS 9"] audio { width:550px; }
html[data-useragent*="Chrome"] audio { width:533px; }
html[data-useragent*="Chrome"][data-useragent*="Android"] audio { margin-left:4px; width:545px; }
}

/* Mobile Landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {
audio { width:390px; }
html[data-useragent*="MSIE 9.0"] audio { width:400px; }
html[data-useragent*="MSIE 10.0"] audio { width:407px; }
html[data-useragent*="rv:11.0"] audio { width:415px; }
html[data-useragent*="OS 7"] audio { width:410px; }
html[data-useragent*="OS 8"] audio { width:414px; }
html[data-useragent*="OS 9"] audio { width:414px; }
html[data-useragent*="Chrome"] audio { width:397px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:410px; }
#npTitle { width:245px; }
}

/* Mobile Portrait */
@media only screen and (max-width: 479px) {
audio { width:270px; }
html[data-useragent*="MSIE 9.0"] audio { width:280px; }
html[data-useragent*="MSIE 10.0"] audio { width:287px; }
html[data-useragent*="rv:11.0"] audio { width:295px; }
html[data-useragent*="OS 7"] audio { width:290px; }
html[data-useragent*="OS 8"] audio { width:294px; }
html[data-useragent*="OS 9"] audio { width:294px; }
html[data-useragent*="Chrome"] audio { width:277px; }
html[data-useragent*="Chrome"][data-useragent*="Mobile"] audio { margin-left:4px; width:290px; }
#npTitle { width:167px; }
}

  • Note pastikan anda terkoneksi internet saat membuka pemutar mp3 tersebut.
Sekian tutorial dari zlearn semoga dapat bermanfaat dan menginspirasi pengunjung sekalian di artikel  Tutorial Membuat Pemutar Musik dengan JS dan HTML.   semoga dapat bermanfaat silahkan tuliskan koentar anda di kolom komentar zlearn dan silahkan bagikan artikel ini.


Share this

Related Posts

Previous
Next Post »