javascript - 使用Phonegap,我想录制语音,停止录制,然后在Android中播放

标签 javascript android jquery html cordova

HTML 文件有 4 个按钮,分别是录音、停止录音、播放、停止播放。代码如下所示。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Cordova</title>
        <script type="text/javascript" charset="utf-8" src="scripts/cordova-1.9.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="scripts/jquery-1.7.2.min.js"></script>

        <script>
            $(document).ready(function(){
                $("#record").on("click", function(){
                    alert("record start");  
                    window.plugins.VoicePlugin.record(function(){alert("yo");}, 
                                                    function(){alert("yol");},
                                                    "voice.3gp");
                });

                $("#stoprecord").on('click', function(){
                    alert("record stop");
                    window.plugins.VoicePlugin.stoprecord(function(){},
                                                        function(){},
                                                        "voice.3pg");
                });

                $("#play").on("click", function(){
                    alert("play");
                    window.plugins.VoicePlugin.play(function(){},
                            function(){},
                            "voice.3pg");
                });

                $("#stopplay").on("click", function(){
                    alert("stop play");
                    window.plugins.VoicePlugin.stopplay(function(){},
                            function(){},
                            "voice.3pg");
                });
            }); 
        </script>
    </head>
    <body>
        <button id="record">Start Recording</button>
        <button id="stoprecord">Stop Recording</button>
        <button id="play">Start Playing</button>
        <button id="stopplay">Stop Playing</button>
    </body>
</html>

Android 插件部分是

package com.saxoo.voice;

import java.io.IOException;

    import org.apache.cordova.api.Plugin;
    import org.apache.cordova.api.PluginResult;
    import org.json.JSONArray;

    import android.media.MediaPlayer;
    import android.media.MediaRecorder;
    import android.util.Log;

/**
 * @author sbapp008
 *
 */
public class VoicePlugin extends Plugin {

    /* (non-Javadoc)
     * @see org.apache.cordova.api.Plugin#execute(java.lang.String, org.json.JSONArray, java.lang.String)
     */

    public static final String Record = "record";
    public static final String Play = "play";
    public static final String Stopplaying = "stopplaying";
    public static final String Stoprecording = "stoprecording";
    private static final String LOG_TAG = "AudioRecordTest";
    private static String mFileName = null;

    private static MediaRecorder mRecorder = null;
    private static MediaPlayer mPlayer = null;

    @Override
    public PluginResult execute(String action, JSONArray data, String callbackId) {
        PluginResult result = null;

        if(Record.equals(action)){ //data에 filename
            mRecorder = new MediaRecorder();
            mRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
            mRecorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
            mRecorder.setOutputFile(mFileName);
            mRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);

            try {
                mRecorder.prepare();
            } catch (IOException e) {
                Log.e(LOG_TAG, "prepare() failed");
            }

            mRecorder.start();

        } else if(Play.equals(action)){ //data에 filename 
            mPlayer = new MediaPlayer();

            try {
                mPlayer.setDataSource(mFileName);
                mPlayer.prepare();
                mPlayer.start();
            } catch (IOException e) {
                Log.e(LOG_TAG, "prepare() failed");
            }
        } else if(Stopplaying.equals(action)){
            mPlayer.release();
            mPlayer = null;
        } else{
            mRecorder.stop();
            mRecorder.release();
            mRecorder = null;
        }


        return null;
    }

}

重点是,我应该停留在一个记录、停止记录、播放和停止播放语音的 Activity 中。如果我使用phonegap,因为它只是通过插件发送一些字符串,所以每次都会创建和销毁MediaRecorderMediaPlayer对象。我按下 html 中的录制按钮,创建了 MediaRecorder 对象,但是按下停止录制按钮无法停止刚刚创建的 MediaRecorder 对象。这个问题有什么解决办法吗?

最佳答案

使用 Phonegap,我可以录制语音并播放录音,无需添加插件。 我只将 Phonegap Media 插件连接到我的应用程序,如下所示:

app/res/xml/config.xml

