음파 연동 이퀄 플레이어 (자체 버튼) > 그누보드5 팁자료실

그누보드5 팁자료실

음파 연동 이퀄 플레이어 (자체 버튼) 정보

음파 연동 이퀄 플레이어 (자체 버튼)

본문

 

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 에 모든 코드가 담깁니다.

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

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

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


<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>

 

----------

 

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

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

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

추천
3

댓글 8개

제 메인도메인이 login365.net 과 login365.kr 두개입니다. 20년도 넘었죠.
메일은 *** 개인정보보호를 위한 이메일주소 노출방지 *** 이구요.

직원 6명 데리고 웹에이전시를 했던 적이 있었을 때 뺀 도메인입니다.
정말 짧은 기간에 게시판과 로그인 코드만 그누4 쓰고 레이아웃은 플래시 xml 로 프로그램 개발은 액션 스크립트로 한 500개쯤 홈페이지를 찍어냈었죠.

그누 커뮤니티 만들어 보려고 gnuworld.kr 을 사긴 했는데 의욕 뿐이라...
다 ssl 처리가 안 되어 있습니다. 본격적으로 하게 된다면 붙여야 겠지요.
직원들도 다 플래셔들이었어요.
여튼 과거 얘기하자면 길고... 그 정도가 한가닥이면 많은 분들은 수십가닥이 될 듯 합니다.ㅋ
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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