전 자료

teratail씨와 IBM씨로부터 「Angular + Watson으로 프리젠 테이션 슬라이드를 이상한 모험으로 만드십시오! 」라고 하는 기사가 공개되고 있었어. 프레젠테이션 내에서 Watson에서 음성 인식을 하고, 특정 워드에 반응하여 '드 드 드 드' 이펙트를 표시하는 것 같다. 퀴즈왕에게도 승리해 버리는 Watson을 슬라이드에 잡아 버린다니 호화로운 선물이다! 멋지다!

하고 싶은 일

하지만 Watson은 인터넷에 연결되어 있지 않으면 사용할 수 없기 때문에 발표시 네트워크가 약하다고 무서워요. 게다가 Watson씨를 사용하는데 어카운트를 만들거나라든지 다소 수고가 걸린다.
그래서 Web Speech API의 차례다. Web Speech API의 Speech Recognition API를 사용하면, 브라우저의 기능으로서 로컬로 음성 인식을 할 수 있어요. 또, Reveal.js를 사용하면 브라우저에서 프레젠테이션을 할 수 있으므로, 이 2개를 사용하면 teratail×IBM씨와 같을 수 있을 것 같다. Web Speech API의 브라우저 대응 상황은 좋지 않지만, 프레젠테이션 용도라면 브라우저도 스스로 선택할 수 있기 때문에 문제 없음!

하는 방법

Web Speech API는 HTTPS 또는 로컬 웹 서버가 아니면 사용할 수 없기 때문에 장애물이 높다고 생각되기 쉽지만, Reveal.js라면 로컬로부터의 전달 (grunt serve)이므로, 먼저 마이크의 허가마저 OK하면 곧 사용할 수 있습니다.
다만, 그대로 사용하면, 한번 음성을 인식 후에 정지해 버리므로, 이쪽의 「 Jellyware : Web Speech API로 중단없는 음성 인식 」에 있도록(듯이), 녹음이 멈출 때마다 음성 인식을 재실행해 주자.
또한 Reveal.js의 슬라이드 조작은 Reveal.next() 또는 Reveal.slide()에서 할 수 있습니다. API 목록 를 보고 음성 인식 결과에 따라 호출해 봅시다.
음성인식＋슬라이드 조작의 부분은 방금전의 「 Jellyware : Web Speech API로 중단없는 음성 인식 」에 있는 소스 코드 거의 그대로로 사용할 수 있어.
위의 GIF 이미지의 예에서는 '슬라이드', '전', '후'라는 단어에 반응한 페이지 이동과 '자와'라는 단어에 반응한 이펙트를 구현하고 있어요.

recognition.onresult = function(event) {
  var results = event.results;
  for (var i = event.resultIndex; i < results.length; i++) {
    if (results[i].isFinal) {

 　　　// ここにキーワードチェックを追加したよ
      let script = results[i][0].transcript;
      if (script.match(/スライド/)) {
        if (script.match(/次/)) {
           Reveal.next();
        } else if (script.match(/前/)){
           Reveal.prev();
        } 

Web Recognition API, 처음 사용해 보았지만 인식률도 나름대로 잘 여러가지 사용할 수 있을 것 같다. '골든카무이'도 제대로 인식했어.
음성 인식 클라우드 서비스는 여러 가지가 있지만 간단한 처리의 경우 Web Recognition API를 사용해 보겠습니다.