자바스크립트에서 JSON 데이터를 이용하여 음악 플레이어 생성하기

15 Sep 2023

javascript

이번에는 자바스크립트를 사용하여 JSON 데이터를 이용해 음악 플레이어를 만드는 방법에 대해 알아보겠습니다.

JSON 데이터 구조

먼저 JSON 데이터의 구조를 확인해야 합니다. 음악 플레이어를 생성하기 위해 필요한 데이터는 다음과 같은 형식을 갖추어야 합니다.

[
  {
    "title": "곡 제목",
    "artist": "아티스트",
    "album": "앨범",
    "src": "음악 파일 경로"
  },
  {
    "title": "곡 제목",
    "artist": "아티스트",
    "album": "앨범",
    "src": "음악 파일 경로"
  },
  ...
]

각 곡은 “title”, “artist”, “album”, “src”라는 속성을 가지고 있어야 합니다. “title”은 곡의 제목, “artist”는 아티스트, “album”은 앨범 정보를 담고 있고, “src”는 실제 음악 파일의 경로를 나타냅니다.

HTML과 CSS 구조

HTML과 CSS를 사용하여 음악 플레이어의 구조와 스타일을 설정해야 합니다. 예를 들면 다음과 같이 할 수 있습니다.

<div id="player">
  <div id="currentSong">
    <h3 id="title"></h3>
    <p id="artist"></p>
    <p id="album"></p>
  </div>
  <div id="controls">
    <button id="play">재생</button>
    <button id="pause">일시정지</button>
    <button id="next">다음 곡</button>
  </div>
</div>

#player {
  margin: 20px;
}

#currentSong {
  text-align: center;
}

#controls {
  margin-top: 20px;
  text-align: center;
}

각 요소에는 id 속성을 할당했으며, 자바스크립트에서 해당 id를 통해 요소에 접근할 수 있습니다.

자바스크립트 코드 작성

이제 자바스크립트 코드를 작성해야 합니다. 다음 코드를 사용하여 JSON 데이터를 가져와 음악 플레이어를 만들 수 있습니다.

const player = document.getElementById('player');
const titleElement = document.getElementById('title');
const artistElement = document.getElementById('artist');
const albumElement = document.getElementById('album');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const nextButton = document.getElementById('next');

let currentSongIndex = 0;

function loadPlayer() {
  fetch('music.json')
    .then(response => response.json())
    .then(data => {
      const currentSong = data[currentSongIndex];
      titleElement.textContent = currentSong.title;
      artistElement.textContent = currentSong.artist;
      albumElement.textContent = currentSong.album;
    });
}

playButton.addEventListener('click', () => {
  // 음악 재생 로직 추가
});

pauseButton.addEventListener('click', () => {
  // 음악 일시정지 로직 추가
});

nextButton.addEventListener('click', () => {
  currentSongIndex++;
  if (currentSongIndex >= data.length) {
    currentSongIndex = 0;
  }
  loadPlayer();
});

loadPlayer();

위 코드에서는 fetch 함수를 사용하여 music.json 파일에서 JSON 데이터를 가져옵니다. 가져온 데이터를 통해 음악 플레이어의 제목, 아티스트, 앨범 정보를 업데이트합니다.

playButton, pauseButton, nextButton의 이벤트 리스너를 등록하여 클릭 시 각각의 동작을 수행할 수 있도록 합니다.

마무리

이제 JSON 데이터를 이용하여 음악 플레이어를 생성하는 방법에 대해 알아봤습니다. 이 코드를 기반으로 음악 플레이어를 커스터마이징하고 다양한 기능을 추가할 수 있습니다.

#음악플레이어 #JSON