Phonegap Media API – Grabar y reproducir audio – Android

Estoy esperando para grabar algo de audio y luego tener la capacidad de reproducirlo. Es importante para mí ser capaz de personalizar la interfaz de registro .

En el siguiente ejemplo después de la grabación obtengo una duración de -1 y no se reproduce ningún audio.

Cómo apagar el sonido MediaRecorder se reproduce cuando el estado cambia
Android: graba vídeo en la misma orientación independientemente de la orientación del dispositivo
Android desactivar "SignalStrength", etc para iniciar sesión LogCat
Android: cómo almacenar los valores de las variables en el registro?
¿Cuál es el significado del registro de la etiqueta: "szipinf" y el texto: "Initializing inflate state" de Logcat

Paso 1. Agregado Plugin de medios

cordova plugin add org.apache.cordova.media

Paso 2. Mi código

Nota src es "amr" como se solicita desde docs.

Los dispositivos Android graban audio en formato Adaptable Multi-Rate. El archivo especificado debe terminar con una extensión .amr.

Sin embargo, "myrecording.amr" no existe en mi estructura de archivos como estoy esperando que se creará.

Javascript

 var data = { rec: "" }; $scope.record = function(){ console.log('record'); var src = "myrecording.amr"; data.rec = new Media(src, function() { console.log("recordAudio():Audio Success"); }, function(err) { console.log("recordAudio():Audio Error: "+ err.code); }); data.rec.startRecord(); } $scope.stopRecording = function(){ console.log('stop'); data.rec.stopRecord(); } $scope.playRecording = function(){ console.log('play'); data.rec.play(); } $scope.logDuration = function(){ console.log(data.rec.getDuration()); }

HTML

 <button ng-click="record()">Record</button> <button ng-click="stopRecording()">Stop Record</button> <button ng-click="playRecording()">Play Record</button> <button ng-click="logDuration()">Log Duration</button>

Salida desde arriba

No se reproduce ningún sonido cuando hago clic en reproducir.

 0 999846 log record 1 001845 log stop 2 002000 log recordAudio():Audio Success 3 004657 log play 4 008989 log -1

Cualquier ayuda sería muy apreciada. Déjeme saber si puedo contestar cualquier pregunta.

Aquí están mis pasos para conseguir que esto funcione.

1. Ejecute estos comandos

 ionic start RecordTest blank ionic platform add ios cordova plugin add org.apache.cordova.media

2. Crear `RecordTest/www/myrecording.wav`

3. Pegue el siguiente código en `RecordTest/www/index.html`

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <!-- <script src="js/app.js"></script> --> <script type="text/javascript" charset="utf-8"> // Wait for PhoneGap to load // document.addEventListener("deviceready", onDeviceReady, false); // Record audio // function recordAudio() { var src = "myrecording.wav"; var mediaRec = new Media(src, onSuccess, onError); // Record audio mediaRec.startRecord(); // Stop recording after 10 sec var recTime = 0; var recInterval = setInterval(function() { recTime = recTime + 1; setAudioPosition(recTime + " sec"); if (recTime >= 3) { clearInterval(recInterval); mediaRec.stopRecord(); mediaRec.play(); } }, 1000); } // PhoneGap is ready // function onDeviceReady() { recordAudio(); } // onSuccess Callback // function onSuccess() { console.log("recordAudio():Audio Success"); } // onError Callback // function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } // Set audio position // function setAudioPosition(position) { document.getElementById('audio_position').innerHTML = position; } </script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <title>Device Properties Example</title> <!-- <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> --> <p id="media">Recording audio...</p> <p id="audio_position"></p> </ion-content> </ion-pane> </body> </html>

4. Ejecutar `ionic emulate ios`

Lo anterior debería funcionar.

Nota: la extensión cambia dependiendo de la plataforma que esté desarrollando para

Estoy trabajando con algo similar con plugins ionicframworkf y phonegap .. Construyo un Record Factory para:

StartRecord, stopRecord, playRecord y Save record en el servidor … Este es mi archivo de fábrica:

  /** * Record service * @module record * @author Claudio A. Marrero * @class famvoice */ services.factory('$record', [ '$rootScope', '$socket', '$account', function($rootScope, $socket, $account) { var enumerator = 0; var recordName = 'record-'+enumerator+'.mp3'; var mediaRec = null; var OnCallback = null; var OnAppendData = {}; /** * Start a record * * @method startRecord */ function startRecord(){ enumerator++; recordName = 'record-'+enumerator+'.mp3'; mediaRec = new Media(recordName, function() { }, function(err) { }); mediaRec.startRecord(); } /** * Stop record * * @method stopRecord */ function stopRecord(){ mediaRec.stopRecord(); } /** * Stop record * * @method stopRecord */ function playRecord(){ mediaRec.play(); } /** * Get the name of the record * * @method getRecord */ function getRecord(){ return recordName; } /** * Save the recorded file to the server * * @method save */ function save(callback,appendData){ OnCallback = callback; OnAppendData = appendData; window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, OnFileSystem, fail); } /** * Callback for setting the file system to persistent. * * @method OnFileSystem */ function OnFileSystem(fileSystem){ fileSystem.root.getFile(recordName, null, OnGetFile, fail); } /** * Callback for geting the file for disk * * @method OnGetFile */ function OnGetFile(fileEntry){ fileEntry.file(OnFileEntry, fail); } /** * Callback for file entry, this get the file. * * @method OnFileEntry */ function OnFileEntry(file){ var reader = new FileReader(); reader.onloadend = function(evt) { var image = evt.target.result; var base64Data = image.replace(/^data:audio\/mpeg;base64,/, ""); base64Data += base64Data.replace('+', ' '); $socket.emit('playlists:file',{file:base64Data,name:recordName, token: $account.token(), info:OnAppendData},OnCallback); }; reader.readAsDataURL(file); } /** * When any process of saving file fail, this console the error. * * @method OnFileEntry */ function fail(err){ console.log('Error'); console.log(err); } /** * Play record * * @method playRecord */ function playRecord(){ var mediaFile = new Media(recordName, function() { console.log("playAudio():Audio Success"); }, function(err) { console.log("playAudio():Audio Error: "+err); } ); // Play audio mediaFile.play(); } return { start: startRecord, stop: stopRecord, play:playRecord, name:getRecord, save:save }; }]);

Mi proyecto está en GitHub si quieres comprobar cómo implemento esta fábrica:

https://github.com/cmarrero01/famvoice

Usted tendrá que salir de la rama de desarrollo.

Espero que sea ussesful para usted. 🙂

PH: Me doy cuenta de esta pregunta en codementor solicitud, pero no soy un buen orador Inglés. 🙂