かならずお読みください→

多様なVOCAを自由自在に作る！そんなことできるのか？

第１回　録音

１　はじめに　VOCAの抱える問題点

VOCA（音声出力型コミュニケーションエイド）は、ことばに困難がある場合の代替手段として広く使われています。ネットでしらべるといくつかの商品が流通しているのがわかります。

しかしコミュニケーションに困難をもつひとが、抱える問題や制限条件も、使う目的もそしてニーズもかなり多様です。例えばどんな風にしたいのか、なりたいのかと話し合っても、ご本人や家族や関係者で微妙に（時には大幅に）異なることがよくあります。関係者の人数が増えるとますます多様になり、ついにはとりとめもないことになってきます。やりたいことと、やらせたいことと、やってほしいこと、そして実際にやることとできることはなかなか一致しにくいものです。

それもそのはず、『コミュニケーション』というひとつのことばでくくれるほど実際のコミュニケーションは単純ではありません。その人により、相手や、場所や、話題により、多様なコミュニケーションがいろいろな事情でその人の中に閉じ込められています。そんな場合に使う道具がコミュニケーションエイドで、そのひとつの種類がVOCAと呼ばれることばの出る機械です。ただよせられる期待が幅広く大きいわりには、機能も種類もそれほど多くなく、使いこなしの能力も工夫の余地も多くありません。さらにここでは説明しませんが活用するにはそれを使うひとの不自由に合わせた工夫も必要ですがこれも十分とはいえません。

このようにやりたいことはいろいろあるのに、足りないものはたくさんありすぎるのがVOCAの問題の特徴です。

２　多様なVOCAを作るには

問題のひとつ、多様なVOCAを従来の方法で作るといろいろ問題があります。まず多品種少量生産がビジネスとして成り立つか。製造、流通そしてユーザが購入できるか。持ち運べるか。使いこなせるか。受け入れられるか。赤字を出したり会社がつぶれたりしたらとても困ります。

この問題はコミュニケーションエイドでエンチャント文字盤が解決しようとしたことと同じです。こたえは、『スマホ（パソコンやタブレットでも可）をVOCAに変身させる』です。そしてＡ型VOCAからＢ型へＣ型、Ｄ型．．．次々と変身させるとこの問題を解決に近づけることができると考えました。

３　VOCAの基本的機能

考えたことを実現するために下準備が必要です。まずVOCAの基本的な機能を整理します。

録音
保存
再生

基本的機能はこのようにかなりシンプルです。あとは扱えることばの数や再生するときの工夫が必要ですがこれらは比較的簡単です。まず最初の難関は録音と保存とにらんで、ひとつのことばを録音して保存することを目標にしました。

４　録音の方法

例によって、HTML5とJavaScriptで録音の方法を調べてみました。いくつか方法があってそれぞれの優劣も特徴もつかみきれません。これ以上は自分で実際にやってみないとわかりませんのでやってみることにしました。

最初に目星を付けたのは、MediaStreamRecoder.js を使う方法です。対応するブラウザが多いこと、androidにも対応しているらしいことが理由です。さっそく先人の苦労を勉強しながら組み立ててみました。

index.html は以下の通り。

<!DOCTYPE html>
<html>
<head>

VOCA　録音テスト
</head>
<body>
REC をクリック後、5秒間録音します
録音終了後、再生します
その後、download をクリックするとwavファイルがダウンロードできます

    
    



</body>
</html>

index.js は以下の通り。

    var recControl = function(){
        navigator.getUserMedia(
            {
                video: false,
                audio: true
            },
            function(stream){
                el.rec.textContent = 'now Recording...';
                el.rec.disabled = true;
                var recorder = new MediaStreamRecorder(stream);
                recorder.mimeType = 'audio/ogg';
                recorder.ondataavailable = function (blob) {
                    var audio_el = document.createElement("audio");
                    var url = audio_el.src = URL.createObjectURL(blob);
                    audio_el.play();
                    recorder.stop();
                    stream.stop();
                    el.rec.textContent = 'REC';
                    el.rec.disabled = false;
     
                    //download link
                    el.download.href = url;
                    el.download.textContent = 'download';
                    el.download.download = 'output.wav';
                };
                recorder.start(5000);
            },
            function(err){
                console.log(err.name ? err.name : err);
            }
        );
    }
    var el = {
        rec : document.querySelector('.rec'),
        download: document.querySelector('.download')
    }
    el.rec.addEventListener('click', recControl, false);

そしてMediaStreamRecoder.js は参考URLを開き、右の緑の、Clone or download からzipファイルで入手できます。

５　サンプル

サンプルは下記にあります。

http://www.toyama-reha.or.jp/techno/engineering/enchant/test2/index.html

https://toyama-rt.github.io/enchant/test2/index.html

アクセスするとこのページトップのような画像が表示されます。RECボタンをクリックすると5秒間録音し、その後再生します。またdownloadをクリックするとwavファイルが保存されます。

Windows　は、firefox　chrome　Edge　で
ubuntu　は、firefox　chrome　chromium　で
android　は、chrome　で動作を確認しています。

chrome　や　chromium　をお使いの場合は、二番目のリンクをお使いください。httpsでないと動作しません。またマイクがないと動作しません。

６　おわりに

ここで取り上げたVOCAは、｢音声録音再生型VOCA｣とでも分類される機種です。今回のサンプルで録音と保存ができるようになりました。今回はMediaStreamRecoder.jsを利用しましたが、これはマイクから音声以外にカメラから動画や静止画像も取り込み機能もあります。また録音の方法はこれ以外にもありますので、さらに試作を重ねて行きたいと思います。

参考URL

JavaScriptでの録音について
http://www.cyokodog.net/blog/media-capture-and-streams-web-audio-api/

MediaStreamRecoder.js　について
https://github.com/streamproc/MediaStreamRecorder

2018/05/25　公開

2018/06/01　コード追記

研究企画課リハ工学科にもどる

多様なVOCAを自由自在に作る！そんなことできるのか？

第１回 録音

１ はじめに VOCAの抱える問題点

２ 多様なVOCAを作るには

３ VOCAの基本的機能

４ 録音の方法

５ サンプル

６ おわりに