본문 바로가기
HTML&CSS

HTML, CSS, JavaScript를 활용한 뮤직 플레이어 만들기 (1)

by 초콜렛시몽 2025. 1. 13.
반응형

간단한 자바스크립트를 사용하여 HTML, CSS, JavaScript로 작동하는 기본 뮤직 플레이어를 만드는 예제를 제공하겠습니다. 이 뮤직 플레이어는 다음과 같은 기능을 제공합니다:

  1. 음악 재생/일시정지
  2. 이전 곡/다음 곡 이동
  3. 현재 재생 시간 표시

아래는 코드 예제입니다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Music Player</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="player">
    <h2>Simple Music Player</h2>
    <audio id="audio"></audio>
    <div class="controls">
      <button id="prev">⏮️</button>
      <button id="play">▶️</button>
      <button id="next">⏭️</button>
    </div>
    <div class="progress-container">
      <span id="current-time">0:00</span>
      <input type="range" id="progress" value="0" max="100">
      <span id="duration">0:00</span>
    </div>
    <p id="song-title"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.player {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-block;
}

.controls {
  margin: 20px 0;
}

button {
  font-size: 20px;
  margin: 0 10px;
  padding: 10px;
  cursor: pointer;
  border: none;
  background: #007BFF;
  color: white;
  border-radius: 5px;
}

button:hover {
  background: #0056b3;
}

.progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

input[type="range"] {
  width: 60%;
}

JavaScript

const audio = document.getElementById('audio');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const songTitle = document.getElementById('song-title');

// 음악 파일 목록
const songs = [
  { title: "Song 1", src: "song1.mp3" },
  { title: "Song 2", src: "song2.mp3" },
  { title: "Song 3", src: "song3.mp3" }
];

let currentSongIndex = 0;

// 음악 로드
function loadSong(index) {
  const song = songs[index];
  audio.src = song.src;
  songTitle.textContent = song.title;
}

// 음악 재생
function playSong() {
  audio.play();
  playBtn.textContent = '⏸️';
}

// 음악 일시정지
function pauseSong() {
  audio.pause();
  playBtn.textContent = '▶️';
}

// 다음 곡
function nextSong() {
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  loadSong(currentSongIndex);
  playSong();
}

// 이전 곡
function prevSong() {
  currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
  loadSong(currentSongIndex);
  playSong();
}

// 업데이트 시간
function updateProgress() {
  const currentTime = audio.currentTime;
  const duration = audio.duration;
  const progressPercent = (currentTime / duration) * 100;
  progress.value = progressPercent || 0;

  currentTimeEl.textContent = formatTime(currentTime);
  durationEl.textContent = formatTime(duration);
}

// 시간 포맷
function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

// 프로그래스 바 이동
progress.addEventListener('input', () => {
  const duration = audio.duration;
  audio.currentTime = (progress.value / 100) * duration;
});

// 이벤트 리스너
playBtn.addEventListener('click', () => {
  const isPlaying = !audio.paused;
  isPlaying ? pauseSong() : playSong();
});

prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('ended', nextSong);

// 초기 설정
loadSong(currentSongIndex);

결과:

다음 시간엔 좀더 고급 스러운 뮤직플레이어를 만들어보자구요~

반응형

'HTML&CSS' 카테고리의 다른 글

HTML, CSS, JavaScript를 활용한 뮤직플레이어를 만들어보자. (2)  (0) 2025.01.13
CSS 그림자 속성에 대해 알아보자.  (0) 2025.01.13
CSS img 속성을 알아보자.  (0) 2024.12.31
CSS a속성에 대해 알아보자.  (0) 2024.12.27
CSS 속성별 예제 및 설명  (0) 2024.12.24

관련글

티스토리툴바