원형 트랙바 플레이어 > 팁

• 목록

<style>
.timerText { color:#ffffff80; font-size:1rem; font-weight:bold; }
</style>

<div id=circlePlayer style="margin:0 auto"></div>

<!-- wittazzirri_1 -->
<script>
pcSize = 500; // pc 가로세로 픽셀
mobileSize = 300; // 모바일 가로세로 픽셀
playerBorder = 10 // 테두리 픽셀 - 트랙바 굵기
mp3Url = "https://blog.kakaocdn.net/dn/0ZbFL/btrv6d8zxQ3/s1XUjq7Z0ZtNLlPC0kPFV1/tfile.mp3"; // mp3주소
imageUrl = "https://blog.kakaocdn.net/dn/bOWJ39/btrv4JNGZ6p/kjqy3KM81Y51pMDOSkhkA1/img.jpg" // 이미지주소
playButton = "https://blog.kakaocdn.net/dn/1aY1b/btrvZ309K9P/sG5NEaf9zdImHuywWo9HF1/img.png" // 재생버튼주소
stopButton = "https://blog.kakaocdn.net/dn/bL3YN6/btrv5mEIyno/Ocj1pX1nrIRJ3I8flDIUG0/img.png" // 정지버튼주소
baseColor = "#9a9a9c"; // 기본 색상
trackColor = "#7b090b"; // 트랙바 색상
</script>
<!-- /wittazzirri_1 -->

<!-- wittazzirri_2 -->
<script>
playerSize = ("win16win32win64macmacintel").indexOf(navigator.platform.toLowerCase()) < 0 ? mobileSize : pcSize;
trackCanvas = "<canvas id=trackBar width=" + playerSize + " height=" + playerSize + "></canvas>";
trackPart = "<div id=trackDiv style='width:100%;height:100%;background-color:" + baseColor + ";clip-path:circle(50% at 50% 50%)'>" + trackCanvas + "</div>";
trackTable = "<table style='width:100%;height:100%;table-layout:fixed;clip-path:circle(50% at 50% 50%)' cellpadding=0 cellspacing=0><td id=currentTimer class=timerText align=right></td><td align=center><img id=playerButton style=cursor:pointer></td><td id=totalTimer class=timerText align=left></td></table>";
circlePlayer.innerHTML = trackPart + "<div id=playerCenter style=position:relative;background-size:cover;background-position:center;border-radius:50%>" + trackTable + "</div><audio id=mp3Media loop></audio>";
circlePlayer.style.width = circlePlayer.style.height = playerSize + "px";
with (playerCenter.style) {
width = height = playerSize - playerBorder * 2 + "px";
backgroundImage = "url(" + imageUrl + ")";
marginTop = -(playerSize - playerBorder)  + "px";
marginLeft = playerBorder + "px";
}
mp3Media.src = mp3Url;
function mp3Stop() {
mp3Media.pause();
playerButton.src = playButton;
onMode = 0;
}
function mp3Play() {
mp3Media.play();
playerButton.src = stopButton;
onMode = 1;
}
mp3Stop();
function currentAngle() {
if (arguments[1] == arguments[3]) normalAngle = arguments[2] < arguments[0] ? -90 : 90;
else if (arguments[0] == arguments[2] && arguments[3] > arguments[1]) normalAngle = 180;
else {
normalAngle = Math.atan((arguments[2] - arguments[0]) / (arguments[1] - arguments[3])) * 180 / Math.PI;
if (arguments[3] > arguments[1] && arguments[2] > arguments[0]) normalAngle = 180 + normalAngle;
else if (arguments[3] > arguments[1] && arguments[2] < arguments[0]) normalAngle = -180 + normalAngle;
}
eventAngle = normalAngle < 0 ? normalAngle + 360 : normalAngle;
return eventAngle;
}
tw = trackBar.width;
cw = trackBar.width / 2;
bw = trackBar.width / 90;
function trackDraw() {
clip = trackBar.getContext("2d");
clip.beginPath();
clip.moveTo(cw, cw);
clip.lineTo(arguments[0], arguments[1]);
clip.lineTo(arguments[2], arguments[3]);
clip.lineTo(arguments[4], arguments[5]);
clip.lineTo(arguments[6], arguments[7]);
clip.lineTo(arguments[8], arguments[9]);
clip.lineTo(arguments[10], arguments[11]);
clip.lineTo(cw, cw);
clip.closePath();
clip.fillStyle = trackColor;
clip.fill();
}
function trackPoint() {
trackDiv.innerHTML = trackCanvas;
if (arguments[0] == 0) trackDraw(cw, cw, cw, cw, cw, cw, cw, cw, cw, cw, cw, cw);
for (track45 = 1; track45 <= 45; track45++) if (arguments[0] == track45) trackDraw(cw, 0, cw + bw * track45, 0, cw, cw, cw, cw, cw, cw, cw, cw);
for (track135 = 1; track135 <= 90; track135++) if (arguments[0] == track135 + 45) if (arguments[0] == track135 + 45) trackDraw(cw, 0, tw, 0, tw, bw * track135, cw, cw, cw, cw, cw, cw);
for (track225 = 1; track225 <= 90; track225++) if (arguments[0] == track225 + 135) trackDraw(cw, 0, tw, 0, tw, tw, tw - bw * track225, tw, cw, cw, cw, cw);
for (track315 = 1; track315 <= 90; track315++) if (arguments[0] == track315 + 225) trackDraw(cw, 0, tw, 0, tw, tw, 0, tw, 0, tw - bw * track315, cw, cw);
for (track360 = 1; track360 <= 45; track360++) if (arguments[0] == track360 + 315) trackDraw(cw, 0, tw, 0, tw, tw, 0, tw, 0, 0, bw * track360, 0);
}
countNumber = onMode = 0;
function trackMode() {
countNumber = Math.round(360 * mp3Media.currentTime / mp3Media.duration);
trackPoint(countNumber);
if (typeof currentTimer != 'undefined') currentTimer.innerText = ('0' + Math.floor(mp3Media.currentTime / 60)).slice(-2) + ':' + ('0' + Math.floor(mp3Media.currentTime % 60)).slice(-2);
if (typeof totalTimer != 'undefined') totalTimer.innerText = ('0' + Math.floor(mp3Media.duration / 60)).slice(-2) + ':' + ('0' + Math.floor(mp3Media.duration % 60)).slice(-2);
}
setInterval(trackMode, 500);
playerButton.onclick = function() {
onMode ? mp3Stop() : mp3Play();
trackDiv.style.cursor = 'pointer';
trackDiv.onmousedown = function() {
mp3Media.currentTime = currentAngle(playerSize / 2, playerSize / 2, arguments[0].offsetX, arguments[0].offsetY) * mp3Media.duration / 360;
mp3Play();
}
}
</script>
<!-- /wittazzirri_2 -->