mp3 리스트 플레이어 기본형 - 상단 스킨 > 팁

<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/dKf6IB/btrcMFpjBxH/ndzkZBQYge3BfmSokB9Kmk/img.jpg"; // 배경이미지
hwRatio = 400/960; // 배경이미지 세로/가로
mediaGap = "2px"; // 간격
playerRandom = 0; // 0은 첫곡랜덤, 1은 1번곡부터, 4는 4번곡부터
playerWidth = "40%"; // 플레이어 크기
playerTop = "10%"; // 플레이어 상단 포지션 (0%:중앙)
playerLeft = "40%"; // 플레이어 좌단 포지션 (0%:중앙)
playerAlpha = 0.5; // 플레이어 투명도 (0~1)
headImage = "https://blog.kakaocdn.net/dn/yA9Vr/btrcMHm4Qqu/DU1ztCfOhhTonZvKaNkwmK/img.jpg"; // 상단스킨 미적용시 - headImage = "";
footImage = ""; // 하단스킨 미적용시 - footImage = "";
</script>
<style>
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
#titleTable { color:#000000; font-family:'Nanum Barun Gothic'; padding:12px; background-color:#f7d7e4; border:1px solid #cccccc; }
#listTable { color:#000000; font-family:'Nanum Barun Gothic'; width:100%; background-color:#cccccc; }
.listTd { padding:12px; text-align:center; cursor:pointer; }
#playerDiv { width:100%; display:flex; justify-content:center; align-items:center; background-size:contain; }
</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 = "<strong>" + this['mediaList_' + (arguments[0])][1] + "</strong>";
for (media = 1; media <= mediaTotal; media++) {
if (media == mediaNumber) {
this["listMedia_" + media].innerHTML = "<strong>" + this['mediaList_' + media][1] + "</strong>";
this["listMedia_" + media].style.backgroundColor = '#d5e6f9'
}
else {
this["listMedia_" + media].innerHTML = this['mediaList_' + media][1];
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=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=listTd></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'; }
}
titleTable.style.fontSize = listTable.style.fontSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? '13px' : '16px';
</script>
</table>
<div id=footSkin></div>
</div>
<script>
onresize = function() { playerDiv.style.height = playerDiv.offsetWidth * hwRatio + "px"; }
titleTable.style.marginBottom = listTable.style.marginTop = playerDiv.style.marginTop = mediaGap;
playerDiv.style.backgroundImage = "url(" + backImage + ")";
headSkin.innerHTML = "<img src=" + headImage + " style=width:100%;display:block;margin-bottom:" + mediaGap + " onerror=headSkin.innerHTML=''>";
footSkin.innerHTML = "<img src=" + footImage + " style=width:100%;display:block;margin-top:" + mediaGap + " onerror=footSkin.innerHTML=''>";
this["listMedia_" + (playerRandom == 0 ? Math.floor(Math.random() * mediaTotal + 1) : playerRandom)].onclick();
onresize();
</script>