음파 연동 이퀄 플레이어 (자체 버튼) 정보
음파 연동 이퀄 플레이어 (자체 버튼)관련링크
본문
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개
그나저나 홈페이지 도메인이 아주 잘 빠졌네요!
메일은 *** 개인정보보호를 위한 이메일주소 노출방지 *** 이구요.
직원 6명 데리고 웹에이전시를 했던 적이 있었을 때 뺀 도메인입니다.
정말 짧은 기간에 게시판과 로그인 코드만 그누4 쓰고 레이아웃은 플래시 xml 로 프로그램 개발은 액션 스크립트로 한 500개쯤 홈페이지를 찍어냈었죠.
그누 커뮤니티 만들어 보려고 gnuworld.kr 을 사긴 했는데 의욕 뿐이라...
다 ssl 처리가 안 되어 있습니다. 본격적으로 하게 된다면 붙여야 겠지요.
여튼 과거 얘기하자면 길고... 그 정도가 한가닥이면 많은 분들은 수십가닥이 될 듯 합니다.ㅋ
아직 이해가 안되지만 천천히 보고 적용해보겠습니다.^^