以下は「ml5-examples/p5js/ImageClassification/ImageClassification_VideoSound」で公開されているサンプルのコード解説です。
次のリンクをクリックすると、このサンプルの動作が確認できます(パソコンにカメラを接続し、スピーカーをオンにしておきます)。
「MobileNetとp5.js、p5.speechを使った音声出力をともなうWebカメラ画像分類」
上記サンプルの実行からも分かるように、このサンプルは、前の「2_1_3:MobileNetとp5.jsを使ったWebカメラ画像分類」の推測結果をコンピュータに喋らせるようにしたものです。
この音声出力はp5.speech.jsというJavaScriptライブラリで実現されています。
index.htmlの<script>タグでは、p5.jsやml5.jsに加え、ダウンロードしたサンプルファイルのlibフォルダにあるp5.speech.jsも読み込むように記述します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@0.1.3/dist/ml5.min.js" type="text/javascript"></script>
<script src="lib/p5.speech.js"></script>
sketch.js
let classifier;
let video;
// 新しいp5.Speechオブジェクトを作成する。
// 使用する言語や音声のレート、ピッチ、ボリュームを制御することもできる。
// 詳細は次のリンクを参照:http://ability.nyu.edu/p5.js-speech/
const myVoice = new p5.Speech();
function setup() {
noCanvas();
// 喋る言語を日本語に設定
myVoice.setLang('ja');
// カメラ入力を作成
video = createCapture(VIDEO);
// ml5.imageClassifier()メソッドを、MobileNetとビデオ(p5のvideo要素)で初期化
classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}
function modelReady() {
// モデルの準備ができたらその状態を示す
select('#status').html('モデルの準備完了');
// classifyVideo()関数を呼び出して、ビデオの分類を開始する。
classifyVideo();
}
// 現在のビデオフレームに関して、推測を得る
function classifyVideo() {
classifier.predict(gotResult);
}
// 結果が得られたら
function gotResult(err, results) {
// 結果は、確率の順に配列に入っている
select('#result').html(results[0].className);
select('#probability').html(nf(results[0].probability, 0, 2));
myVoice.speak(`これは${results[0].className}だと推測`);
classifyVideo();
}
コンピュータに日本語を喋らせるには、new p5.Speech()で作成したp5.Speechオブジェクト(myVoice)から、setLang(‘ja’)を呼び出します。これにより、たとえば、
myVoice.speak(`これは${results[0].className}だと推測`);
の「これは」と「だと推測」を日本語で喋るようになります。しかし今の場合、${results[0].className}に入るのは英語なので、カメラにスマホを写した場合、「スマートフォン」や「携帯電話」とは言わず、「cellular phone」、「cellular telephone」としゃべります。