원형 트랙바 플레이어 업데이트 > 그누보드5 팁자료실

그누보드5 팁자료실

원형 트랙바 플레이어 업데이트 정보

원형 트랙바 플레이어 업데이트

본문

 

1. 예전 버전 업뎃입니다.

예전 버전은 원형을 360개로 분할하여 canvas 로 그려낼때 360줄의 코드를 사용했는데

이번에는 동일한 패턴별로 5개패턴을 분류하여 루프문으로 돌리는 방식을 써서 360줄을 5줄로 줄었습니다.

----------

2. pcSize 와 mobileSize 를 나누었습니다. 원하는 픽셀값을 넣어주면 입력된 숫자만큼의 지름을 가진 원형이 됩니다.

이미지는 정사각형이 아니더라도 또 사이즈에 상관없이 알아서 정사각형 원형의 비율로 최적으로 리사이징 되어 만들어집니다.

----------

3. playerBorder 는 트랙바 굵기 픽셀입니다. 이것은 전체 지름 안에 포함됩니다.

----------

4. 나머지는 옵션을 보면 알 것입니다. wittazzurri_1 안에 있습니다.

----------

5. wittazzurri_2 는 고정명령어라 js 로 만들어서 불러와도 될 것입니다.

----------

6. css 부분의 timerText 클래스는 타이머의 텍스트 옵션이니 알아서 수정하여 쓰시길요.

----------

7. <div id=circlePlayer style="margin:0 auto"> 의 마진 제로 오토는 중앙정렬을 위해 넣은 소스이니 좌측정렬을 원하는 분은 style 을 삭제해서 사용하세요.

----------

8. 모든 코드는 페이지가 로딩된 후 circlePlayer 라는 아이디를 가진 div 에 담깁니다.

또한 원형을 360개로 분할하고 음원의 시간도 360개로 분할하여 일대일로 대응하는 방식을 취했습니다.

커스텀 하실 분은 이 점 유의하시고 커스텀 하세요.

----------

9. 여러곡을 걸면서 각개의 음원마다 다른 이미지를 쓰고 싶으면...

audio 의 onended 이벤트와 이미지와 음원 부분을 함수로 만들어서 배열 내지는 순차변수에 담은 후

배열의 순번이나 변수의 카운터를 증감시키는 전략을 쓰면 될 것입니다.

함수를 만들기 편하도록 코드를 구성해 놓았습니다.

물론 그 함수를 제가 만들어 드리지는 않습니다.^^

 


<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 -->
추천
12

댓글 16개

이건 원래 제가 원형 차트 그래프를 만들려고 생각해 두었던 코드인데 삼천포로 빠져 버렸네요. 잘 지내시죠?
넵...요즘 일이 바빠지기 시작해서 몸이 피곤하니 인터넷 시간이 줄었었어요.
오늘 간만에 아침부터 식물들과 놀다가 컴터를 하고 있었습니다.
오늘은 백링크 작업을 배우고 있는 중입니다. ^^

프로그램이란것이 처음 기획했던것 그대로 만들어 지기 보다는 다르게 변형(응용)되면서 더 큰 작품이 나오기도 할것 같은 묘한 영역 같습니다.. ^^ 이것도 아주 보기 좋네요.
여러개의 음악을 사용할때는 음악파일 여러개를 합쳐서 하나로 만든후에 사용하고, 음악에 따라 사진이 변하는 것은 제 능력밖이라 시도도 못하고 있습니다.
잘 쓰고 있습니다. 고맙습니다.^^

지금 오디오의 id가 mp3Media 이니까 버튼클릭시 mp3Media 의 src 를 바꿔주면서 play()를 시켜주면 되구요. 이미지는 배경을 사용하였으니 역시 id 를 추적하여 배경주소를 바꿔주는 이벤트를 주면 됩니다.

가장 하단에 버튼하나 만들고 아래처럼...
<button onclick="mp3Media.src='mp3주소';mp3Media.play();playerCenter.style.backgroundImage='url(이미지주소)'">클릭</button>

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

근데 위와 같은 방법은 "산수"이지 "수학"이 아닙니다. 이걸 편하게 하려면 사용자 함수를 하나 만들어야죠.
위 버튼소스를 싹 지우고... 아래처럼 자바스크립트에서 함수를 만듭니다.

<script>
function myMedia(a, b) {
    mp3Media.src = a;
    mp3Media.play();
    playerCenter.style.backgroundImage = "url(" + b + ")";
}
</script>

그리고 저 코드 아래에 버튼을 3개 만들면... 함수처리를 해서

<button onclick="myMedia('1.mp3','1.jpg')">클릭</button>
<button onclick="myMedia('2.mp3','2.jpg')">클릭</button>
<button onclick="myMedia('3.mp3','3.jpg')">클릭</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>

이러면 버튼 클릭으로 여러곡과 이미지를 바꿀 수 있습니다.
물론 가장 중요한 건 버튼을 이미지 등으로 이쁘게 만들어야죠. 코드는 좋은데 퍼블리싱이 약하면 팬티만 입고 다니는 손흥민 꼴이니까요.

음악이 끝나면 자동으로 다음곡 넘기기 같은 테크닉도 그리 어렵지 않습니다.
그건 본인이 한번 공부해 보세요.
철용님은 고수님의 코드를 복사 후 붙여넣기가 최대의 기능이라고 말씀하시지만 알고리즘이 이해가 되지 않는 상태에서의 복붙은 결과물 빼기에 급급한 진짜 알멩이 없는 컨텐츠에 불과할 뿐이에요.

어떻게든 공통패턴을 필사적으로 추적해서 "함수"를 만드는 방법이 머리 속에 자연스레 떠올라야 하나의 문지방을 넘을 수 있습니다.
그리고 본인이 코드를 짤 때도 막 짜는 것이 아니라 어떻게 짜야 함수화 하는 코드를 만들 수 있을까? 라고 고민하셔야 해요.
비타주리님의 쉬운 설치 설명으로 왕 초보인 제가 잘 설치하고 사용하고 있습니다.
먼저 감사하다는 말씀 드립니다.
혹시 음악이 끝나면 자동으로 다음 곡 넘기기 할 수 있는 코드 알 수 있을까요..
염치없이 부탁 드려 봅니다..
죄송하지만 댓글에서 언급된 것 이외의 부분은 오픈코드로 공유해 드리기는 어렵습니다. 따로 제작의뢰를 하셔야 합니다.
안녕하세요..
좋은 자료 잘 사용하겠습니다.
한 페이지에서 위,아래로 원형트렉바를 만들려고 해서 복붙했더니
위에 하나만 출력이 됩니다. 혹 방법이 있다면 알려주시면 고맙겠습니다.

감사합니다.

아이디와 클래스와 변수와 함수를 다르게 네이밍해서  만들거나
아니면 따로 웹페이지를 만들어서 아이프레임으로 불러 보세요.
그 이상ㅈ의 대답은 단순한 답변글로 드리기에는 무리입니다

아..네 하나로도 만족하고 잘 쓰겠습니다. 이 쪽 분야와는 전혀 다른 일을 하는 사람이라
힌트를 주셔도 재주가 안 됩니다...^^
감사히 잘 사용할게요..
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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