Q&A
###前提・実現したいこと
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
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <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 *"> 5 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 7 <meta name="format-detection" content="telephone=no"> 8 <meta name="msapplication-tap-highlight" content="no"> 9 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 10 <link rel="stylesheet" type="text/css" href="css/index.css"> 11 <script type="text/javascript" src="scripts/jquery/jquery-3.2.1.js"></script> 12 <script type="text/javascript" src="scripts/bootstrap/bootstrap.js"></script> 13 <script type="text/javascript" src="scripts/angularjs/angular.js"></script> 14 <script type="text/javascript" src="scripts/angularjs/angular-ui-router.js"></script> 15 <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css"> 16 17 <title>ch09 Media</title> 18 </head> 19 <body ng-controller="AppController"> 20 <div ng-hide="ready"> 21 <span>デバイスはまだ準備中です</span> 22 </div> 23 <div ns-show="ready" ng-cloak> 24 <div ui-view></div> 25 <nav class="navbar-fixed-bottom"> 26 <div class="btn-group btn-group-justified"> 27 <a class="btn btn-default" ui-sref="media">Media</a> 28 <a class="btn btn-default" ui-sref="capture">MediaCatpure</a> 29 </div> 30 </nav> 31 </div> 32 <script type="text/javascript" src="cordova.js"></script> 33 <script type="text/javascript" src="scripts/platformOverrides.js"></script> 34 <script type="text/javascript" src="scripts/index.js"></script> 35 <script type="text/javascript" src="scripts/main.js"></script> 36 <script type="text/javascript" src="scripts/controllers/AppController.js"></script> 37 <script type="text/javascript" src="scripts/controllers/MediaRecordController.js"></script> 38 <script type="text/javascript" src="scripts/controllers/MediaCaptureController.js"></script> 39 </body> 40</html>
・index.js
JavaScript
1(function () { 2 document.addEventListener('deviceready', function () { 3 angular.bootstrap(document, ["main"]); 4 }, false); 5}());
・main.js
JavaScript
1(function(){ 2 var module = angular.module('main',[ 3 'main.controllers', 4 'cdv.mediacapture', 5 'cdv.media.record', 6 'ui.router' 7 ]); 8 9 module.config(function($stateProvider,$urlRouterProvider){ 10 11 $stateProvider.state('media',{ 12 url : '/media', 13 controller : 'MediaRecordController', 14 templateUrl : 'views/record.html' 15 }); 16 17 $stateProvider.state('capture',{ 18 url : '/capture', 19 controller : 'MediaCaptureController', 20 templateUrl : 'views/capture.html' 21 }); 22 23 $urlRouterProvider.otherwise("/media"); 24 }); 25}());
・MediaRecordController.js
JavaScript
1(function () { 2 var module = angular.module('cdv.media.record', []); 3 4 function MediaRecordController($scope) { 5 6 var mediaOk = false; 7 var isRec = false; 8 var timer; 9 10 $scope.duration = 0; 11 this.mediaSuccess = function () { 12 console.log("media success"); 13 }; 14 15 this.mediaError = function (e) { 16 window.alert("Error :" + e.code); 17 console.log(e); 18 }; 19 this.mediaStatus = function (status) { 20 console.log("record status updated " + status); 21 if(status != Media.MEDIA_NONE){ 22 mediaOk = true; 23 } 24 if(status == Media.MEDIA_RUNNING){ 25 if(isRec) { 26 timer = setInterval(function () { 27 media.getCurrentAmplitude(function (sec) { 28 $scope.$apply(function () { 29 $scope.current = sec; 30 }); 31 }); 32 }, 200); 33 } 34 } 35 else if(status == Media.MEDIA_STOPPED){ 36 37 } 38 }; 39 var src; 40 if(device.platform == 'iOS'){ 41 src = "record.wav"; 42 } 43 else { 44 // aacもAndroidのバージョンによって使えるようです 45 src = "record.amr"; 46 } 47 var media = new Media(src, this.mediaSuccess, this.mediaError, this.mediaStatus);//←エラー発生箇所 48 $scope.current = 0; 49 50 $scope.play = function () { 51 media.play(); 52 }; 53 54 $scope.start = function () { 55 isRec = true; 56 media.startRecord(); 57 }; 58 $scope.pause = function () { 59 media.pause(); 60 }; 61 $scope.stop = function () { 62 media.stopRecord(); 63 }; 64 65 $scope.$on('$destroy', function () { 66 if(timer){ 67 clearInterval(timer); 68 timer = null; 69 } 70 if (mediaOk) { 71 media.release(); 72 } 73 }); 74 75 }; 76 module.controller('MediaRecordController', ['$scope', MediaRecordController]); 77}());
###試したこと
デバッグ用にコピーされたファイルなどを確認してみたところ、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
あなたの回答
tips
プレビュー
