Project Details

Wechat Voice Messages Module

Module Overview

This module mainly contains three parts: (1) AudioManager, which manages the tasks of recording the voice and (2) DialogManager, which manages the tasks of displaying dialogs and (3) MediaManager, which manages the tasks of playing the recorded voice messages. The button at the bottom is a self-defined view and it can detect your finger's motions to perform recording or canceling the recorded voice messages. The following sections will show the details.

Audio Recorder Button

The audio recorder button at the bottom is a self-defined view. It's main function is to detect the finger's motion to trigger events. Particulaly, we override the onTouchEvent() method to detect different finger's motions:
(1) MotionEvent.ACTION_DOWN: If the finger is down, then the system knows the user want's to record voice and changes the system's state to recroding.
(2) MotionEvent.ACTION_MOVE: If the finger moves, then the system will calculate the moving ranges accroding to the corordinates (x,y) of the finger to decide whether user want's to cancel the recording.
(3) MotionEvent.ACTION_UP: If the finger is up, there are multiple cases:
  (a) If the duration of clicking the button is too short and the system doesn't detect long click event, then the system will be reset.
  (b) The user has triggered the long click event but the AudioManager doesn't finish the preparation of recording or the recording time is too short, then the system will cancel the task of the AudioManager and displays a dialog to alert user that the recording time is too short.
  (c) The recoridng is finished normally and then the system needs to close the dialog and at the same time allows the AudioManager to release.
  (d) If the user want's to cancel the recording voice messages, the system will close the dialog and cancel the AudioManager's task.

The following figures show some cases:

Recording normally

Recording Time is too short

Cancel recording
To allow the DialogManager display the dialog and update the voice level when recoding, I used a Handler to dynamically control the contents of the dialog and start a new thread to obtian the current voice level.


The AudioManager's task is to record the user's voice, in which I used sington design pattern. The core method of this class is prepareAudio(). This method prepare the all the resources for recoridng, including setting the output file, the format of the output file and the encoder etc..


The DialogManager's task is to display the corresponding dialogs acccroding to different systems states. For example, when the module is recording normally, the dialog should show "Slide up to cancel", when the recording time is too short, the dialog should show "Message too short" and when the user want's to cancel the recording, the dialog shows "Release to cancel". The DialogManager also display different voice level images according to the obtained voice level.


The MediaManager's task is to play the recorded voice messages. The core method of this class is playSound(). This method is meainly to set the path of recorded voice data sources and start the MediaPlayer to play the voice messages.

Conversations List

To display all the recorded voice messages in the coversations list, I used RecorderAdapter, which extends the ArrayAdapter. In the getView() method of the RecorderAdapter, the Adapter dynamiclly change the length of the voice message box according to the recording time duration.

Audio Recorder Demo