test > BASIC_ORIGINAL

<script>
mediaList_1 = ["https://blog.kakaocdn.net/dn/BHP32/btrcHD0bM3V/4jjMou5AV4PHq9N81H2tR1/tfile.mp3", "01. Clementine - Angel"];
mediaList_2 = ["https://blog.kakaocdn.net/dn/bU6BBL/btrcFU2GVvT/tiBDDM6CDYECOxc9kTVe21/tfile.mp3", "02. Clementine - Continent Bleu"];
mediaList_3 = ["https://blog.kakaocdn.net/dn/sbWIN/btrcMF31FvT/tRH9GPZbZp5ew1P0jT6QDk/tfile.mp3", "03. Clementine - Kokomo"];
mediaList_4 = ["https://blog.kakaocdn.net/dn/Qj3Fg/btrcFWlW3lw/0QTxRBYqsyzISDORFFQUk0/tfile.mp3", "04. Clementine - Seasons In The Sun"];
mediaList_5 = ["https://blog.kakaocdn.net/dn/bZUv6i/btrcMZ8ZU1G/KrQBt8AM7RvBhcTmc4J240/tfile.mp3", "05. Clementine - So Nice"];
mediaList_6 = ["https://blog.kakaocdn.net/dn/pQTpc/btrcEvWpIPM/JTQD2oRhky4zyck59uYT40/tfile.mp3", "06. Clementine - Une Fille Comme Ci"];
backImage = "https://blog.kakaocdn.net/dn/bLn9dq/btrZqG2SBmK/ZEh8akHnttCh5YXgLrOhRK/img.jpg"; // 배경이미지
hwRatio = 540/1024; // 배경이미지 세로/가로
mediaGap = "2px"; // 간격
playerRandom = 0; // 0은 첫곡랜덤, 1은 1번곡부터, 4는 4번곡부터
playerWidth = "50%"; // 플레이어 크기
playerTop = "0%"; // 플레이어 상단 포지션 (0%:중앙)
playerLeft = "0%"; // 플레이어 좌단 포지션 (0%:중앙)
playerAlpha = 0.5; // 플레이어 투명도 (0~1)
headImage = "https://blog.kakaocdn.net/dn/bG39Hh/btrZo8ZA1zr/Mhqxca9HkwAnPfJGBz8NLk/img.jpg"; // 상단스킨 미적용시 주석처리;
//footImage = ""; // 하단스킨 미적용시 주석처리;
</script>
<style>
@font-face { font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); }
#mediaDiv, #mediaDiv * { font-family:'NEXON Lv1 Gothic OTF' !important; }
#mediaDiv { max-width:1024px; margin:0 auto; }
#titleTable { height:54px; color:#000000; padding:12px; background-color:#f7d7e4; border:1px solid #cccccc; }
#listTable { color:#000000; width:100%; background-color:#cccccc; }
#playerDiv { display:flex; justify-content:center; align-items:center; background-size:contain; }
#listTable .list-td { padding:12px; text-align:center; cursor:pointer; }
#mediaDiv td { font-size:16px; }
@media screen and (hover:none) and (pointer:coarse) {
    #titleTable, #listTable .list-td { padding:8px; }
    #mediaDiv td { font-size:14px; }
}
</style>
<script>
for (mediaTotal = 0; this["mediaList_" + (mediaTotal + 1)]; mediaTotal++);
goMode = 1;
function playerMode() {
playerDiv.innerHTML = "<audio id=mediaPlayer style=display:block;width:" + playerWidth + ";margin-top:" + playerTop + ";margin-left:" + playerLeft + ";opacity:" + playerAlpha + " src=" + this['mediaList_' + (arguments[0])][0] + " controls autoplay controlsList=nodownload onended=mediaMode(goMode?'next':'prev')></audio>";
listTitle.innerHTML = this['mediaList_' + (arguments[0])][1];
for (media = 1; media <= mediaTotal; media++) {
if (media == mediaNumber) {
this["listMedia_" + media].style.fontWeight = 'bold';
this["listMedia_" + media].style.backgroundColor = '#d5e6f9'
}
else {
this["listMedia_" + media].style.fontWeight = 'normal';
this["listMedia_" + media].style.backgroundColor = '#f7d7e4';
}
}
}
function mediaMode() {
if (arguments[0] == 'next') playerMode(mediaNumber = mediaNumber == mediaTotal ? 1 : mediaNumber + 1), goMode = 1;
else if (arguments[0] == 'prev') playerMode(mediaNumber = mediaNumber == 1 ? mediaTotal : mediaNumber - 1), goMode = 0;
else playerMode(mediaNumber = arguments[0]);
}
</script>
<div id=mediaDiv>
<div id=headSkin></div>
<table id=titleTable style=width:100% cellpadding=0 cellspacing=0>
<td style=text-align:left;cursor:pointer onclick=mediaMode('prev') onmouseover=style.color='#c00000' onmouseout=style.color='#000000'>◀◀</td>
<td id=listTitle style=font-weight:bold;text-align:center></td>
<td style=text-align:right;cursor:pointer onclick=mediaMode('next') onmouseover=style.color='#c00000' onmouseout=style.color='#000000'>▶▶</td>
</table>
<div id=playerDiv oncontextmenu='return false' onselectstart='return false' ondragstart='return false'></div>
<table id=listTable cellpadding=0 cellspacing=1>
<script>
for (media = 1; media <= mediaTotal; media++) {
document.write("<tr><td id=listMedia_" + media + " class=list-td></td></tr>");
this["listMedia_" + media].listNumber = media;
this["listMedia_" + media].onclick = function() { mediaMode(this.listNumber); }
this['listMedia_' + media].onmouseover = function() { this.style.color = '#c00000'; }
this['listMedia_' + media].onmouseout = function() { this.style.color = '#000000'; }
}
</script>
</table>
<div id=footSkin></div>
</div>
<script>
for (media = 1; media <= mediaTotal; media++) this["listMedia_" + media].innerHTML = this['mediaList_' + media][1];
titleTable.style.marginBottom = listTable.style.marginTop = playerDiv.style.marginTop = mediaGap;
playerDiv.style.backgroundImage = "url(" + backImage + ")";
    if (typeof headImage !== "undefined") headSkin.innerHTML = "<img src=" + headImage + " style=width:100%;display:block;margin-bottom:" + mediaGap + ">";
    if (typeof footImage !== "undefined") footSkin.innerHTML = "<img src=" + footImage + " style=width:100%;display:block;margin-top:" + mediaGap + ">";
this["listMedia_" + (playerRandom == 0 ? Math.floor(Math.random() * mediaTotal + 1) : playerRandom)].onclick();
addEventListener("resize", listPlayerSize = function() {
    playerDiv.style.width = "100%";
    playerDiv.style.height = playerDiv.offsetWidth * hwRatio + "px";
} );
listPlayerSize();
</script>