はじめに
前回はスマートフォンを使って家に居るワンちゃんの確認が出来るように監視カメラの作成を行いました
今回は外から家でお留守番中のワンちゃんに呼びかけるための音声再生機能を追加したいと思います
音声再生について
・大きく以下の機能追加が必要となります
1.スマートフォンのマイクを使用して音声を取得する
2.取得した音声を再生する
【マイクの利用方法】
SpeechRecognition APIを使用することでマイクの音声認識が可能になります
使用方法のソースは下記になります
SpeechRecognitionサンプル
<html>
<head>
<META http-equiv='Content-Type' content='text/html;charset=utf-8'>
<title>SpeechRecognitionサンプル</title>
<script>
let SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
let rec = new SpeechRecognition();
function load() {
rec.lang = 'ja-JP';
rec.continuous = false;
rec.interimResults = false;
rec.onresult = function(e) {
for (let i=e.resultIndex; i<e.results.length; i++) {
if (!e.results[i].isFinal) continue
document.getElementById( 'text' ).value = e.results[i][0].transcript;
}
}
rec.onend = () => {
document.getElementById('button').disabled = false;
}
}
// マイク入力ボタン押下
function voiceWaitStart(e) {
rec.start(); // マイク待ち受け開始
e.disabled = true;
}
window.onload = load;
</script>
</head>
<body>
<input type='button' id='button' name='button' onClick='voiceWaitStart(this);' value='マイク入力'>
音声入力結果：<input type='text' id='text' name='text'>
</body>
</html>
■ポイント
- マイク入力のボタンを押すとマイクの使用許可のダイアログが表示されるので【許可】を選択します
- マイクに音声が入力されるとonresultのコールバックメソッドが実行されるので、そこで音声を文字列に変換しています
- 変換に成功したらテキストフィールド枠に文字列としてセットしています
【音声再生】
音声再生はspeechSynthesis APIを使用します
使用方法のソースは下記になります
speechSynthesisサンプル
<html>
<head>
<META http-equiv='Content-Type' content='text/html;charset=utf-8'>
<title>音声再生サンプル</title>
<script>
function load() {
// 音声選択リスト作成
if (window.speechSynthesis) {
let voices = [];
function setVoices() {
if (voices.length) return;
voices = speechSynthesis.getVoices();
if (!voices.length) return;
let cnt = 0;
let objVoise = document.getElementById( 'select_voice' );
voices.filter( v => v.lang.startsWith('ja') ).forEach(v => {
let opt = document.createElement( 'option' );
opt.text = v.name;
opt.voice = v;
objVoise.appendChild( opt );
if (cnt == 0) {
objVoise.selectedIndex = 0;
cnt = 1;
}
});
}
speechSynthesis.addEventListener( 'voiceschanged', setVoices );
setVoices();
}
}
// 音声再生ボタン押下
function voiceStart() {
const objVoiceText = document.getElementById( 'text_voice' );
if (objVoiceText.value !== '') {
console.log( '音声再生実行::'+objVoiceText.value+'' );
const uttr = new SpeechSynthesisUtterance( objVoiceText.value );
let opt = document.getElementById( 'select_voice' ).selectedOptions;
uttr.voice = opt[0].voice;
uttr.lang = uttr.voice.lang;
speechSynthesis.speak( uttr ); // 音声を読み上げる
}
}
window.onload = load;
</script>
</head>
<body>
音声入力：<input type='text' id='text_voice' name='text_voice'>
<input type='button' value='音声再生' onClick='voiceStart();'>
<br />
音声選択：<select id='select_voice' name='select_voice'></select>
</body>
</html>
■ポイント
- speechSynthesis.getVoicesメソッドを実行すると、使用可能な音声の一覧が取得出来るので更にそこから言語にjaが含まれているものを抽出し、日本語で再生可能な音声だけを選択リストにセットしています
- 入力されたテキストをSpeechSynthesisUtteranceオブジェクトに渡すことで音声再生されます
サンプル
今回追加した2つの機能を合わせたサンプルを作成しました
マイク入力ボタンを押した後、話しかけると入力結果欄に文字列として入力されます
その後、音声再生ボタンを押下すると再生されます
See the Pen Qiita29_sample by nojima (@noji505) on CodePen.
最後に
今回作成した機能を組み込んで、ワンちゃんを撮影しているスマートフォンから
音声を再生させることが出来るようになりました
再生させるとカメラの方に視線を向けてくれるので、きっと安心してくれていると思います
これでお留守番中の寂しさが軽減されたと思うので良かったです
(単に不思議なだけかもしれませんが..ｗ)