미니 이퀄 플레이어 정보
미니 이퀄 플레이어
관련링크
첨부파일
본문
1. 이 플레이어는 자체버튼입니다.
2. 이퀄 부분은 canvas 로 타이머부분은 png 이미지로 만들었습니다.
3. 그래서 png 이미지 부분은 압축파일을 풀어서 본인의 홈페이지에 업로드 후 그 디렉토리 이름을 적어주어야 합니다.
4. 플레이어의 크기는 가로 79픽셀, 세로 28픽셀입니다.
기본형
<script>
mp3Url = "https://blog.kakaocdn.net/dn/Qj3Fg/btrcFWlW3lw/0QTxRBYqsyzISDORFFQUk0/tfile.mp3"; // mp3주소
topUrl = "/main/wittazzurri/number/"; // 이미지디렉토리
eqColor = "#ff0000"; // 이퀄라이저색상
timerColor = "#0000ff"; // 타이머색상
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=eqDiv onmousedown=eqMode() style=width:79px;height:28px;cursor:pointer><script>eqHtml()</script></div>
--------------------
응용형
<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>
-------------------
응용형의 포지션은 대충 맞추었는데 pc 와 모바일 모두를 감안해서 재주껏 정교하게 맞추어 주세요.
추천
8
8
댓글 17개
앙증맛고 이뻐요~^^
오토플레이되려면 어떻게 해야 할까요?
오토플레이되려면 어떻게 해야 할까요?
@rainbi
소스 가장 하단에... 아래처럼 해 주면 됩니다만...
문제는 크롬이나 모바일에서 자동재생 자체를 지원해 주지 않는다는 것이 장애물이지요.ㅜㅠ
소스 가장 하단에... 아래처럼 해 주면 됩니다만...
<script>eqMode()</script>
문제는 크롬이나 모바일에서 자동재생 자체를 지원해 주지 않는다는 것이 장애물이지요.ㅜㅠ
좋은 정보 감사합니다! 잘 활용해 보겠습니다.
@풀먹는여우 예 감사합니다
일단, 스크랩 했습니다. 너무 이쁩니다~ ^^
@아이스웨덴™ 칭찬 감사합니다
감사합니다. 아주 좋습니다.
@들레아빠 칭찬 감사합니다
멋집니다
@man7777 감사합니다
감사합니다
@로로리로 감사합니다
감사합니다
@용설 감사합니다
깜찍하고 좋습니다. 고맙습니다.
응용형을 tail.php의 외부로그인 아래에 넣오보았습니다.
응용형을 mymusic.php로 새로 저장하고 그 파일을 tail.php에서 다음처럼 불러왔습니다
<div id="aside">
<?php echo outlogin(); // 외부 로그인, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
<?php// echo poll(); // 설문조사, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
<div id="kims" style="width:235px;padding-left:0px;">
<?php include_once("zz/mymusic.php");
?></div>
</div>
잘한 방법인지는 모르겠지만 배경이미지로 가로세로 450px을 사용해서 스크립트에서 450으로 정했습니다.
<script>
onresize = function() {
backDiv.style.height = backDiv.offsetWidth * 450 / 450 + "px";
}
onresize();
</script>
@김철용 가로 세로를 픽셀값으로 주었으면 onresize 옵션은 필요없습니다.
저건 가로 세로를 퍼센트로 주었을 때 모바일을 세로모드로 보다가 가로모드로 바꾸었을 때, 또는 그 반대일 때 반응형을 만들려고 준 것입니다.
저건 가로 세로를 퍼센트로 주었을 때 모바일을 세로모드로 보다가 가로모드로 바꾸었을 때, 또는 그 반대일 때 반응형을 만들려고 준 것입니다.
