테스트 사이트 - 개발 중인 베타 버전입니다
SIR

음악에 맞게 가사의 색상변경

김철용
프로필 보기이 회원 글보기
 · 9개월 전 · 1104 · 5

링크

http://egis.kr/zz/music/index.html (63)

 

음악을 재생할 때 음악에 맞추어서 노래가사의 색상이 변경되도록 만들어보았습니다.

json으로 가사의 시작점과 끝점을 만들어야 한다는 점이 번거롭기는 합니다.

감사합니다.

 [code]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lyrics Player</title>
    <style>
        /* 기본 스타일 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
            text-align: center;
        }

        audio {
            width: 100%;
            max-width: 600px;
            margin-top: 20px;
            outline: none;
        }

        #lyricsContainer {
            margin-top: 20px;
            padding: 10px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .lyrics {
            font-size: 1.5rem; /* 기본 폰트 크기 */
            margin: 10px 0;
            color: #333;
            transition: all 0.3s ease-in-out;
        }

        .active {
            color: red;
            font-size: 2rem;
            font-weight: bold;
        }

        /* 반응형 디자인 */
        @media (max-width: 768px) {
            .lyrics {
                font-size: 1.2rem;
            }

            .active {
                font-size: 1.8rem;
            }

            body {
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            .lyrics {
                font-size: 1rem;
            }

            .active {
                font-size: 1.5rem;
            }

            audio {
                width: 100%;
            }

            #lyricsContainer {
                padding: 5px;
            }
        }
    </style>
</head>
<body>
    <audio id="audio" controls>
        <source src="sample.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <div id="lyricsContainer"></div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const audio = document.getElementById("audio");
            const lyricsContainer = document.getElementById("lyricsContainer");

            // JSON 데이터를 직접 포함
            const lyrics = [
                { "line": "바람도 차가운날 저녁에", "startTime": 1.342, "endTime": 6.255 },
                { "line": "그이와 단둘이서 만났네", "startTime": 6.436, "endTime": 10.289 },
                { "line": "정답던 이시간이 지나면", "startTime": 10.861, "endTime": 15.227 },
                { "line": "나 혼자 떠나 가야해", "startTime": 15.884, "endTime": 20.271 },
                { "line": "거리엔 가로등불 하나 둘", "startTime": 21.136, "endTime": 24.819 },
                { "line": "어둠은 불빛속에 내리고", "startTime": 25.649, "endTime": 29.686 },
                { "line": "정답던 이 시간이 지나면", "startTime": 30.69, "endTime": 34.431 },
                { "line": "나 혼자 떠나 가야해", "startTime": 35.587, "endTime": 38.462 },
                { "line": "그대여 그대여 울지말아요", "startTime": 39.894, "endTime": 43.781 },
                { "line": "사랑은 사랑은 슬픈거래요", "startTime": 44.512, "endTime": 48.481 },
                { "line": "그대여 그대여 나를 보세요 그리고 웃어요", "startTime": 48.99, "endTime": 58.278 }
            ];

            // 가사를 화면에 표시
            lyrics.forEach(line => {
                const div = document.createElement("div");
                div.className = "lyrics";
                div.textContent = line.line;
                div.dataset.startTime = line.startTime;
                div.dataset.endTime = line.endTime;
                lyricsContainer.appendChild(div);
            });

            // 재생 시간에 맞춰 가사 색상 변경
            audio.addEventListener("timeupdate", () => {
                const currentTime = audio.currentTime;

                document.querySelectorAll(".lyrics").forEach(div => {
                    const startTime = parseFloat(div.dataset.startTime);
                    const endTime = parseFloat(div.dataset.endTime);

                    if (currentTime >= startTime && currentTime < endTime) {
                        div.classList.add("active");
                    } else {
                        div.classList.remove("active");
                    }
                });
            });
        });
    </script>
</body>
</html>

[/code]

 

json

