Phonegap Medien-API - Record-und Play-Audio - Android

Ich hoffe, aufzeichnen von audio und dann haben die Fähigkeit, es zu spielen zurück. Für mich wichtig, in der Lage sein, um passen Sie die Datensatz-Schnittstelle.

In dem Beispiel weiter unten nach der Aufnahme bekomme ich eine Dauer von -1 und kein audio abgespielt wird.

Schritt 1.
Hinzugefügt Media Plugin

cordova plugin add org.apache.cordova.media

Schritt 2. Mein Code

Hinweis src ist "amr", wie angefordert von Google docs.

Android-Geräte aufnehmen audio im Adaptive-Multi-Rate-format. Die
angegebene Datei sollte am Ende mit einer .amr-Erweiterung.

Jedoch "myrecording.amr" gibt es nicht in meiner Datei-Struktur, die, wie ich hoffe, wird er erstellt.

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>

Ausgabe Von Oben

Kein audio abgespielt wird wenn ich auf spielen.

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

Jegliche Hilfe würde sehr geschätzt werden. Lassen Sie mich wissen, wenn ich kann alle Fragen beantworten.

InformationsquelleAutor Daniel Rasmuson | 2014-10-23

Hier sind meine Schritte für die Aufnahme dieser arbeiten.

1. Führen Sie diese Befehle

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

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

3. Fügen Sie den untenstehenden code 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" >
    -->

    <!-- 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. Führen Sie `ionic emulate ios`

Den oben funktionieren sollte.

Hinweis: die Endung ändert sich je nach Plattform Sie entwickeln für

Danke daniel!. Du bist ein Lebensretter.
Hallo, ich habe eine Frage. Sie hat den ios und nicht Android. So ist dies über ios-Aufnahme?
Hat es funktioniert für android?
Ich glaube nicht, dass es funktioniert in android. Nur .amr format wird unterstützt, wenn die Aufnahme.

InformationsquelleAutor Daniel Rasmuson

Arbeite ich mit so etwas wie mit ionicframworkf-und phonegap-plugins.. ich Baue einen Datensatz Fabrik für:

startRecord, stopRecord, playRecord und Datensatz Speichern auf dem server... Das ist meine Fabrik Datei:

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

Mein Projekt ist auch auf GitHub, wenn Sie möchten, um zu überprüfen, wie ich dies umsetzen Fabrik:

https://github.com/cmarrero01/famvoice

Müssen Sie der Kasse die Entwicklung Zweig.

Ich hoffe, dass ist ussesful für Sie. 🙂

PH: ich merke, diese Frage auf codementor Anfrage, aber ich bin kein guter Englisch-Sprecher. 🙂

Ich danke Ihnen so sehr. Ich schaute über das kurz-und wenn ich Tauchen Sie ein in es ich werde dich wissen lassen ob es geklappt hat. Du bist der beste!
Ihr herzlich willkommen :). Überprüfen Sie mein Projekt auf githup, ich bin sicher, dass es usedfull für Sie. :).
Nicht sicher, ob das repo ist aktuell. Ich sehe nur zwei commits drin sein. "070c0dc Init-apps, init server, Ordner-Struktur. 0c3de11 Initial commit." Aber die Datei, die oben gepostet ist hilfreich, ich werde sehen, ob ich bekommen kann, dass die Arbeit.
Hi Daniel, müssen Sie der Kasse die "Entwicklung" Zweig, ich bin nicht genug Zeit, um einen release noch. Aber die Aufzeichnung der Aktionen ist die Arbeit auf diesen Zweig. Clone das repo, und machen git checkout development wechseln Sie zu dem Zweig.
Nicht sicher, warum, dass hat in mir auftauchen. Ich sehe es jetzt. Danke. Ich werde es heute Abend ausprobieren.
Vielen Dank noch einmal. Das hat mir wirklich geholfen bekommen unstuck. Ich landete immer das Beispiel von cordova arbeiten. Ich werde die Struktur meiner Fabrik genauso wie dein Beispiel oben. Was ist Ihre hackhands? URL werde ich Lieblings Sie.
Sehr gut Daniel, Ihr willkommen. Wenn Sie Hilfe brauchen bei Ihren Projekten nicht heistate in Kontakt zu treten. Mein kleiner blog ist claudiomarrero.wordpress.com.

InformationsquelleAutor cmarrero01

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

1. Führen Sie diese Befehle

2. Erstellen RecordTest/www/myrecording.wav

3. Fügen Sie den untenstehenden code in RecordTest/www/index.html

4. Führen Sie ionic emulate ios

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

3. Fügen Sie den untenstehenden code in `RecordTest/www/index.html`

4. Führen Sie `ionic emulate ios`