かならずお読みください→
前回と前々回の結果、マイクから録音してその結果を音声ファイルとして保存できるようになりました。サンプルをお試しになった方はもう何回か声を録音して音声ファイルをいくつか保存されたことと思います。これでVOCAの基本機能のうち録音と保存ができるようになりました。
そして保存した音声ファイルを再生して聞いた時多分こう思ったのではないでしょうか。
『うまく話すのはなかなかかんたんじゃあないな。まるで自分の声じゃないみたいに聞こえる。』
そのとおりです。簡単そうに思っても、いい録音をするには少し練習も必要です。練習の方は皆さんにおまかせするとして、今回は再生に取り組むことにします。
このサイトではこれまで音の再生に何度か取り組んで来ました。音声ファイルの再生のほか合成音声もやりました。思いのほかかんたんにできることもありますし反対に非常に苦戦して結局できなかったこともあります。
今回のVOCA音声出力は、WebAudioAPIでやってみようとしました。しかし作業をすすめるにつれてサンプルのコードがみるみる長大化し、さらに狙い通りに動作しない泥沼にハマリました。
『そんなときはもっとシンプルな方法がよろしいですよ』と貴重なアドバイスをいただき、手堅く方針を変え、audioタグをJavaScriptで制御する方法を使うことにしました。
おかげさまでindex.htmlは以下のようにぐっと短くまとめることができました。 今回もなかにjavascriptがコンパクトに入っています。
<!DOCTYPE html>
<html>
<head>
2 音再生テスト
</head>
<body>
PLAY WORD 1
PLAY WORD 2
</body>
</html>
このサンプルは下記にあります。
http://www.toyama-reha.or.jp/techno/engineering/enchant/testc4a/index.html
https://toyama-rt.github.io/enchant/testc4a/index.html
アクセスするとこのページトップのような画像が表示されます。
PLAY WORD 1 をクリックすると『こんにちは』と発声します。
PLAY WORD 2 をクリックすると『さようなら』と発声します。
Windows は、firefox chrome Edge で ubuntu は、firefox chrome chromium で android は、chrome firefox で動作を確認しています。
さて上記のサンプルは、index.htmlファイルと2つの音声ファイル（voice1.wav, voice2.wav）で構成されます。これらを同じ場所においてindex.htmlを動かすとご覧いただいたサンプルが実行できるのです。
しかしこれをどこに置いたらいいでしょう。選択肢は下の３つです。
音声ファイルはほとんどの場合問題になることはないと思いがちですが、名前や住所を録音すると間違いなく個人情報です。このようなものをWeb上に置くのは気が進みません。何かあったら困ります。そのため１番は断念しました。
Web上のhtmlからローカルなファイルを読み書きすることはグレーな行為とみなされます。一部のブラウザではできません。これからこの方面も厳しくなることが予想されます。よって２番もやめました。そして消去法で３番の『両方共ローカルに保存する』ことになりました。
ローカルなhtmlファイルをパソコンで動かすのはかんたんです。ダブルクリックするだけです。
Android端末ではやや手間がかかります。
chromeかfirefox（androidブラウザでは音が出ません）を使い、アドレスバーに、htmlファイルのあるフォルダのパス（例えばDownloadフォルダの場合は、file:///sdcard/download など（ファイルマネージャで目的の場所を開くと正しいパスが表示されるので確認してください））を入力しENTERキーを押すとそのフォルダ内のファイルの一覧が表示されます。ここで表示させたい、index.htmlを長押しするとメニューが開きそこから、新しいタブで開くを選ぶと表示されます。
このほか、ファイルマネージャから目的のhtmlファイルをタップしてアプリケーションの選択からchromeやfirefoxを選んでも表示されます。
ここでブックマークをして次回以降はブックマークから開くと操作が楽になります。準備はやや手間がかかりますが使うときはとてもかんたんです。
ダウンロードして使用するサンプルはこちらからダウンロードできます。以下の3つのファイルを任意の同一フォルダに保存してください。一番目はページを表示するためのファイル、2番めと3番めは音声ファイルです。（下記のリンクを右クリック、リンク先を保存でダウンロードできます）
index.html
voice1.wav
voice2.wav
保存後、上で説明した方法でindex.htmlファイルを開いてください。これで、オンラインサンプルと同じことが、ローカルで実行できるようになります。
サンプルに使用するファイルが保存してありますので比較的簡単にいろいろなことができます。まず、前回前々回に録音したファイルの名前を変更して、voice1.wavにしてください。録音した声がサンプルから聞こえてきます。voice2.wavにすると二番目の声になります。（androidでファイル名を変更する際は、google playから、ファイルマネージャ＋を入手して使うと楽でした）
また、index.htmlファイルの17行目から38行目を注目してください。なんとなく規則性が見えるでしょう。もしかしてここらへんをゴニョゴニョしたら3番目の声が使えるかなと思った人はいいカンしています。そのとおりです。4番目も5番目も10番目も100番目もできます。
前回まででたくさん録音できるようになりました。また今回はたくさん再生もできるようになりました。
自由自在にVOCAはできるかの第三回目は録音した声の再生について説明しました。これでVOCAの基本、録音、保存、再生のすべてができるようになりました。どんな音でも声でも録音できます。かなりたくさん（多分何百種類（未確認です））録音できます。自由に選んで自由に再生できます。録音と保存と再生についてはこれで自由自在にできるようになりました。
index.htmlの中には、再生機能や表示機能が書き込んであります。ですが今回のサンプルでは画面表示を最低限にしてあります。
この殺風景なページに色々表示する方法は、まさにホームページのつくりかたそのものです。ですのですでに自分でお出来になるひとも少なくないと思います。またネットのあちこちにガイドやサンプルがたくさんありますのでこれらを参考にして、お使いになる方の都合や体調や好みに合わせて表現を整えることができれば、その方も気持ちよく使えることでしょう。
また別の見方をすると、使う人と力を合わせてVOCAという道具を仕上げていく取り組みそれ自体もなかなか価値のあることと思います。こうしようかどうしようかと相談する過程もとても貴重なコミュニケーションになります。これは使う人の近くにいて分かり合えている人にしかできない大切な役割ではないでしょうか。
今回ご紹介したのは技術的骨組み部分だけです。あとはお使いになる方々が自由に肉付けしていただければ幸いと考えます。
以上を持ちまして、自由自在にVOCAはできるか？をおわりたいと思います。
HTML5 audioタグでの音源の再生について
https://zxcvbnmnbvcxz.com/html5-audio-mute-play-skip/index.html
2018/06/22 公開
研究企画課リハ工学科にもどる