Phonegap Media API - Record and Play Audio - Android

后端未结

关注

 2  1308

I\'m hoping to record some audio and then have the ability to play it back. Its important for me to be able to customize the record interface.

In the below example afte

相关标签:

2条回答

忘了有多久

2021-02-16 00:42

I'm working with something similar with ionicframworkf and phonegap plugins.. I build a Record Factory for:

startRecord, stopRecord, playRecord and Save record to the server... This is my factory file:

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

My project is on GitHub if you want to check how I implement this factory:

https://github.com/cmarrero01/famvoice

You will need to checkout the development branch.

I hope that is ussesful for you. :)

PH: I notice this question on codementor request, but I'm not a good english speaker. :)

0 讨论(0)

说谎

2021-02-16 00:47

Here are my steps for getting this to work.

1. Run these commands

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

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

3. Paste the below 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" 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. Run `ionic emulate ios`

The above should work.

Note: the extension changes depending on the platform you're developing for

0 讨论(0)

Phonegap Media API - Record and Play Audio - Android

1. Run these commands

2. Create RecordTest/www/myrecording.wav

3. Paste the below code in RecordTest/www/index.html

4. Run ionic emulate ios

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

3. Paste the below code in `RecordTest/www/index.html`

4. Run `ionic emulate ios`