[javascript] Plyr을 사용하여 오디오 스트리밍 기능 추가하기

27 Nov 2023

javascript

Plyr은 오디오 및 비디오 재생을 위한 유연하고 사용하기 쉬운 미디어 플레이어 라이브러리입니다. 이 라이브러리는 HTML5 미디어 요소를 사용하여 오디오 및 비디오를 재생하며, 사용자 정의 기능 및 스타일링 옵션을 제공합니다.

이 튜토리얼에서는 Plyr을 사용하여 웹 사이트에 오디오 스트리밍 기능을 추가하는 방법을 알아보겠습니다.

1. Plyr 라이브러리 가져오기

먼저, Plyr 라이브러리를 웹 페이지에 추가해야 합니다. Plyr은 CDN을 통해 제공되므로, <head> 태그 내에 다음과 같이 스크립트를 추가합니다:

<head>
  <script src="https://cdn.plyr.io/3.3.23/plyr.js"></script>
  <link rel="stylesheet" href="https://cdn.plyr.io/3.3.23/plyr.css" />
</head>

2. 오디오 요소 추가하기

오디오 스트리밍을 위해 <audio> 요소를 추가합니다. Plyr은 이 요소를 자동으로 감지하고, 플레이어 UI를 생성합니다. 다음은 예시 코드입니다:

<audio controls>
  <source src="your-audio-stream-url" type="audio/mp3">
</audio>

your-audio-stream-url은 실제 오디오 스트림 URL로 변경해야 합니다.

3. Plyr 플레이어 초기화하기

Plyr을 사용하기 위해 초기화 코드를 추가해야 합니다. <script> 태그 내에 다음과 같이 Plyr 플레이어를 초기화하는 코드를 추가해주세요:

<script>
  const player = new Plyr('audio');
</script>

위의 코드는 오디오 요소를 audio 선택자로 지정하여 Plyr 플레이어를 초기화합니다.

4. 커스터마이징 옵션

Plyr은 다양한 사용자 정의 옵션을 제공합니다. 오디오 플레이어의 외관이나 동작을 변경하려면, Plyr 생성자에 옵션을 전달하면 됩니다. 예를 들면:

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

위의 예시에서는 플레이어의 컨트롤러에 특정 버튼들만 표시되도록 하고, 자동 재생 설정을 했습니다. 필요한 옵션을 선택하여 플레이어를 커스터마이징할 수 있습니다.

결론

이제 Plyr을 사용하여 오디오 스트리밍 기능을 갖춘 미디어 플레이어를 웹 사이트에 추가할 수 있습니다. Plyr을 사용하면 사용자 정의가 용이하고, 반응형 디자인 및 다양한 기능을 제공합니다.

더 많은 옵션과 기능에 대해 자세히 알아보려면 Plyr 공식 문서를 참조하십시오.