오디오 플레이어는 웹 사이트에서 음성 또는 음악 파일을 재생하기 위해 사용되는 중요한 기능입니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 활용하여 HTML5 오디오 플레이어를 구현하는 방법을 살펴보겠습니다.

HTML5 오디오 요소 생성

HTML5는 <audio> 요소를 통해 오디오 파일을 재생할 수 있도록 지원합니다. 우선 이 요소를 HTML 문서에 추가해야 합니다.

<audio id="audio-player" controls>
  <source src="audio-file.mp3" type="audio/mp3">
</audio>

위의 코드를 사용하여 <audio> 요소를 생성하고, id 속성을 "audio-player"로 지정하여 플레이어를 식별할 수 있도록 합니다. controls 속성을 추가하여 사용자가 플레이어를 제어할 수 있도록 합니다. 또한 <source> 요소를 추가하여 재생할 오디오 파일의 소스를 지정합니다.

fetch API를 사용하여 오디오 파일 가져오기

이제 자바스크립트 fetch API를 사용하여 오디오 파일을 가져와서 플레이어에 로드해 보겠습니다. 아래 코드를 참고하세요.

const audio = document.getElementById('audio-player');
const audioUrl = 'audio-file.mp3';

fetch(audioUrl)
  .then(response => response.blob())
  .then(blob => {
    const objectUrl = URL.createObjectURL(blob);
    audio.src = objectUrl;
  })
  .catch(error => {
    console.error('오디오 파일을 가져오는 중에 에러가 발생했습니다.', error);
  });

위의 코드에서는 document.getElementById('audio-player')를 사용하여 오디오 요소를 가져옵니다. 이후 fetch() 함수를 사용하여 audio-file.mp3의 경로로부터 오디오 파일을 가져옵니다.

첫 번째 .then() 메소드에서는 응답을 blob 형태로 변환합니다. 두 번째 .then() 메소드에서는 blob을 사용하여 오디오 파일의 URL을 생성한 뒤, audio.src에 할당합니다.

에러 처리를 위해 .catch() 메소드를 사용하여 오디오 파일을 가져오는 도중에 발생한 에러를 콘솔에 출력합니다.

완성된 HTML5 오디오 플레이어

이제 모든 작업이 끝났습니다. 오디오 파일을 가져와서 플레이어에 로드하고, 사용자가 플레이어의 컨트롤을 이용하여 재생할 수 있습니다.

<audio id="audio-player" controls>
  <source src="audio-file.mp3" type="audio/mp3">
</audio>

<script>
  const audio = document.getElementById('audio-player');
  const audioUrl = 'audio-file.mp3';

  fetch(audioUrl)
    .then(response => response.blob())
    .then(blob => {
      const objectUrl = URL.createObjectURL(blob);
      audio.src = objectUrl;
    })
    .catch(error => {
      console.error('오디오 파일을 가져오는 중에 에러가 발생했습니다.', error);
    });
</script>

위의 코드를 웹 페이지에 추가하여 HTML5 오디오 플레이어를 구현할 수 있습니다.

자바스크립트 fetch API를 사용하면 간단하게 웹 사이트에서 HTML5 오디오 플레이어를 구현할 수 있습니다. 오디오 파일을 가져와서 플레이어에 로드하는 간단한 예제를 통해 fetch API의 활용법을 익힐 수 있었습니다.