[javascript] Plyr을 사용하여 음악 플레이어 만들기

27 Nov 2023

javascript

이번 포스트에서는 Plyr을 사용하여 웹사이트에 음악 플레이어를 만드는 방법에 대해 알아보겠습니다.

Plyr이란?

Plyr은 HTML5 멀티미디어 플레이어 라이브러리로, 오디오 및 비디오 파일을 쉽게 재생할 수 있도록 도와줍니다. 이 라이브러리는 사용하기 쉽고 많은 유용한 기능들을 제공하여 웹사이트에 멀티미디어 플레이어를 간편하게 추가할 수 있습니다.

Plyr 설치하기

Plyr을 사용하기 위해서는 우선 Plyr 라이브러리를 다운로드하거나 CDN을 이용하여 추가해야 합니다. 아래의 코드를 HTML 파일에 추가하여 Plyr을 설치할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.7/plyr.css">
</head>
<body>
  <!-- Plyr이 표시될 영역 -->
  <div id="player"></div>

  <script src="https://cdn.plyr.io/3.6.7/plyr.js"></script>

  <script>
    // Plyr을 이용한 음악 플레이어 설정 및 초기화 코드
    const player = new Plyr('#player', {
      controls: ['play', 'progress', 'current-time', 'mute', 'volume']
    });
  </script>
</body>
</html>

위의 코드에서 <div id="player"></div> 부분이 Plyr 플레이어가 표시될 영역입니다. const player = new Plyr('#player', { /* 설정 옵션 */ }); 코드를 통해 Plyr 플레이어를 초기화하고 원하는 설정을 할 수 있습니다.

Plyr 사용 예시

Plyr은 다양한 멀티미디어 관련 기능을 제공합니다. 예를 들어, 아래의 코드는 Plyr 플레이어를 사용하여 오디오 파일을 재생하는 예시입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.7/plyr.css">
</head>
<body>
  <div id="audio-player"></div>

  <script src="https://cdn.plyr.io/3.6.7/plyr.js"></script>

  <script>
    const audioPlayer = new Plyr('#audio-player', {
      controls: ['play', 'progress', 'current-time', 'mute', 'volume']
    });

    audioPlayer.source = {
      type: 'audio',
      sources: [{
        src: 'audio.mp3',
        type: 'audio/mp3'
      }]
    };
  </script>
</body>
</html>

위의 코드에서 audioPlayer.source를 통해 재생할 오디오 파일의 소스를 설정할 수 있습니다. 다른 멀티미디어 파일에 대해서도 비슷한 방법으로 Plyr을 사용할 수 있습니다.

결론

Plyr은 사용하기 편리한 멀티미디어 플레이어 라이브러리로, 웹사이트에 음악 플레이어를 쉽게 추가할 수 있습니다. 위에서 소개한 예시 코드를 참고하여 Plyr을 활용해 멋진 음악 플레이어를 만들어 보세요!

Plyr이란?

Plyr 설치하기

Plyr 사용 예시

결론

참고 자료