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

• 목록

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