[javascript] Plyr을 사용하여 동영상 플레이어에 음성 인식 기능 추가하기
이번에는 Plyr이라는 JavaScript 동영상 플레이어 라이브러리를 사용하여 동영상 플레이어에 음성 인식 기능을 추가해보겠습니다.
Plyr은 간단하면서도 강력한 기능을 제공하는 오픈 소스 동영상 플레이어입니다. 음성 인식은 Plyr 라이브러리에서 기본으로 제공되는 것이 아니기 때문에, 일부 수정이 필요합니다.
음성 인식을 위한 준비물
음성 인식을 구현하기 위해서는 다음과 같은 준비물이 필요합니다.
- 최신 웹 브라우저: 음성 인식은 최신 웹 브라우저에서만 동작합니다. 최신 버전의 Google Chrome, Mozilla Firefox, Microsoft Edge 등을 사용하세요.
- 음성 인식 API 키: 음성 인식 기능을 사용하기 위해 음성 인식 API 키가 필요합니다. Google Web Speech API, IBM Watson Speech to Text API 등의 API를 사용할 수 있습니다.
Plyr 설치 및 설정
- Plyr 라이브러리를 다운로드하거나, CDN을 통해 라이브러리를 가져옵니다.
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
- Plyr 플레이어를 설정합니다. Plyr 라이브러리의 기본 설정에서 음성 인식 기능을 활성화하기 위해
captions.active속성을 true로 설정합니다.
const player = new Plyr("#video-player", {
captions: {
active: true ,
update: true
}
});
음성 인식 기능 추가하기
- 음성 인식 기능을 추가하기 위해
SpeechRecognitionAPI를 사용합니다. API를 지원하는지 먼저 확인합니다.
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (window.SpeechRecognition) {
// 음성 인식 기능을 추가합니다.
} else {
console.log("음성 인식이 지원되지 않는 브라우저입니다.");
}
- 음성 인식을 시작하기 위해
startRecognition함수를 작성합니다.
function startRecognition() {
const recognition = new SpeechRecognition();
// 인식된 음성을 텍스트로 변환하여 출력하는 이벤트 리스너를 추가합니다.
recognition.addEventListener("result", (event) => {
const transcribedText = event.results[0][0].transcript;
console.log("Recognized text:", transcribedText);
});
// 음성 인식을 시작합니다.
recognition.start();
}
- Plyr 플레이어의 플레이 버튼 클릭 시 음성 인식 기능을 호출합니다.
const playButton = document.querySelector(".plyr__control--overlaid .plyr__play-large");
playButton.addEventListener("click", () => {
startRecognition();
});