음악을 재생할 때 음악에 맞추어서 노래가사의 색상이 변경되도록 만들어보았습니다.
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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 18088 | |
| 18080 | |
| 18078 |
JavaScript
document.querySelector 의 상수화
2
|
| 18070 |
JavaScript
로또데이터 자바스크립트 기본함수
7
|
| 18061 | |
| 18037 |
JavaScript
당첨확률 높은 로또번호 추출하기
24
|
| 18036 | |
| 18033 | |
| 18022 | |
| 18021 | |
| 18020 | |
| 18018 | |
| 18004 | |
| 17999 | |
| 17995 | |
| 17987 |
PHP
메일 사진 첨부하는 방법
2
|
| 17982 | |
| 17981 |
OS
오래된 파일 지우기
|
| 17980 |
기타
링크 단축기
|
| 17970 | |
| 17965 | |
| 17964 | |
| 17963 |
JavaScript
마우스 아웃시 레이어창이 안닫혀요
|
| 17962 | |
| 17960 |
jQuery
카카오 우편번호 jquery로 변환
|
| 17956 |
PHP
계좌번호 복사소스
1
|
| 17953 |
Mobile
br 태그 모바일에만 보여주기
|
| 17949 | |
| 17930 | |
| 17928 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기