ボイスレコーダー(ベータ版)の紹介〜Monaca Education「ツール」機能〜

お断り

以下の記事で紹介するMonaca Educationの機能「ボイスレコーダー」は、2024年5月時点ではベータ版(試用版)として提供しています。記事公開後、画面、機能や操作性が変更される場合があります。

ボイスレコーダー(Monaca Education)

Monaca Educationに組み込まれたツール「ボイスレコーダー」は、Webブラウザを動かしているPCのマイクを使って、音声を録音し、簡易編集(必要な部分の切り取り)を行えるツールです。

Monaca Educationに組み込まれた機能で、単体では利用できません。利用するためには、まず、Monaca Educationにログインする必要があります。

Monaca Educationへのログインには、アカウントが必要です。Monaca Educatinのアカウントを持っていない方は、こちらをご覧ください。

はじめてのMonaca Education(一般向け)

起動

Monaca Educatinにログインし、ダッシュボード画面でプロジェクトを作成するか、既存のプロジェクトを選択して、Monaca Education IDEを開きます。

画面上の「ツール」メニューから、「ボイスレコーダー」をクリックして、起動します。

すると、Monaca Education IDE画面の下部に、ボイスレコーダー機能が表示されます。起動直後は、マイクのアイコンが画面下部中央に表示されているのが見えるだけです。

録音の開始と停止

ボイスレコーダー画面の中央にある、マイクのアイコンをクリックすると、録音が始まります。

 

※初めてボイスレコーダー機能を利用するときは、WebブラウザがPCのマイクを利用することについて許可を与えるかどうか尋ねるポップアップが表示される場合があります。そのときは、許可を与えてください。

録音が始まって、音声が記録されると、その音声を表す波形が画面に表示されます。

その下には四角形のボタンが表示されます。

また、赤い丸印が点滅して、録音中であることを示します。

この四角形のボタンをクリックすると、録音を停止できます。

録音内容の再生

録音が終わった画面には、録音した音声の波形と、4つのアイコンが並びます。

左端にある、右向きの三角形のアイコンをクリックすると、録音データが再生されます。

※初めてボイスレコーダー機能を利用するときは、WebブラウザがPCのスピーカーを利用することについて許可を与えるかどうか尋ねるポップアップが表示される場合があります。そのときは、許可を与えてください。

簡易編集(必要な部分の切り取り)

左から2つ目にある、2つの曲尺を互い違いに重ねた形のアイコンは、録音データから必要な部分だけ切り出すツールです。

※「不要な部分を切り捨てる」のではなく、「必要な部分だけ切り取って残す」機能であることに注意してください。

クリックすると、音の波形の先頭部分に、クリーム色の網がかかります。

同時に、操作メニューの項目が減り、切り取りを確定するアイコンと、切り取りをキャンセルするアイコンの2つだけになります。

左右の端の縦棒は、ドラッグ操作で、左右に移動することができます。

音声データの中の、必要な部分(必要な音声がある部分)を、この左右の縦棒で挟み、

「切り出す」アイコンをクリックすると、範囲が確定されます。

選ばれた部分だけを残した形で、音の波形や、操作メニューが再表示されます(元のデータと同じだけの画面の横幅を使って、選んだ部分だけを取り出して表示するので、波形は少し横に延びたように見えます)。

なお、それぞれの画面でバツ印のアイコンをクリックすると、操作はキャンセルされます。

録音した直後の画面でバツ印のアイコンをクリックすると、録音データはクリアされ、録音をやり直すことになります。

切り取り操作の画面でバツ印のアイコンをクリックしたら、切り取り操作がキャンセルされ、元の録音データの表示に戻ります。

音声ファイルの保存

フロッピーディスクのアイコンをクリックすると、音声データを保存できます。

保存先はMonaca Education IDEで開いているプロジェクトの、フォルダwwwの下です。ファイル名は、保存操作をした瞬間の分・秒の数字(4桁)が割り当てられます。

下の例は、47分08秒に保存操作が行われました。

別の日・別の時刻に、別の音声ファイルを保存したとき、同じ名前・似た名前になる可能性があります。すると区別が面倒になるので、保存できたらすぐに分かりやすい名称に変更することをお勧めします。

音声ファイルの再生

このファイル(拡張子がwavのファイル)をダブルクリックすると、音声をプレビューする(試聴する)画面が表示されます。

「プレビュー」のラベルの部分をクリックすると、再生可能になります。

※三角矢印や、スピーカーアイコンの色が、灰色から黒に変わっていることを確認してください。

三角矢印をクリックすると、音声を再生できます。

音声データをアプリに利用する

Monaca Educationで開発するアプリケーションに、音声データを組み入れることができます。

以下に教材・参考資料を紹介します。

 

アプリ制作教材(ソーメンタイマー)

参考:音声を再生するアプリを作ってみよう 〜JavaScript版、Python(Brython)版サンプルアプリ〜

音声を組み合わせることで、(文章や画像による視覚的な方法に加えて)聴覚によるコミュニケーションができるようになり、より印象的なアプリケーションを作ることができるようになります。

Monaca Educationアプリで利用する音声データを作る際に、ボイスレコーダー機能は手軽で便利です。ぜひ利用してみてください。