2014-10-23 26 views
7

Spero di registrare un po 'di audio e quindi avere la possibilità di riprodurlo. È importante per me essere in grado di customize the record interface.API Media Phonegap - Registrazione e riproduzione audio - Android

Nell'esempio seguente dopo la registrazione ottengo una durata di -1 e non viene riprodotto alcun audio.

Fase 1. Aggiunto Media Plugin

cordova plugin add org.apache.cordova.media 

Fase 2. My Code

Nota src è "amr" come richiesto dalla documentazione.

I dispositivi Android registrano l'audio in formato Adaptive Multi-Rate. Il file specificato dovrebbe terminare con un'estensione .amr.

Tuttavia, "myrecording.amr" non esiste nella struttura del mio file come spero che verrà creato.

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> 

uscita From Above

audio non viene riprodotto quando si fa clic il gioco.

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

Qualsiasi aiuto sarebbe molto apprezzato. Fammi sapere se posso rispondere a qualsiasi domanda.

risposta

7

Ecco i miei passi per far funzionare tutto questo.

1. Eseguire questi comandi

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

2.Creare RecordTest/www/myrecording.wav

3. Incollare il codice di seguito in 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. Eseguire ionic emulate ios

È possibile che questo dovrebbe funzionare.

Nota: le variazioni di estensione a seconda della piattaforma che si sta sviluppando per

+0

Grazie daniel !. Sei un risparmiatore di vita. –

+0

Ciao, ho una domanda. Hai aggiunto ios qui e non Android. Quindi questo riguarda la registrazione di ios? –

+0

Ha funzionato per Android? –

2

sto lavorando con qualcosa di simile con ionicframworkf e PhoneGap plugin .. Ho costruire una fabbrica Record per:

StartRecord, stopRecord, playRecord e salvare record al server ... Questo è il mio file della famiglia:

/** 
* 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 
    }; 
}]); 

il mio progetto è su GitHub se si desidera controllare come a implementare questa fabbrica:

https://github.com/cmarrero01/famvoice

È necessario eseguire il checkout del ramo di sviluppo.

Spero che sia utile per voi. :)

PH: Ho notato questa domanda sulla richiesta di codice, ma non sono un buon oratore inglese. :)

+0

Grazie mille. L'ho guardato brevemente e quando mi ci tufferò ti farò sapere se ha funzionato. Sei il migliore! –

+0

Il benvenuto :). Controlla il mio progetto su githup, sono sicuro che sarà utile per te. :). – cmarrero01

+0

Non sono sicuro se il repository è aggiornato. Vedo solo due commit dentro di esso. "070c0dc Init apps, server init, struttura delle cartelle 0c3de11 commit iniziale." Tuttavia, il file pubblicato sopra è utile, vedrò se riesco a farlo funzionare. –