[javascript] Plyr을 사용하여 동영상 플레이어에서 음성인식 기능 사용하기

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어의 자바스크립트 라이브러리로, 사용자 친화적인 인터페이스와 다양한 기능을 제공합니다. 이번 블로그 포스트에서는 Plyr과 Web Speech API를 결합하여 음성인식 기능을 동영상 플레이어에 추가하는 방법에 대해 알아보겠습니다.

Web Speech API란?

Web Speech API는 웹 브라우저에서 음성인식, 음성 합성 기능을 사용할 수 있도록 제공하는 API입니다. 이 API를 사용하면 웹 페이지에서 음성을 입력받을 수 있고, 이를 통해 사용자와 상호작용할 수 있는 다양한 기능을 구현할 수 있습니다.

Plyr과 Web Speech API 연동하기

Plyr 및 Web Speech API 라이브러리를 HTML 페이지에 추가합니다.

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>

Plyr을 초기화하고 동영상을 재생할 HTML 요소를 추가합니다. Plyr은 비디오 요소의 ID를 기반으로 동작하므로, 동영상을 재생할 태그에 ‘id’ 속성을 추가해야 합니다.
```
<video id="player" controls>
  <source src="video.mp4" type="video/mp4" />
</video>
```
Plyr을 사용하여 동영상 플레이어를 초기화합니다.
```
const player = new Plyr('#player');
```

음성인식 기능을 구현하기 위해 Web Speech API를 사용합니다. 음성인식이 활성화된 상태에서 사용자가 특정 명령을 말하면, Plyr 플레이어에 해당 명령을 실행시킬 수 있습니다.

if (annyang) {
  const commands = {
    '재생': () => { player.play(); },
    '일시정지': () => { player.pause(); },
    '이전': () => { player.previous(); },
    '다음': () => { player.next(); },
  };

  annyang.addCommands(commands);
  annyang.start();
}

플레이어에서 사용할 수 있는 다른 명령어들을 등록할 수도 있습니다. 예를 들어, ‘10 초 앞으로’, ‘10 초 뒤로’ 등의 명령을 추가할 수 있습니다.

if (annyang) {
  const commands = {
    '재생': () => { player.play(); },
    '일시정지': () => { player.pause(); },
    '이전': () => { player.previous(); },
    '다음': () => { player.next(); },
    '10 초 앞으로': () => { player.currentTime += 10; },
    '10 초 뒤로': () => { player.currentTime -= 10; },
  };

  annyang.addCommands(commands);
  annyang.start();
}

결론

Plyr과 Web Speech API를 함께 사용하여 동영상 플레이어에 음성인식 기능을 추가할 수 있습니다. 이를 통해 사용자는 키보드나 마우스 없이도 명령을 음성으로 입력하여 동영상 재생을 제어할 수 있습니다. 이는 웹 응용 프로그램의 사용성을 향상시키는 좋은 방법일 수 있습니다.

더 자세한 내용은 아래 참고 문서를 확인해주세요.