Tutorial: How to Play Audio Files with FireMonkey FM2

By: Tim DelChiaro

Abstract: This tutorial demonstrates how to include and play audio media data in a FireMonkey application

This tutorial is part of the RAD Studio XE3 online documentation. Links in the article go to the Embarcadero Doc Wiki. 

To follow along with these steps, you can buy or download a trial of an Embarcadero developer tool with FireMonkey including Delphi, C++Builder and RAD Studio.


    Form Design

  1. Use the form created on the previous tutorial.
  2. Add tho the empty flow layout :
    • TLabel. Set its text to Playing.
    • TButton to start playing the audio file recorded following the steps from the previous tutorial.
    • TButton to stop stop or pause playing the audio file.
  3. Change the name of the two button to PlayButton and StopPlayButton.
  4. Set the StopPlayButton as being disable by setting the Enable property of the button to False.
  5. Add a TMediaPlayer to the form.
  6. Add two more TImage to the form. Set the TImage.Bitmap property of each TImage to images that are suggestive for the play and pausing processes. The usual icon for playing process is an arrow and for pausing are two parallel vertical bars.
  7. Set all images on the same position and with the same sizes. The tree images are total superimposed.
  8. Set the Opacity property for all images to 0. The visible image will be the image that shows the current running process.
  9. Add a TTimer to the form. Set it as enable.
    The form should look like this:
    File:Audio Play Form Design.png

    Implementation

To play a video file using a TMediaPlayer, set the FileName.

1. Double-click the Play button to attach OnClick event handlers to it.
procedure TForm1.PlayButtonClick(Sender: TObject);
begin
// This application plays only recorded data, so if there is no data recorded there is nothing to play.
  if (Mic <> nil) and (Mic.State = TCaptureDeviceState.Stopped) then
  begin
    //specifies the file to be played.
    MediaPlayer1.FileName := Mic.FileName;
    //checks if the data can be decoded.
    if MediaPlayer1.Media <> nil then
    begin
      if (MediaPlayer1.State = TMediaState.Stopped) then
      begin
        Timer1.Enabled := true; 
        StopPlayButton.Enabled := true;
        MediaPlayer1.Play;
        //updates the opacity of each image
        // Image2 shows the play sign
        Image1.Opacity := 0;
        Image2.Opacity := 1;
        Image3.Opacity := 0;
      end;
    end;
  end
  else
  begin
    ShowMessage('The audio device is still capturing');
  end;
end;
2. Double-click the Stop/pause button to attach OnClick event handlers to it.
procedure TForm1.StopPlayButtonClick(Sender: TObject);
begin
  if MediaPlayer1.Media <> nil then
  begin
    if MediaPlayer1.State = TMediaState.Playing then
    begin
      MediaPlayer1.Stop;
      Image1.Opacity := 0;
      Image2.Opacity := 0;
      Image3.Opacity := 1;
      Timer1.Enabled:=false;
    end
    else
    begin
      Image1.Opacity := 0;
      Image2.Opacity := 1;
      Image3.Opacity := 0;
      MediaPlayer1.Play;
      Timer1.Enabled:=true;
    end;
  end;
end;
3. Double-click the timer to attach OnTimer event handlers to it. The timer is used to manipulate the images opacities during the playing process.
procedure TForm1.Timer1Timer(Sender: TObject);
begin
  if (MediaPlayer1.Media <> nil) and
    (MediaPlayer1.CurrentTime = MediaPlayer1.Duration) then
  begin
    Image1.Opacity := 0;
    Image2.Opacity := 0;
    Image3.Opacity := 0;
    StopPlayButton.Enabled:=false;
    MediaPlayer1.Stop;
    MediaPlayer1.CurrentTime:=0;
  end;
end;

    Run the Application

1. Run the project by pressing F9.
2. Press the Record button to start recording audio data. The SaveDialog opens.
3. Choose a path and a file name to save the recorded data.
The form should look like this:
File:Recording process.png
4. Press the Stop button to stop recording. If the recording is not finalized by calling StopCapture method, the saved file will not be properly decoded when will be played by a media player.
5. Press the Play button. The media file will start playing.
The form should look like this, during the playing process:
File:Playing process.png
6. Press the Stop/Pause button. The media file will be paused.
The form should look like this, wile the media is paused :
File:Stop process.png



Server Response from: ETNASC02