Web Speech Apiを使ってブラウザで対話型入力をしよう

Web Speech Apiを使ってブラウザで対話型入力をしよう

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

酒怪物改め「ただの酒好き」です。

Web Speech Apiを使った「対話型入力フォーム」のモック

弊社の精鋭エンジニアが音声解析モジュールを研究していることに触発されて、今話題?のWeb Speech Apiを使った「対話型入力フォーム」のモックを作りましたので紹介。

index.html


    
        
    
    
        
名前
電話番号
住所

sound.js

(function(win, doc){

    win.addEventListener("DOMContentLoaded", function(){
        var speech = new Speech();
        speech.init();
    }, null);

    function Speech(){
        this.message     = doc.getElementById('message');
        this.text        = doc.getElementById("text");
        this.btn         = doc.getElementById("speech");
        this.input       = doc.querySelectorAll("input[speech]");
        this.support     = "対話入力対応ブラウザ";
        this.unsupported = "対話入力非対応ブラウザ";
        this.count       = 0;
    }

    Speech.prototype.init = function(){
        var self = this;
        if('speechSynthesis' in window) {
            self.message.textContent = self.support;
        }
        else{
            self.message.textContent = self.unsupported
            self.text.setAttribute('disabled', 'disabled');
            self.btn.setAttribute('disabled', 'disabled');
        }
        self.event();
    };

    Speech.prototype.setSpeech = function(){
        var self = this;
        var msg    = new SpeechSynthesisUtterance();
        var text   = "", 
            lang   = "ja", 
            volume = "1",
            rate   = "1",
            pitch  = "1",
            count  = 0,
            input  = this.input;

        msg.volume = volume;
        msg.rate   = rate;
        msg.pitch  = pitch;
        msg.lang   = lang;
        msg.text   = input[this.count].getAttribute("speech");

        window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;

        recognition = new webkitSpeechRecognition();
        recognition.lang = 'ja';
        recognition.continuous = true;

        recognition.start();
        recognition.onresult = function(event){
            
            self.input[self.count].value = event.results.item(self.count).item(0).transcript;
            self.count++;

            if(self.input[self.count]){
                self.speech(msg);   
            }
            else{
                recognition.stop();
            }
        };

        msg.text   = "これから音声による対話式入力を開始します。";
        win.speechSynthesis.speak(msg);

        this.speech(msg);
    };

    Speech.prototype.speech = function(message){
        message.text   = this.input[this.count].getAttribute("speech");
        win.speechSynthesis.speak(message);
    };

    Speech.prototype.event = function(){
        var self = this;
        self.btn.addEventListener("click", function(){self.setSpeech()}, null);    
    };

})(window, document);

やってることは非常にシンプルです。
問いを聞いたらそれに回答します。

回答したら対象の入力エリアに回答した内容がセットされ、次の問いが読まれます。
問いは「speech」属性でHTML内に定義しておきます。

iosはこの手の技術になかなか対応してくれませんが、Androidであれば動作します。
歩きながらでも入力出来るなんてとっても便利です。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

この記事を書いた人
アバター
ただの酒好き
IT本部の鬼マネージャー

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