미니 이퀄 플레이어 > 그누보드5 팁자료실

버그신고

그누보드5 팁자료실

미니 이퀄 플레이어 정보

미니 이퀄 플레이어

첨부파일

number.zip (3.2K) 8회 다운로드 2021-09-14 20:21:20

본문

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

댓글 12개


소스 가장 하단에... 아래처럼 해 주면 됩니다만...

<script>eqMode()</script>

문제는 크롬이나 모바일에서 자동재생 자체를 지원해 주지 않는다는 것이 장애물이지요.ㅜㅠ
전체 1,973 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT