음악에 맞게 가사의 색상변경
음악을 재생할 때 음악에 맞추어서 노래가사의 색상이 변경되도록 만들어보았습니다.
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]
댓글 5개
수고하셨습니다.
@glitter0gim
관심을 가져주셔서 감사드립니다^^
좋습니다. 감사합니다. !!
@teemall
격려의 댓글을 남겨주셔서 감사드립니다.^^
가사 추출 프로그램은
https://blog.naver.com/silhwan5125/100112135812
가 최고입니다.
단지 추출된 문자열을 json 형식으로 모든 가사를 "한번에" 바꾸려면 정규표현식으로 파싱질을 해야 하지만 개별로 바꾸려면 나름대로 괜찮을 거에요.
추천