質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.03%

  • Visual Studio

    1488questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • Cordova

    361questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

cordova-pugin-mediaを利用するとReferenceError: Media is not definedエラーになります。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 166

shumai.gyoza

score 4

前提・実現したいこと

Microsoft Visual Studio Community 2017 と Visual Studio Tools for Apache Cordova にてハイブリッドアプリ作成を勉強中です。
cordova-pugin-mediaを利用してオーディオ ファイルを再生したいと思い簡単なプログラムを作成したのですが、Googleエミュレーターで実行すると下記エラーメッセージのエラーになってしまい、プログラムの実行が先に進まない状態になってしまいます。
デバッグ用にコピーされたファイルなどを確認してみたところ、cordova-pugin-deviceのブラグインファイルなどは存在しましたが、cordova-pugin-mediaのファイルは見当たりませんでした。
何か手順が間違っているのかと思い、googleで検索して調べてみましたが、解決方法が見つからず質問させていただきました。
どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

ReferenceError: Media is not defined ...
ReferenceError: Media is not defined
at new MediaRecordController (file:///android_asset/www/scripts/controllers/MediaRecordController.js:47:25)
at Object.instantiate (file:///android_asset/www/scripts/angularjs/angular.js:5055:14)at lazyCompilation (file:///android_asset/www/scripts/angularjs/angular.js:9430:25)

該当のソースコード

・index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
      <link rel="stylesheet" type="text/css" href="css/index.css">
            <script type="text/javascript" src="scripts/jquery/jquery-3.2.1.js"></script>
            <script type="text/javascript" src="scripts/bootstrap/bootstrap.js"></script>
            <script type="text/javascript" src="scripts/angularjs/angular.js"></script>
            <script type="text/javascript" src="scripts/angularjs/angular-ui-router.js"></script>
            <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">

      <title>ch09 Media</title>
  </head>
    <body ng-controller="AppController">
        <div ng-hide="ready">
            <span>デバイスはまだ準備中です</span>
        </div>
        <div ns-show="ready" ng-cloak>
            <div ui-view></div>
            <nav class="navbar-fixed-bottom">
                <div class="btn-group btn-group-justified">
                    <a class="btn btn-default" ui-sref="media">Media</a>
                    <a class="btn btn-default" ui-sref="capture">MediaCatpure</a>
                </div>
            </nav>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
        <script type="text/javascript" src="scripts/main.js"></script>
        <script type="text/javascript" src="scripts/controllers/AppController.js"></script>
        <script type="text/javascript" src="scripts/controllers/MediaRecordController.js"></script>
        <script type="text/javascript" src="scripts/controllers/MediaCaptureController.js"></script>
    </body>
</html>

・index.js

(function () {
    document.addEventListener('deviceready', function () {
        angular.bootstrap(document, ["main"]);
    }, false);
}());

・main.js

(function(){
    var module = angular.module('main',[
        'main.controllers',
        'cdv.mediacapture',
        'cdv.media.record',
        'ui.router'
    ]);

    module.config(function($stateProvider,$urlRouterProvider){

        $stateProvider.state('media',{
            url : '/media',
            controller : 'MediaRecordController',
            templateUrl : 'views/record.html'
        });

        $stateProvider.state('capture',{
            url : '/capture',
            controller : 'MediaCaptureController',
            templateUrl : 'views/capture.html'
        });

        $urlRouterProvider.otherwise("/media");
    });
}());

・MediaRecordController.js

(function () {
    var module = angular.module('cdv.media.record', []);

    function MediaRecordController($scope) {

        var mediaOk = false;
        var isRec = false;
        var timer;

        $scope.duration = 0;
        this.mediaSuccess = function () {
            console.log("media success");
        };

        this.mediaError = function (e) {
            window.alert("Error :" +  e.code);
            console.log(e);
        };
        this.mediaStatus = function (status) {
            console.log("record status updated " + status);
            if(status != Media.MEDIA_NONE){
                mediaOk = true;
            }
            if(status == Media.MEDIA_RUNNING){
                if(isRec) {
                    timer = setInterval(function () {
                        media.getCurrentAmplitude(function (sec) {
                            $scope.$apply(function () {
                                $scope.current = sec;
                            });
                        });
                    }, 200);
                }
            }
            else if(status == Media.MEDIA_STOPPED){

            }
        };
        var src;
        if(device.platform == 'iOS'){
            src = "record.wav";
        }
        else {
            // aacもAndroidのバージョンによって使えるようです
            src = "record.amr";
        }
        var media = new Media(src, this.mediaSuccess, this.mediaError, this.mediaStatus);//←エラー発生箇所
        $scope.current = 0;

        $scope.play = function () {
            media.play();
        };

        $scope.start = function () {
            isRec = true;
            media.startRecord();
        };
        $scope.pause = function () {
            media.pause();
        };
        $scope.stop = function () {
            media.stopRecord();
        };

        $scope.$on('$destroy', function () {
            if(timer){
                clearInterval(timer);
                timer = null;
            }
            if (mediaOk) {
                media.release();
            }
        });

    };
    module.controller('MediaRecordController', ['$scope', MediaRecordController]);
}());

試したこと

デバッグ用にコピーされたファイルなどを確認してみたところ、cordova-pugin-deviceのブラグインファイルなどは存在しましたが、cordova-pugin-mediaのファイルは見当たりませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

・開発ツール
Microsoft Visual Studio Community 2017 Versiion 15.4.3
Visual Studio Tools for Apache Cordova 15.120.6728.2

・NuGetパッケージ
Angular.UI.UI-Router ... 0.4.2
angularjs .............. 1.6.6
bootstrap .............. 3.3.7
jQuery ................. 3.2.1

・ツールセット
Cordova ............ 6.3.1
node.js ............ 4.4.3
npm ................ 2.15.0
cordova-simulate ... 0.3.12

・Cordovaプラットフォーム
cordova-android ... 5.2.1
cordova-ios ....... 4.2.0
cordova-windows ... 4.4.2

・プラグイン
cordova-pugin-device ...... 1.1.6
cordova-pugin-media ....... 3.0.1
cordova-pugin-whitelist ... 1.2.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 91.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Visual Studio

    1488questions

    Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

  • Cordova

    361questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。