HTML and CSS Reference
eXerCISe 8-2. aDDING MULtIpLe SOUrCeS
Create a vorbis encoded audio file of your sample audio clip that has the .ogg
extension and copy this to the Chapter 8 \Media folder.
■ I used a utility called XMedia Recode that you can download at
http://www.xmedia-recode.de/download.html . You can use this utility to format both audio and video files.
After you have installed this application, run it, click the open File button in the ribbon, and select the mp3 file. In
the Format tab, select the oGG format. Notice the File Extension is automatically set to . ogg and the Codec is set to
Vorbis. Click the Add Job button in the ribbon. Select the Jobs tab to see the job that has been defined to convert this
file. At the bottom of the window you can specify the location that the new file should be saved in. Click the Browse
button and navigate to the Chapter 8 \Media folder. Finally, click the Encode button to start the job. A dialog will be
displayed to show the progress of the job.
In the Solution Explorer, right-click the Media folder and select the Add ➤ Existing
Item links. Navigate to the Chapter 8 \Media folder and select the .ogg file that you
IIS Express already recognizes the .mp3 extension but you'll need to add the
.ogg extension to the web.config file. open the web.config file in the root folder
(not the one in the Views sub-folder). Add the staticContent section to the
system.webServer section as shown below. This will enable the .ogg files as well
as the video formats that you will be using later in the chapter.
. . .
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
In the Index.cshtml file, replace the audio element with the following code:
<audio autoplay controls >
<source src="~/Media/Linus and Lucy.ogg" type="audio/ogg" />
<source src="~/Media/Linus and Lucy.mp3" type="audio/mp3" />
<p>HTML5 audio is not supported on your browser</p>
Save your changes and press F5 to debug the application. open up the page using
several browsers and verify that the controls are displayed and the audio starts
playing when the page is loaded.