Lesson 8: Adding Audio and Visual Components

Introduction

Many programs today engage the senses visually and aurally. It is essential for an app to play sounds and video to attain an appropriate level of engagement for the desired audience. The MediaElement XAML control can be readily used to play audio or video. A FileOpenPicker can be used to open any file on the device beyond the restriction seen in the previous lesson, because the end-user is granting explicit permission to do so. Thus, you can open and play any supported sound or video file. The Windows.Media.Capture namespace contains classes for capturing audio from the microphone and images or video from the device's camera.

Instruction

Windows 8 has a XAML control named MediaElement that makes playback of popular audio and video formats quite simple. This lesson demonstrates how to load and play sound and video files embedded in the project's source files or loaded from the user's drive, using a FileOpenPicker. The play position may be manipulated using the methods of the MediaElement object. Finally, the lesson will demonstrate how to record audio from a device's microphone and capture images or video using a device's camera. This is accomplished via the classes in the Windows.Media.Capture namespace.

Play an Embedded Audio File

The user experience of an app is often enhanced by the inclusion of multimedia. Windows 8 supports a number of video and audio formats including: WMA, MP3, WAV, H.264, WMV, MP4, and Raw video. Sound effects and background music may be embedded in a project's source files and called from code to play in a MedialElement XAML object.

Playing and Controlling Embedded Video

In the same manner, you can embed a video file in the project. In this next demo, the Wildlife.wmv sample video file that comes with Windows is embedded in the project.

Using a FileOpenPicker

In Lesson Seven, you learned that a Windows Store app can read and write files only to the app's local storage or the user's Libraries and that the latter required their permission when installing the app. However, a Windows store app may access files located elsewhere through the use of a Picker. The Picker is a standard file open or file save dialog box. This does not break the access rules of the former lesson because the user is, in effect, granting explicit permission to access the specified file wherever it exists.

The demo incorporates a FileOpenPicker dialog to find an MP3 or WAV audio file to play. It can access the user's Music Library (without needing the capability approved) or a file anywhere on the user's local device or network.

Recording Audio With the Microphone

The MediaCapture() method of the Windows.Media.Capture class can be used to access the microphone of a Windows 8 device. This project creates a MediaEncodingProfile object and calls its CreateMp3( ) method as it begins recording form the audio microphone, encoding the recording as an MP3 formatted file. A unique file name is established using the current date and time and the recording is saved to the user's Music Library. When the recording is stopped, the new MP3 file is automatically played back using a MediaElement control.

Accessing the Device Camera for Stills and Video

The devices camera is easily used to capture either still images or video footage. Once again, you will use the MediaCapture() method of the Windows.Media.Capture class to access the camera and an Image control or MediaElement control to display the result. Stills will be displayed in an Image control and saved to the user's Photos library. The video captures will be saved to the user's Video library and then displayed in the MediaElement control.

Practice

1. Modify the Microphone project to utilize a FileSavePicker to save the recording to a user-specified location and user-specified file name. (Google "C# Windows 8 FileSavePicker" for more information.)
2. Modify the Camera Capture project to utilize ListView to display thumbnails of all the photos captured in a session and display them in the Image control for greater detail when selected. Save the files as PNG format instead of JPG.
3. Modify the Video capture project to save the file in a .WMV format rather than MP4.

Assignments

Complete the following:

• Quiz 8
• Assignment 8A (MP3 PlayList Player)

Summary

The MediaElement XAML control provides simple playback of audio or video recordings. The play back may be controlled via properties and methods of the MediaElement control class, including setting volume (range 0 to 1); setting playback speed; and issuing Play, Pause, and Stop methods.

The FileOpenPicker object provides access to all folders and files on the device's disks. This does not violate the capabilities restrictions with regards to the user's permission, as permission access with a FileOpenPicker is explicit. Likewise, a FileSavePicker object provides a dialog for saving files to any location on the user's device.

Recording from the microphone and/or capturing stills or video footage from a Windows 8 device is relatively simple using methods of the Windows.Media.Capture class. Audio recordings may be saved as MP3 or WMA using the CreateMp3() or CreateWma () methods for the encoding profile and issuing the a StartRecordToStorageFileAsync( ) method paired with a StopRecordAsync() method to begin and end the recording session. Likewise, still images are captured with the device camera by using a CameraCaptureUI object with its PhotoSettings properties set to record in a JPEG or PNG format from with the CameraCaptureUIPhotoFormat.Jpeg or CameraCaptureUIPhotoFormat.Png property setting. The CaptureFileAsync method is called from the Windows.Media.Capture class, providing access to the camera's settings and options. Video capture is done in much the same way, but with encoding the capture as either MP4 or WMV formats.

Course Information

Additional Attributions