<plugin name="Media" value="org.apache.cordova.AudioHandler" />

app/AndroidManifest.xml

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

那里的代码:

<!DOCTYPE html>
<html>
  <head>
  <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8">

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>

    <script type="text/javascript">

        var deviceready = false;
        var mediaVar = null;
        var recordFileName = "recording.wav";
        function onBodyLoad()
        {        
            document.addEventListener("deviceready", onDeviceReady, false);
            deviceready = true;
        }

        $(document).ready(function(){

            //validation to check if device is ready is skipped

            $("#recordBtn").click(function(){
                record();                  
            });

            $("#playBtn").click(function(){
                play();
            });

            $("#stopBtn").click(function(){
                stop();
            });
        });

        function record()
        {
        if (mediaVar != null) {
                mediaVar.release();
            }
            createMedia(function(){
                status = "recording";
                mediaVar.startRecord();
            },onStatusChange);
        }

        function createMedia(onMediaCreated, mediaStatusCallback){
            if (mediaVar != null) {
                onMediaCreated();
                return;
            }

            if (typeof mediaStatusCallback == 'undefined') 
                mediaStatusCallback = null;

                mediaVar = new Media(recordFileName, function(){
                    log("Media created successfully");
                }, onError, mediaStatusCallback); 
                onMediaCreated();
        }

        function stop()
        {
            if (mediaVar == null)
                return;

            if (status == 'recording')
            {
                mediaVar.stopRecord();
                log("Recording stopped");
            }
            else if (status == 'playing')
            {
                mediaVar.stop();            
                log("Play stopped");
            } 
            else
            {
                log("Nothing stopped");
            }
            status = 'stopped';
        }

        function play()
        {
            createMedia(function(){
                status = "playing";
            mediaVar = new Media('/sdcard/'+recordFileName, function(){
                    log("Media created successfully");
                }, onError); 

                mediaVar.play();    
            });
        }

        function onStatusChange()
        {
        }

        function onSuccess()
        {
            //do nothing
        }

        function onError(err)
        {
            if (typeof err.message != 'undefined')
                err = err.message;
            alert("Error : " + err);
        }

        function log(message)
        {
            console.info(message);
        }
 </script>
  </head>
  <body onload="onBodyLoad()">
      Recorder<br>
      <input type="button" name="recordBtn" id="recordBtn" value="Record">
      <input type="button" name="stopBtn" id="stopBtn" value="Stop">
      <input type="button" name="playBtn" id="playBtn" value="Play">
  </body>
</html>

在 Android 设备上,PhoneGap 媒体对象具有以下未详细记录的重要行为 ( http://software.intel.com/en-us/articles/media-sample-using-phonegap#id_android ):

  • "my_audio = new Media('myRecording100.wav', onMediaCallSuccess, onMediaCallError)”:当“myRecording100.wav”不存在时, 将创建文件;当它存在时,它会打开它。
  • “my_audio.stopRecord()”:调用“stopRecord()”时,.wav
    媒体文件被移动到“/sdcard”文件夹。所以当检查之前是否 录制的 .wav 存在,代码应在“/sdcard”文件夹下查找。如果 它确实存在,它应该从
    打开文件 “/sdcard/myRecording100.wav”。

希望这对您有帮助。

关于javascript - 使用Phonegap,我想录制语音,停止录制,然后在Android中播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11305129/

相关文章:

javascript - 如何使用 Bootstrap 4 按钮组将最大值添加到复选框表单

javascript - 滚动离开网页顶部后为 div 设置动画

javascript - 管理通过ajax发送到php的表单数据+其他变量

javascript - 如何比较 JavaScript 中的变量值?

javascript - Dart 与 JavaScript 加载时间比较

javascript - 我可以从 JavaScript 查找用户代理吗?

javascript - 如何将序列化的 JSON 字符串包装在 'single quotes' 中

java - 通过 jni 调用在 android 上显示 toast 消息

java - 如何使用构造函数实例化android服务?

android - 无法运行项目应用程序(Gradle 构建失败)