• 목록

<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 // 테두리 픽셀 - 트랙바 굵기
baseColor = "#9a9a9c"; // 기본 색상
trackColor = "#7b090b"; // 트랙바 색상
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" // 정지버튼주소
</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 -->

<!--
<button onclick="mp3Media.src='https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3';mp3Media.play();playerCenter.style.backgroundImage='url(https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg)'">클릭</button>
   
<button onclick="mp3Media.src='http://gratia.kr/zz/audio/leejunghee.mp3';mp3Media.play();playerCenter.style.backgroundImage='url(http://gratia.kr/zz/images/suzy/suzy2.png)'">클릭</button>
   
-->
   

<!--------------------------------------------------->
<script>
function myMedia(a, b) {
    mp3Media.src = a;
    mp3Media.play();
    playerCenter.style.backgroundImage = "url(" + b + ")";
}
</script>
   
<button onclick="myMedia('http://gratia.kr/zz/audio/leejunghee.mp3','http://gratia.kr/zz/images/suzy/suzy2.png')">이정희의 그대여</button>

<button onclick="myMedia('https://blog.kakaocdn.net/dn/cxAIXs/btq5tESk6Ke/NmY7Y2K1CZbYp59y7H7kXK/tfile.mp3','https://blog.kakaocdn.net/dn/dGvqOG/btrcONHUaWw/cvKSoMdobz8gmS3ubZTYcK/img.jpg')">비타주리/인자기송</button>
   
<button onclick="myMedia('http://gratia.kr/zz/audio/josumi.mp3','http://gratia.kr/zz/images/suzy/suzy_450_450.png')">수지사진/고향의</button>
<!--------------------------------------------------->

이정희의 그대여 비타주리/인자기송 수지사진/고향의