[code][
  {
    "line": "바람도 차가운날 저녁에",
    "startTime": 1.342,
    "endTime": 6.255 
  },
  {
    "line": "그이와 단둘이서 만났네",
    "startTime": 6.436,
    "endTime": 10.289
  },
  {
    "line": "정답던 이시간이 지나면",
    "startTime": 10.861,
    "endTime": 15.227
  },
  {
    "line": "나 혼자 떠나 가야해",
    "startTime": 15.884,
    "endTime": 20.271
  },
  {
    "line": "거리엔 가로등불 하나 둘",
    "startTime": 21.136,
    "endTime": 24.819
  },
  {
    "line": "어둠은 불빛속에 내리고",
    "startTime": 25.649,
    "endTime": 29.686
  },
  {
    "line": "정답던 이 시간이 지나면",
    "startTime": 30.690,
    "endTime": 34.431
  },
  {
    "line": "나 혼자 떠나 가야해",
    "startTime": 35.587,
    "endTime": 38.462
  },
  {
    "line": "그대여 그대여 울지말아요",
    "startTime": 39.894,
    "endTime": 43.781 
  },
  {
    "line": "사랑은 사랑은 슬픈거래요",
    "startTime": 44.51 2,
    "endTime": 48.481
  },
  {
    "line": "그대여 그대여 나를 보세요 그리고 웃어요",
    "startTime": 48.990,
    "endTime": 58.278
  }  
]
[/code]

 

첨부파일

music.zip (1.8 MB, 13회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

glitter0gim
프로필 보기이 회원 글보기
 9개월 전

수고하셨습니다.

김철용
프로필 보기이 회원 글보기
 9개월 전

@glitter0gim 

관심을 가져주셔서 감사드립니다^^

teemall
프로필 보기이 회원 글보기
 9개월 전

좋습니다. 감사합니다. !!

김철용
프로필 보기이 회원 글보기
 9개월 전

@teemall 

격려의 댓글을 남겨주셔서 감사드립니다.^^

비타주리
프로필 보기이 회원 글보기
 9개월 전

가사 추출 프로그램은

https://blog.naver.com/silhwan5125/100112135812

가 최고입니다.

단지 추출된 문자열을 json 형식으로 모든 가사를 "한번에" 바꾸려면 정규표현식으로 파싱질을 해야 하지만 개별로 바꾸려면 나름대로 괜찮을 거에요.

추천 

게시글 목록

번호 제목
17657
자바스크립 시계 [한국시간 고정] 8
17655
라라곤 6.0 데이타베이스 패스워드 설정하기 1
17654
기타 특정 기기 접근 금지시키는 스크립트
17653
JavaScript ThreeJS - 3D Bar and Progress Bar 1
17652
node.js RAM점유크기에 의한 노드서버관리
17651
JavaScript Javascript Undo, Redo 기능 구현하기
17650
PHP PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법
17642
node.js nodejs서버가 사용중인 메모리에 대한 로그
17633
node.js node.js에서 스케쥴링작성 8
17632
PHP 파일의 MIME 타입을 얻기 위한 클래스 1
17631
MySQL InnoDB와 MyISAM의 우단점
17630
PHP 코드이그나이터와 라라벨의 비교 1
17628
JavaScript 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기
17624
기타 일반 tcp소켓과 웹소켓의 비교 5
17623
기타 다중 소켓 포트와 한 개의 소켓 포트 비교
17620
node.js tcp소켓과 websocket 의 비교 2
17618
JavaScript JavaScript로 이미지의 부분 영역을 따내기
17617
node.js JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법
17614
node.js Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법
17612
node.js 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 1
17611
PHP PHP를 사용하여 TCP 소켓 서버를 만드는 방법
17610
node.js nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 1
17609
PHP PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 2
17608
node.js Node.js로 지속적인 핑 결과를 파일로 저장
17607
정규표현식 특수문자 제거, 우리글짜가 있는지 체크
17604
node.js Node.js에서 PDF 파일의 페이지 수를 얻기
17603
PHP PHP로 pdf의 페이지수를 얻기 1
17602
node.js Node.js로 워터마킹 기능을 구현하는 방법
17600
PHP PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지
17594
node.js NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 2
이전 다음
전체 목록