android - Phonegap Media API - 录制和播放音频 - Android

标签 android cordova media record

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

在下面的示例中,录制后的持续时间为 -1,并且没有播放音频。

第 1 步。 已添加 Media Plugin

cordova plugin add org.apache.cordova.media

第 2 步。我的代码

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

Android devices record audio in Adaptive Multi-Rate format. The specified file should end with a .amr extension.

但是,“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

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

最佳答案

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

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

以上应该有效。

注意:扩展根据您开发的平台而变化

关于android - Phonegap Media API - 录制和播放音频 - Android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26520308/

相关文章:

android - 尝试运行演示手机间隙应用程序时出现运行时错误

c# - 如何在 Windows 10 IoT 上的树莓派 2 上运行 phone-gap 应用程序

css - 尝试排列 Twitter、Pinterest 和 Facebook 按钮

cordova - 应用程序关闭时要捕获哪个事件?

android - ListSelector 适用于整个列表

java - Android - Eclipse 未部署新版本

android - BindingAdapter 不适用于 DataBinding

html - 使元素适合移动优先/媒体查询的问题

android - Android 媒体音量 Controller (不管它叫什么)的自定义主题?

android - 支持jvmTarget 1.8的安卓版本是多少?