HTML and CSS Reference
In-Depth Information
eXerCISe 8-2. aDDING MULtIpLe SOUrCeS
1.
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.
Tip
2.
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
just encoded.
3.
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.
<system.webServer>
. . .
<staticContent>
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>
</system.webServer>
4.
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>
</audio>
5.
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.
