Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

マイクやカメラを使って音声・写真・ビデオデータを取得するプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第9回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/11/01 14:00

 前回は、Mediaプラグインを使ってオーディオの再生を主に紹介しましたが、今回は、引き続き録音する処理を紹介します。前回の続きとなりますので、プラグインのインストールから再生までは前回の記事を参照して下さい。続いて、手軽に録音、そして、写真撮影やビデオ撮影をしたデータが取得できるプラグインであるMediaCaptureプラグインを紹介します。このプラグインはUIを独自に作り込むことなどはできませんが、非常に手軽に組み込むことができます。録音する際にUI部分の作り込みができなくても問題がなければ、Mediaプラグインよりも使いやすいプラグインです。

目次

対象読者

  • スマホアプリに挑戦したいと思っているWeb開発者
  • アプリ開発をもっと楽にしたいと思っている方
  • 業務スマホアプリを作る開発者

Mediaプラグインを使ったマイクからの音声を録音する

 前回の続きでMediaプラグインを使って録音を行うサンプルで、図1のようなマイクの音声を録音するサンプルを作成します。

図1 録音するアプリ
図1 録音するアプリ

 このサンプルで利用するAPIを表1に示します。

表1 使用するAPI一覧
関数 説明
startRecord() 録音を開始する
stopRecord() 録音を停止する
getCurrentAmplitude(callback) 現在のマイクから取得する振幅(音の大きさ)を取得する

 これらのAPIを使ったサンプルコードがリスト1のようになります。

リスト1 マイクから録音するコード(www/js/controllers/MediaRecordController.jsの抜粋)
function RecordController($scope) {
    var isRec = false;
    var timer;

    // : 省略
    this.mediaStatus = function (status) {
        if(status == Media.MEDIA_RUNNING){
            if(isRec) {
                timer = setInterval(function () {
                    //(1)録音時の振幅値を取得する
                    media.getCurrentAmplitude(function (sec) {
                        $scope.$apply(function () {
                            $scope.current = sec;
                        });
                    });
                }, 200);
            }
        }
        else if(status == Media.MEDIA_STOPPED){

        }
    };
    var src;
    //(2)iOSの時のファイル名
    if(device.platform == 'iOS'){
        src = "record.wav";
    }
    else {
        //(3)Androidの時のファイル名 ( aacもAndroidのバージョンによって使えるようです )
        src = "record.amr";
    }
    var media = new Media(src, this.mediaSuccess, this.mediaError, this.mediaStatus);
    $scope.current = 0;

    $scope.start = function () {
        isRec = true;
        //(4)録音スタート
        media.startRecord();
    };
    $scope.stop = function () {
        //(5)録音ストップ
        media.stopRecord();
    };
    // : ( 省略 )
};

 おおよその流れは再生の時と同様です。(1)では録音時の振幅つまり、マイクが拾う音の大きさをgetCurrentAmplitude関数を使って取得します。この値が取得できるのは録音中のため、MEDIA_RUNNINGのステータスに変わったときにタイマー処理で定期的に処理をします。

 そして、録音するファイルはiOSの場合には(2)のように必ずwavフォーマットになり、Androidの場合にはamrフォーマットという形式になります。拡張子もそれに併せて、必ずwavもしくはamrにします。Androidの場合にはドキュメントには明記されていないものの、aac形式も使えるようです。ただし、ドキュメントにはamrのみと記載があるので、そのように指定したほうが良いでしょう。

 録音の開始は(4)のようにstartRecord関数で、停止は(5)のようにstopRecord()関数で行います。

 少々、ファイル名のルールに癖があることと、具体的にパスの指定方法に記載がなく、ファイルが保存される場所がわかりにくいのですが、Androidの場合には、cordova.file.externalRootDirectoryのパスに、iOSの場合には、cordova.file.tempDirectoryに指定したファイル名で保存されるようです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5