음악에 맞게 가사의 색상변경 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

첨부파일

music.zip (1.8M) 6회 다운로드 2025-01-25 01:50:45

본문

2106540763_1737737151.8317.png

 

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

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

감사합니다.

 

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

 

json

[
  {
    "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
  }  
]

 

추천
7

댓글 5개

가사 추출 프로그램은

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

가 최고입니다.

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

추천 

전체 2,584 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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