미니 이퀄 플레이어 - 응용형 > 팁

• 목록

<script>
mp3Url = "https://blog.kakaocdn.net/dn/Qj3Fg/btrcFWlW3lw/0QTxRBYqsyzISDORFFQUk0/tfile.mp3";
topUrl = "/main/wittazzurri/number/";
eqColor = "#ffffff";
timerColor = "#ffffff";
eqYes = "start";
function eqHtml() {
document.write("<audio id=eqPlayer src=" + mp3Url + " style=display:none loop></audio>");
document.write("<table style=width:79px cellpadding=0 cellspacing=0><td id=tdEq_1></td>");
for (eq2 = 2; eq2 <= 16; eq2++) document.write("<td style=width:1px></td><td id=tdEq_" + eq2 +"></td>");
document.write("</table>");
document.write("<table style=width:79px;margin-top:5px cellpadding=0 cellspacing=0><td align=left><table cellpadding=0 cellspacing=0><td id=current_1 style=display:none></td><td style=width:1px;display:none></td><td id=current_2></td><td style=width:5px;height:8px;background-color:" + timerColor + ";-webkit-mask:url(" + topUrl + "bar.png);mask:url(" + topUrl + "/bar.png)></td><td id=current_3></td><td style=width:1px></td><td id=current_4></td></table></td>");
document.write("<td align=right><table cellpadding=0 cellspacing=0><td id=total_1 style=display:none></td><td style=width:1px;display:none></td><td id=total_2></td><td style=width:5px;height:8px;background-color:" + timerColor + ";-webkit-mask:url(" + topUrl + "/bar.png);mask:url(" + topUrl + "/bar.png)></td><td id=total_3></td><td style=width:1px></td><td id=total_4></td></table></td></table>");
}
function eqDraw(eq) {
this["_" + eq] = this["eq_" + eq].getContext("2d");
this["_" + eq].fillStyle = eqColor;
this["_" + eq].beginPath();
if (this["_eq_" + eq] == 1) { this["_"+eq].moveTo(0,0),this["_"+eq].lineTo(4,0),this["_"+eq].lineTo(4,1),this["_"+eq].lineTo(0,1); this["_"+eq].moveTo(0,2),this["_"+eq].lineTo(4,2),this["_"+eq].lineTo(4,3),this["_"+eq].lineTo(0,3); this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 2) { this["_"+eq].moveTo(0,2),this["_"+eq].lineTo(4,2),this["_"+eq].lineTo(4,3),this["_"+eq].lineTo(0,3); this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 3) { this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 4) { this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 5) { this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 6) { this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 7) { this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
else if (this["_eq_" + eq] == 8) { this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
this["_" + eq].fill();
}
function timerMode() {
currentString = (("0" + Math.floor(eqPlayer.currentTime / 60)).slice(-2) + ("0" + Math.floor(eqPlayer.currentTime % 60)).slice(-2)).split("");
totalString = (("0" + Math.floor(eqPlayer.duration / 60)).slice(-2) + ("0" + Math.floor(eqPlayer.duration % 60)).slice(-2)).split("");
for (time = 1; time <= 4; time++) {
this["current_" + time].innerHTML = "<div style=background-color:" + timerColor + ";width:7px;height:8px;-webkit-mask:url(" + topUrl + currentString[time - 1] + ".png);mask:url(" + topUrl + currentString[time - 1] + ".png)></div>";
this["total_" + time].innerHTML = "<div style=background-color:" + timerColor + ";width:7px;;height:8px;-webkit-mask:url(" + topUrl + totalString[time - 1] + ".png);mask:url(" + topUrl + totalString[time - 1] + ".png)></div>";
}
}
function trackMode() {
for (eq16 = 1; eq16 <= 16; eq16++) {
this["tdEq_" + eq16].innerHTML = "<canvas id=eq_" + eq16 + " style=display:block width=4 height=15></canvas>";
if (eqYes == "start") this["_eq_" + eq16] = 8;
else if (eqYes == "no") this["_eq_" + eq16] = this["_eq_" + eq16] >= 8 ? 8 : this["_eq_" + eq16] + 1;
else this["_eq_" + eq16] = Math.floor(Math.random() * 8 + 1);
eqDraw(eq16);
timerMode();
}
}
setInterval(trackMode, 100);
function eqMode() {
if (eqYes == "yes") eqPlayer.pause(), eqYes = "no";
else eqPlayer.play(), eqYes = "yes";
}
</script>
<div id=backDiv style=width:100%;overflow:hidden;background-image:url(https://blog.kakaocdn.net/dn/kGiA6/btre4HMzfVE/n2bItJXcNtlEu5MCcTy6L1/img.jpg);background-size:contain>
<div id=eqDiv onmousedown=eqMode() style=margin-top:45%;margin-left:10%;width:79px;height:28px;cursor:pointer><script>eqHtml()</script></div>
</div>
<script>
onresize = function() {
backDiv.style.height = backDiv.offsetWidth * 540 / 960 + "px";
}
onresize();
</script>