【问题标题】：Phonegap Media API - Record and Play Audio - AndroidPhonegap Media API - 录制和播放音频 - Android
【发布时间】：2014-10-23 02:23:23
【问题描述】：

我希望录制一些音频，然后能够播放。能够customize the record interface 对我来说很重要。

在下面的示例中，录制后我得到了 -1 的持续时间并且没有播放音频。

第 1 步。 已添加Media Plugin

cordova plugin add org.apache.cordova.media

第 2 步。 我的代码

注意 src 是文档要求的“amr”。

Android 设备以自适应多速率格式录制音频。这指定文件应以 .amr 扩展名结尾。

但是，我的文件结构中不存在“myrecording.amr”，因为我希望它会被创建。

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>

从上方输出

点击播放时不播放音频。

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

任何帮助将不胜感激。如果我能回答任何问题，请告诉我。

【问题讨论】：

标签： android cordova media record

【解决方案1】：

以下是我实现此功能的步骤。

1。运行这些命令

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

2。创建`RecordTest/www/myrecording.wav`

3。将以下代码粘贴到`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。运行`ionic emulate ios`

以上应该可以。

注意：扩展会根据您开发的平台而有所不同

【讨论】：

谢谢丹尼尔！你是救生员。
嗨，我有一个问题。您在此处添加了 ios 而不是 Android。所以这是关于ios录制的？
我认为它不适用于 android。录制时仅支持 .amr 格式。

【解决方案2】：

我正在使用与 ionicframworkf 和 phonegap 插件类似的东西。我建立了一个记录工厂：

startRecord、stopRecord、playRecord 并将记录保存到服务器...这是我的工厂文件：

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

如果你想查看我是如何实现这个工厂的，我的项目在 GitHub 上：

https://github.com/cmarrero01/famvoice

您需要检查开发分支。

我希望这对你有用。 :)

PH：我在 codementor 请求时注意到了这个问题，但我的英语不太好。 :)

【讨论】：

非常感谢。我简要地浏览了一下，当我深入研究它时，我会告诉你它是否有效。你是最棒的！
欢迎您:)。检查我在 githup 上的项目，我相信它会对你有用。 :)。
不确定 repo 是否是最新的。我只看到里面有两个提交。 “070c0dc 初始化应用程序、初始化服务器、文件夹结构。0c3de11 初始提交。”但是，上面发布的文件很有帮助，我会看看是否可以正常工作。
嗨丹尼尔，你需要检查“开发”分支，我还没有足够的时间发布。但是记录操作正在那个分支上工作。克隆 repo，并进行 git checkout development 以切换到该分支。
不知道为什么我会发生这种情况。我现在看到了。谢谢你。我今晚试试。

1。运行这些命令

2。创建RecordTest/www/myrecording.wav

3。将以下代码粘贴到RecordTest/www/index.html

4。运行ionic emulate ios

2。创建`RecordTest/www/myrecording.wav`

3。将以下代码粘贴到`RecordTest/www/index.html`

4。运行`ionic emulate ios`