Create an audio player using JSON data in JavaScript

오디오 플레이어를 웹 사이트에 추가하면 사용자들이 음악이나 오디오 파일을 쉽게 재생할 수 있습니다. 이번 글에서는 자바스크립트와 JSON 데이터를 이용하여 오디오 플레이어를 만드는 방법을 알아보겠습니다.

1. HTML 구조 생성하기

HTML 파일에서 먼저 오디오 플레이어를 위한 기본적인 구조를 생성해야 합니다. 다음은 오디오 태그와 플레이어 컨트롤을 위한 버튼 요소들로 이루어진 예시입니다:

<audio id="audioPlayer" controls>
  <source src="" type="audio/mp3">
</audio>

<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>

2. JSON 데이터 가져오기

이제 자바스크립트를 사용하여 JSON 데이터를 가져와야 합니다. JSON 파일이나 API를 통해 데이터를 가져올 수 있습니다. 아래는 JSON 파일을 사용하는 예시입니다:

fetch('audioData.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터 처리
    // 오디오 플레이어 업데이트
  });

3. 오디오 플레이어 업데이트하기

JSON 데이터를 가져온 후에는 오디오 플레이어를 업데이트해야 합니다. 가져온 JSON 데이터를 이용하여 오디오 태그와 버튼 요소를 업데이트합니다:

const audioElement = document.getElementById('audioPlayer');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');

audioElement.src = data.audioUrl;
playBtn.addEventListener('click', () => audioElement.play());
pauseBtn.addEventListener('click', () => audioElement.pause());

위 코드에서는 JSON 데이터에 포함된 오디오 URL을 audioElement.src에 할당해 오디오 파일을 설정하고, playBtn과 pauseBtn 버튼을 클릭하면 이벤트 핸들러를 통해 재생 및 일시정지 기능을 수행합니다.

마무리

이제 자바스크립트와 JSON 데이터를 이용하여 오디오 플레이어를 생성하는 방법을 알아보았습니다. 오디오 플레이어를 웹 사이트에 추가하여 음악이나 오디오 파일을 쉽게 재생할 수 있도록 해보세요.

#javascript #JSON

🔍 관련 자료

• fetch API 사용 방법
• HTML 오디오 요소