자바스크립트 fetch API를 사용한 웹 사이트 HTML5 오디오 플레이어 구현

10 Sep 2023

javascript

이번에는 자바스크립트의 fetch API를 이용하여 웹 사이트에서 HTML5 오디오 플레이어를 구현하는 방법을 알아보겠습니다. fetch API는 데이터를 비동기적으로 가져오는 데 사용되며, 오디오 파일을 가져와서 재생하는 기능을 구현하기에 적합합니다.

HTML 파일 구조

먼저, 다음과 같은 기본 HTML 구조를 가진 파일을 생성해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Audio Player</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Audio Player</h1>
  <div class="player-container">
    <audio id="audio-player" controls>
      <source src="" type="audio/mpeg">
    </audio>
    <div id="play-button" class="button">Play</div>
    <div id="pause-button" class="button">Pause</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS 스타일 지정

CSS 파일을 생성하고, 이전 HTML 코드에서 사용한 클래스 이름을 참조하여 스타일을 지정합니다. 다음은 예시입니다.

.player-container {
  text-align: center;
}

.button {
  display: inline-block;
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid #000;
  cursor: pointer;
}

.button:hover {
  background-color: #000;
  color: #fff;
}

JavaScript 코드 작성

이제 JavaScript 파일을 생성하고, fetch API를 이용하여 오디오 파일을 가져오고 플레이어에 추가하는 코드를 작성해야 합니다.

const audioPlayer = document.getElementById('audio-player');
const playButton = document.getElementById('play-button');
const pauseButton = document.getElementById('pause-button');

function loadAudio() {
  fetch('audio.mp3') // 오디오 파일의 경로를 입력하세요
    .then(response => response.blob())
    .then(blob => {
      const audioURL = URL.createObjectURL(blob);
      audioPlayer.src = audioURL;
    })
    .catch(error => {
      console.error('오디오를 가져오는 중 오류가 발생했습니다.', error);
    });
}

playButton.addEventListener('click', () => {
  audioPlayer.play();
});

pauseButton.addEventListener('click', () => {
  audioPlayer.pause();
});

loadAudio();

위 코드에서는 오디오 파일을 가져오기 위해 fetch API를 사용합니다. loadAudio 함수에서 fetch를 사용하여 오디오 파일을 불러온 다음, response.blob()을 호출하여 오디오 파일의 blob 형태로 변환합니다. 이후 URL.createObjectURL을 사용하여 blob URL을 생성하고, 오디오 플레이어의 소스로 지정합니다. 마지막으로 play 버튼과 pause 버튼을 클릭했을 때 각각 audioPlayer.play()와 audioPlayer.pause()를 호출하여 오디오를 재생 및 일시정지합니다.

테스트

페이지를 열고 오디오 플레이어의 Play 버튼을 클릭하여 오디오를 재생할 수 있습니다. Pause 버튼을 클릭하면 재생을 일시정지할 수 있습니다.

위와 같이 fetch API를 사용하여 웹 사이트에서 HTML5 오디오 플레이어를 구현할 수 있습니다. 이를 통해 오디오 파일을 효율적으로 관리하고 재생할 수 있습니다.