1. 두번째 링크를 열고 플러그인 프로그램을 다운로드 받아 mp3 사운드의

스펙트럼 정보를 추출하여 txt 파일을 업로드합니다.

----------

2. mp3 사운드는 반드시 CBR 128 44100 으로 맞춰주셔야 해요.

이 조건이 아니면 이퀄 정보가 제대로 빠지지 않습니다.

저는 이미 구식이라 할 수 있는 다음 팟인코더로 음원을 인코딩합니다.

특히 유튜브 음원을 다운로드 받으면 주파수가 44100 이 아니라 48000 으로 내려받기가 되니 주의하세요.

----------

3. 만일 이퀄 막대기가 50개가 필요하면 더히기 5하여 55개로 빼 줍니다.

원칙적으로는 256개의 정보를 담을 수 있습니다만

나중 원형 이퀄을 만든다는 가정하에서라도 최대 180개 정도면 충분합니다.

원형 이퀄 플레이어의 경우 막대기 각도를 2도씩 돌리면 되니까요.

----------

4. 아래코드 부분에 본인이 업로드한 txt 파일의 경로를 넣어줍니다.

<script src=http://media.login365.net/wittazzurri/eq256.php?eq256=업로드.txt></script>

----------

5. 자바스크립트 소스는 아래와 같습니다. eqDiv 라는 아이디를 가진 div 에 모든 코드가 담깁니다.

옵션을 준 부분에서 따옴표가 있는 옵션과 없는 옵션을 잘 지켜야 합니다.

전체영역을 좌단, 중앙, 우단으로 정렬할 수 있고

이퀄의 앵커포인트 역시 상단, 중앙, 하단으로 옵션에서 줄 수 있습니다.

[code]

<div id=eqDiv></div>
<script src=http://media.login365.net/wittazzurri/eq256.php?eq256=https://blog.kakaocdn.net/dn/cyamZS/btroIUQo68L/EHkrVvbdoUMc3RucEdag11/tfile.txt></script>
<script>
eqMp3 = "https://blog.kakaocdn.net/dn/bBQkNi/btroJ5XLAgX/3ZfazzzTpmORiNmyUFWuck/tfile.mp3"; // mp3주소
eqZoneWidth = "70%"; // 가로사이즈 : 픽셀이나 퍼센트
eqZoneHeightPercent = 70; // 세로사이즈 : 가로에 대한 퍼센트
eqTotal = 50; // 막대기숫자
eqGap = 2; // 막대기간격 픽셀
eqMinHeight = 10; // 막대기 최소 세로사이즈 픽셀
eqAlign = "center"; // "left", "center", "right"
eqValign = "middle"; // "top", "middle", "bottom"
eqTopColor = "#ff0000"; // 상단 색상코드
eqBottomColor = "#0000ff"; // 하단 색상코드
eqRadius = "5px"; // 라운드수치 픽셀
startImage = "https://blog.kakaocdn.net/dn/oHbnK/btrxhNvRF6C/cCAMWwomsV3ylYwk3JWKZ0/img.png"; // 최초 이미지주소
startPart = "<table id=startTable style=width:" + eqZoneWidth + ";height:100%;cursor:pointer align=" + eqAlign +"><td align=center><img src=" + startImage + " style=width:100px></td></table>";
eqPart = "<table id=eqTable style=width:" + eqZoneWidth + ";height:100%;table-layout:fixed;cursor:pointer cellpadding=0 cellspacing=0 align=" + eqAlign + ">";
for (bar = 0; bar < eqTotal; bar++) eqPart += (bar == 0 ? "" : "<td style=width:" + eqGap + "px></td>") + "<td valign=" + eqValign + "><div id=bar_" + bar + " style=background:linear-gradient(180deg," + eqTopColor + "," + eqBottomColor + ");border-radius:" + eqRadius + "></div></td>";
mediaPart = "</table><audio id=eqMedia src=" + eqMp3 + " loop></audio>";
eqDiv.innerHTML = startPart + eqPart + mediaPart; 
eqDiv.style.overflow = "hidden";
startTable.onclick = function() { this.remove(); eqPlay(); }
eqTable.onclick = function() { eqMode ? eqStop() : eqPlay(); }
onresize = function() { eqZoneHeight = eqTable.offsetWidth * eqZoneHeightPercent / 100; eqDiv.style.height = eqZoneHeight + "px"; }
onresize();
function eqPlay() { eqMode = 1; eqMedia.play(); }
function eqStop() { eqMode = 0; eqMedia.pause(); }
setInterval(function() {
    for (bar = 0; bar < eqTotal; bar++) {
        if (eqMode) this["bar_" + bar].style.height = (this["eq_" + Math.round(eqMedia.currentTime * 25)][bar] * eqZoneHeight / 256 <= eqMinHeight ? eqMinHeight : this["eq_" + Math.round(eqMedia.currentTime * 25)][bar] * eqZoneHeight / 256) + "px";
        else this["bar_" + bar].style.height = (this["bar_" + bar].style.height.slice(0, -2) <= eqMinHeight ? eqMinHeight : this["bar_" + bar].style.height.slice(0, -2) * 0.9) + "px";
        this["bar_" + bar].style.opacity = (Math.floor(Math.random() * 70) + 30) / 100;
    }
}, 40);
</script>

[/code]

----------

6. eq256.php 파일의 코드는 오픈소스로 공유하지 않습니다.

이 파일을 본인의 홈페이지에 업로드하고 싶으신 분은 제게 개인적으로 연락해 주세요.

상황을 봐서 컨텐츠몰에서 공유하겠습니다.