SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • スマホアプリに挑戦したいと思っている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に指定したファイル名で保存されるようです。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
マイク・カメラの音声、映像をキャプチャーするプラグイン(1)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9701 2017/01/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング