在 Web 应用程序中访问本机音频播放和录制器控件

良思俊旭

在 Web 应用程序中访问本机音频播放和录制器控件

本教程可以帮助了解如何在 web 应用程序中访问本机 （或标准） 音频播放器控件（如播放、 暂停、 停止、 寻址）和音频录制控件 （如录制、 暂停和停止录制）。 当您想要在您的应用程序中为播放器控件创建自己的用户界面，并且想要使用现有的本机媒体播放器而不是实施 web 音频播放器，您可能需要本教程。 示例应用程序仅为音频播放和音频录制而执行。

为了满足我们的需求，我们需要创建一个 Tizen 混合应用程序项目，在该项目中，本机应用程序将是一个服务应用程序（没有 UI），并将在后台运行。 用户界面设计在 web 应用程序中完成。

Tizen MessagePort 设备的 API 提供与其他应用程序进行通信的功能，我们的应用程序使用相同的 API，用于 web 和本机应用程序之间的通信。
1 音频播放混合应用程序
1.1 Web 应用程序的实施

在 init 函数中，我们用各自的函数处理程序绑定播放和停止的 UI 控件按钮。 我们还在页面初始化中启动本机服务应用程序，以便您有可用的服务端口，并准备好从 web 应用程序侦听。 应用程序 API 的 launch 方法被调用来启动本机服务应用程序。

1. //First launch the service
   
2.    LaunchNativeService();
   
3. // Handle the play button
   
4.         $("#btn-play").bind("vclick", function(){
   
5.                 audioPlayPause();
   
6.                 return false;
   
7.         });
   
8. //  Handle the stop button
   
9.         $("#btn-stop").bind("vclick", function(){
   
10.                 stopPlayback();
    
11.                 return false;
    
12.         });

复制代码

作为启动本机服务应用程序的一部分，我们需要检查服务应用程序是否已在运行或者需要启动，您必须获取当前正在运行的应用程序列表或应用程序的上下文（如下所示）。

1. function LaunchNativeService() {
   
2.   try {
   
3.     tizen.application.getAppsContext(onGetAppsContextSuccess, onGetAppsContextError);
   
4.   } catch (exc) {
   
5.     console.log("Get AppContext Error");
   
6.    }
   
7. }

复制代码

在成功时， onGetAppsContextSuccess 方法将拥有当前正在运行的应用程序的上下文细节，如果服务应用程序未在运行，则本机服务将会启动。

1. function onGetAppsContextSuccess(contexts) {
   
2.         for (var i = 0; i < contexts.length; i++) {
   
3.             var appInfo = tizen.application.getAppInfo(contexts[i].appId);
   
4.             if(appInfo.id == gServiceAppId){
   
5.                 console.log("Running Service App found");
   
6.                 ServiceAppFound=true;
   
7.                 break;
   
8.              }
   
9.         }
   
10.         if (ServiceAppFound) {
    
11.             console.log("Service App found and ready to serve");
    
12.             // Now initialize the message ports
    
13.             console.log("Initializing message ports");
    
14.             initMessagePort();
    
15.         }else{
    
16.             console.log("Service app not ready, will launch the service now");
    
17.             launchServiceApp();
    
18.         }
    
19. }

复制代码

成功启动服务应用程序后，消息端口将被初始化，以与服务应用程序进行通信。

1. function launchServiceApp() {
   
2.         function onSuccess() {
   
3.             console.log("Service App launched successfully!");
   
4.             // Now initialize the message ports
   
5.             console.log("Initializing message ports");
   
6.             initMessagePort();
   
7.         }
   
8.         try {
   
9.             console.log("Launching [" + gServiceAppId + "]");
   
10.             tizen.application.launch(gServiceAppId, onSuccess, onError);
    
11.         } catch (exc) {
    
12.             alert("launch exc:" + exc.message);
    
13.         }
    
14. }

复制代码

作为消息端口初始化的一部分，我们创建本地消息端口对象实例并注册一个回调函数 onReceive 以从本机服务应用程序侦听。

1. gLocalMessagePort = tizen.messageport.requestLocalMessagePort(gLocalMessagePortName);
   
2.                 gLocalMessagePortWatchId = gLocalMessagePort.addMessagePortListener( function(data, remote) { onReceive(data, remote);});

复制代码

要将消息发送到本机服务应用程序，我们需要创建一个 RemoteMessagePort 接口的对象实例，并使用 sendMessage 方法来发送数据。

1. gRemoteMessagePort = tizen.messageport.requestRemoteMessagePort(gServiceAppId, gServicePortName);
   
2. 
   
3. function sendCommand(command)
   
4. {
   
5.    gRemoteMessagePort.sendMessage([ { key:"command", value:command } ], gLocalMessagePort);
   
6.    console.log("Sending: " + command);
   
7. }

复制代码

在从服务应用程序接收消息时，消息数据会被恢复为键值对，并进行相应处理。 在我们的例子中，我们只是登录到控制台，如果播放已从服务启动或停止。 如果接收到的消息是退出，则我们只需删除消息端口侦听器。

1. for(var i in data) {
   
2.    if(data[i].key == "server")
   
3.    message = data[i].value;
   
4.    }
   
5.    console.log("Received : " + message);
   
6.    if(message == "started"){
   
7.         console.log("Playback using native media player started");
   
8.    }else if(message == "stopped"){
   
9.         console.log("Playback stopped");
   
10.    }else if(message == "exit"){
    
11.          if(gRemoteMessagePort)
    
12.             gRemoteMessagePort = null;
    
13.          if(gLocalMessagePort) {                           gLocalMessagePort.removeMessagePortListener(gLocalMessagePortWatchId);
    
14.                         gLocalMessagePort = null;
    
15.           }
    
16.   }

复制代码

1.2 本机服务实现

播放器类 Tizen::Media:player 通过 RTSP 或 HTTP 提供从本地存储和服务器播放音频和视频内容的方法。 支持一般控件 （如播放、 暂停、 恢复、 停止、 控制音量和循环音频或视频内容）和更多计时方法。 示例应用程序演示如何使用播放、 暂停和停止等基本控件播放音频。

初始化服务应用程序

在 NativePlayerService.cpp，我们初始化服务消息端口和方法中的媒体播放器服务 OnAppInitializing 因为这是服务应用程序处于初始化状态时将被调用的函数。

1. // Initialize ServerMessagePort
   
2. __pMessagePort = new (std::nothrow) ServiceMessagePort();
   
3. TryReturn(__pMessagePort != null, false, "[E_FAILURE] Failed to create __pMessagePort.");
   
4. AppLog("__pMessagePort is created.");
   
5. 
   
6. r = __pMessagePort->Construct(LOCAL_MESSAGE_PORT);
   
7. TryReturn(IsFailed(r) != true, r, "[%s] Failed to construct __pMessagePort",     GetErrorMessage(r));
   
8. AppLog("__pMessagePort is constructed.");

复制代码

然后，我们创建并初始化媒体播放器对象，

1. __pMediaPlayer = new (std::nothrow) MediaPlayerService();
   
2. TryReturn(__pMediaPlayer != null, false, "[E_FAILURE] Failed to create __pMediaPlayer.");
   
3. AppLog("__pMediaPlayer is created.");
   
4. 
   
5. // Initialize Media player
   
6. __pMediaPlayer->InitPlayer();

复制代码

处理来自 web 应用程序的服务请求

服务消息端口的 OnMessageReceivedN 方法（在文件 ServiceMessagePort.cpp 中） 负责处理来自 web 应用程序的请求并将它传送到本机服务应用程序中。 方法接收（web 应用程序的）远程消息端口的信息和作为实例处理的消息 IMap 该消息包含唯一键，每个键映射到一个单一的值。 同样地，数据作为实例被发送回 web 应用程序 HashMap。

Imap 要从 web 应用程序检索请求数据的对象实例

1. String *pData = static_cast(pMessage->GetValue(String(L"command")));

复制代码

HashMap 将键值对中的数据发送到 web 应用程序的对象实例

1. HashMap *pMap = new HashMap(SingleObjectDeleter);
   
2. pMap->Construct();

复制代码

下面是我们如何检索所收到的数据值和将用户事件发送到服务应用程序本身的示例。

1. if (pData->Equals(String(L"start")))
   
2. {
   
3.     App* pApp = App::GetInstance();
   
4.     pApp->SendUserEvent(PLAYER_START, null);
   
5.     pMap->Add(new String(L"server"), new String(L"started"));
   
6. }

复制代码

处理媒体播放服务

服务应用程序定义方法中特定播放器请求的处理程序， OnUserEventReceivedN 当用户事件被该方法发送时，该请求会被异步调用 SendUserEvent 。
服务从消息端口处理程序接收采用事件形式的请求。 下面是我们示例应用程序中处理的两个播放器请求。

1. // Handle the media playback requests here
   
2. switch (requestId)
   
3. {
   
4.    case PLAYER_START:
   
5.          AppLog("Player start request received");
   
6.         if (__pMediaPlayer != null)
   
7.         {
   
8.            AppLog("Invoking Mediaplayer start process now...");
   
9.            __pMediaPlayer->PlayAudio();
   
10.         }
    
11.         break;
    
12. 
    
13.    case PLAYER_STOP:
    
14.         AppLog("Player start request received");
    
15.         if (__pMediaPlayer != null)
    
16.         {
    
17.            AppLog("Invoking Mediaplayer stop process now...");
    
18.            __pMediaPlayer->StopAudio();
    
19.         }
    
20.         break;
    
21. 
    
22.    case PLAYER_EXIT :
    
23.         Terminate();
    
24.         break;
    
25.    default:
    
26.         break;
    
27. }

复制代码

假设音频启动事件已被触发，且服务应用程序通过调用 MediaPlayerService 对象的 PlayAudio 方法处理该事件（在 mediaPlayerService 接口中处理实时播放），如下所示。

1. __pMediaPlayer->PlayAudio();

复制代码

PlayAudio 方法在 MediaPlayerService 类中被定义，如下所示。 如果正在进行播放，且对此函数的调用将暂停播放，这意味着相同的函数可切换播放和暂停功能。

1. result MediaPlayerService::PlayAudio(void)
   
2. {
   
3.     AppLog("Start play/pause function called");
   
4.     result r = E_SUCCESS;
   
5. 
   
6.    if (PlayerObj.GetState() == PLAYER_STATE_PLAYING)
   
7.    {
   
8.       // Pause the Playing
   
9.        r = PlayerObj.Pause();
   
10.        if (IsFailed(r))
    
11.        {
    
12.           return r;
    
13.        }
    
14.       AppLog("Audio paused");
    
15.    }
    
16.    else if ((PlayerObj.GetState() == PLAYER_STATE_PAUSED)
    
17.          || (PlayerObj.GetState() ==  PLAYER_STATE_OPENED)
    
18.          || (PlayerObj.GetState() == PLAYER_STATE_ENDOFCLIP)
    
19.          || (PlayerObj.GetState() == PLAYER_STATE_STOPPED))
    
20.    {
    
21.        AppLog("Setting volume");
    
22.        PlayerObj.SetVolume(80);
    
23. 
    
24.        AppLog("Starting playback");
    
25.        r = PlayerObj.Play();
    
26.        if (IsFailed(r))
    
27.        {
    
28.          return r;
    
29.        }
    
30.     }
    
31.      return r;
    
32. }

复制代码

2 音频录制器混合应用程序
2.1 Web 应用程序的实施

音频录制器页面提供用于录制、 设置、 停止录制和播放录制片段的选项。 在页脚中会演示如何实现这些功能。 选择设置选项后，将弹出一个对话框，提示您选择编解码器和录制质量。 javascript 代码中会提供了解用户选择的方法，但不会实施这些方法来与服务通信。 做法很简单，就像我们执行开始或停止录制选项的键值对命令一样。消息端口与本机服务实现通信的方法与音频播放功能实现通信的方法相同。

1.    
   
2.         
   
3. Settings
   
4.            
   
5. Record
   
6.            
   
7. Stop
   
8.            
   
9. Play
   
10.         
    
11.    
    
12.         
    
13. Quality
    
14.            
    
15. Codec

复制代码

2.2 本机服务实现
初始化录制器服务

在 NativeRecordService.cpp 文件中，我们创建和初始化音频录制服务。 作为初始化的一部分， AudioRecorder() 我们创建对象。

1. // Create Audio Recorder object
   
2.         __pAudioRecorderSer = new (std::nothrow) AudioRecorderService();
   
3.         TryReturn(__pMediaPlayer != null, false, "[E_FAILURE] Failed to create __pMediaPlayer.");
   
4.         AppLog("__pAudioRecorder is created.");
   
5. 
   
6.         // Create and Initialize Audio Recorder
   
7.         __pAudioRecorderSer->InitRecorder();

复制代码

处理录制器服务请求

下面是被定义的函数， AudioServiceRecorder.cpp可为音频录制执行逻辑。

1. result AudioRecorderService::StartAudioRecording(void)
   
2. {
   
3.         result res = E_SUCCESS;
   
4.         AppLog("StartAudioRecording called");
   
5.         String RecordedFilePath = Tizen::App::App::GetInstance()->GetAppRootPath() + L"data/recordedfile.amr";
   
6.         RecorderState state = __pAudiorecord->GetState();
   
7. 
   
8.         res = __pAudiorecord->CreateAudioFile(RecordedFilePath, true);
   
9.         if (IsFailed(res))
   
10.         {
    
11.            return res;
    
12.         }
    
13.         if ((RECORDER_STATE_INITIALIZED == state) || (RECORDER_STATE_OPENED == state) || \
    
14.                 (RECORDER_STATE_PAUSED == state) || (RECORDER_STATE_CLOSED == state) ||        \
    
15.                 (RECORDER_STATE_STOPPED == state))
    
16.         {
    
17.                 res = __pAudiorecord->Record();
    
18.                 if (IsFailed(res))
    
19.                 {
    
20.                    return res;
    
21.                 }
    
22.         }
    
23.         return res;
    
24. }

复制代码

音频录制器示例应用程序使用默认的录音编解码器 (amr) 和质量。 您可以从用户处添加用于录音的处理程序，以根据需要使用特定的编解码器和质量（从支持的编解码器列表中选择) 。

请参阅示例应用程序的音频播放和音频录制的执行详细信息。

使用下面的命令来安装示例应用程序 （HybridAudioPlayer.wgt 文件）。

• sdb root on
• sdb push HybridAudioPlayer.wgt /opt/home/root/
• sdb shell
• $ cd /opt/home/root/
• $ wrt-installer -i HybridAudioPlayer.wgt
  

屏幕快照：

许可证：
在应用程序中使用的图像均根据知识共享署名 2.0 许可授权。

开发环境：

Tizen SDK

版本： 2.2.0
构建 id： 20130708-1957

文件附件下载:
hybridaudioplayer.zip
audiorecorderclient.zip