자바스크립트 Local Storage를 이용한 음악 플레이어 개발

15 Sep 2023

javascript

Javascript

음악 플레이어는 사용자들이 음악을 감상하고 제어할 수 있는 중요한 기능을 제공합니다. 이번 블로그 게시물에서는 자바스크립트의 Local Storage를 활용하여 간단한 음악 플레이어를 개발하는 과정을 알아보겠습니다.

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장하는 메커니즘으로, 클라이언트 측에서 사용할 수 있는 간단한 키-값 저장소를 제공합니다. 이를 통해 웹 애플리케이션은 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있습니다.

음악 플레이어 기능 설계

우리는 음악 플레이어에서 다음과 같은 기능을 구현할 것입니다:

음악 재생/일시정지 버튼
이전 곡/다음 곡 버튼
볼륨 조절 슬라이더
현재 재생 중인 음악 정보 출력

이러한 기능들은 자바스크립트로 구현될 것이며, 그 상태는 Local Storage에 저장될 것입니다.

자바스크립트 코드 작성

먼저, HTML 파일에 다음과 같이 틀을 작성합니다:

<body>
  <h1>음악 플레이어</h1>
  <div id="player">
    <button id="play-pause">재생</button>
    <button id="previous">이전 곡</button>
    <button id="next">다음 곡</button>
    <input type="range" id="volume-slider" min="0" max="100">
    <div id="current-song">Track: </div>
  </div>

  <script src="script.js"></script>
</body>

이제, 자바스크립트 파일에 다음과 같이 코드를 작성합니다:

// Local Storage에서 음악 플레이어 상태 가져오기
const playerState = JSON.parse(localStorage.getItem("player-state")) || {
  isPlaying: false,
  volume: 50,
  currentSong: ""
};

// DOM 요소 가져오기
const playPauseButton = document.getElementById("play-pause");
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const volumeSlider = document.getElementById("volume-slider");
const currentSongElement = document.getElementById("current-song");

// 초기 상태 설정
playPauseButton.innerText = playerState.isPlaying ? "일시정지" : "재생";
volumeSlider.value = playerState.volume;
currentSongElement.innerText = "Track: " + playerState.currentSong;

// 이벤트 핸들러 등록
playPauseButton.addEventListener("click", () => {
  playerState.isPlaying = !playerState.isPlaying;
  playPauseButton.innerText = playerState.isPlaying ? "일시정지" : "재생";
  savePlayerState();
});

previousButton.addEventListener("click", () => {
  // 이전 곡 로직 작성
});

nextButton.addEventListener("click", () => {
  // 다음 곡 로직 작성
});

volumeSlider.addEventListener("input", () => {
  playerState.volume = volumeSlider.value;
  savePlayerState();
});

// Local Storage에 음악 플레이어 상태 저장하기
function savePlayerState() {
  localStorage.setItem("player-state", JSON.stringify(playerState));
}

위의 코드는 Local Storage에서 음악 플레이어의 상태를 가져오고, DOM 요소를 조작하여 초기 상태를 설정합니다. 또한, 각 버튼과 슬라이더에 대한 이벤트 핸들러를 등록하여 사용자의 상호작용을 처리합니다. 마지막으로, 음악 플레이어 상태를 Local Storage에 저장하는 savePlayerState 함수를 구현합니다.

결론

이렇게 자바스크립트의 Local Storage를 활용하여 음악 플레이어를 개발하는 방법을 알아보았습니다. 이를 통해 사용자들은 음악 플레이어의 상태가 유지되는 웹 애플리케이션을 경험할 수 있습니다. 추가로, 이 프로젝트를 확장하여 플레이리스트 기능이나 음악 검색 기능을 추가할 수도 있습니다.

#javascript #localStorage #음악플레이어