This article describes
a quick and easy approach to playing sound files on an ASP.NET web page in
response to an event. The approach is based upon an included web custom control
used to embed the sound into the web page; this control exposes a sound file
path property that may be used to change the associated sound file between
postbacks and in response to events fired from the web page.
The web custom control
included with this article is compatible with Internet Explorer and Firefox; it
has not been tested against any other browsers. Aside from providing a
demonstration of playing sounds in response to events, the included source code
does provide an easy example of embedding objects in web pages by means of a web
custom control; as such, the example could be used as the basis for creating
other controls used to embed other types of objects into a web page.
In order to get
started, unzip the included source code. Within the zip file you will note that
there are two separate projects, one is the custom control itself and the other
is a test website used to demonstrate the use of the control. Create a virtual
directory for the website and then open the web custom control library into the
Visual Studio 2005 IDE. If the solution does not open with the website, add the
website to the solution.
The Code: The Custom Web Control Library
Within the custom web
control library project (MakeNoise) you will note that there is a single custom
control included (PlayPageSound.vb). Open the class and take a look at the
code; the class imports and definition were all left in their default
configuration. After the class declaration, you will note the following code in
the initialization event:
Private Sub PlayPageSound_Init(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Init
to let you see it on the form
code is used to set the control to 24 pixels by 24 pixels; this does not serve
any purpose at runtime however at design time it provides the programmer with a
box that they can click on if they need to get access to the control's
properties. It is not necessary to set the box to this size, it is only done to
make it easier to manage the control at design time. At runtime the control
will not be visible to the user.
initialization, the one and only property in the control is established. The
property added used to set the path to the sound file; that code looks like
<Description("Set the location
for the sound file")> _
Property SoundFile() As String
Dim s As String = CStr(ViewState("SoundFile"))
If s Is Nothing Then
Set(ByVal Value As String)
Note that the Sound
File path is set and retrieved from view state. The attributes at the beginning
of the property declaration are used to set the text in the property grid for
both the category and the description areas.
The only remaining
code in the control is used to establish how the page will render the control at
runtime; again this is very simple and the code looks like this:
Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
Dim sb As New StringBuilder
src='" & SoundFile.ToString()
autostart='true' loop='false' visible='false'
Catch ex As Exception
The overridden Render
Contents subroutine uses a string builder to piece together the code used to
embed the sound into the page. In this instance, only the string pointing to
the location of the sound file is changed based upon the current contents of the
Sound File property; however, using this same approach one could add other
properties such a Loop, Visible, Auto-start, Height and Width and then set them
in a manner consistent with what is shown here for setting the sound file
property. Given this configuration, the control will not display a visible UI
during the sound's playback. If one were to set the control to be visible and
then give some height and width dimension, the control will display a media
player interface to the user whenever the sound is playing. If the UI were made
visible, in Internet Explorer, the Microsoft Media Player control's interface
would be displayed, in Firefox, the Quick Time player interface would be shown.
Once the emded tag is
created, the HTML Text Writer is used to place the embed tag within a div. If
anything were to go wrong and an exception was thrown, the catch block will
capture the exception and the HTML Text Writer is then used to write the name
of the control onto the page.
The Code: The Test Web Site.
Open up the test web
site; notice that the site consists of a single web page (default.aspx). The
site is setup to simulate an online test; to that that end, the page displays
three questions to the user, keeps track of the number of correct responses, and
displays messages to the user whenever the user answers a question correctly or
incorrectly, and it plays a sound whenever the user gets an answer correct and a
different sound whenever the user misses the answer.
This web page contains
a single instance of the Play Page Sound custom control. Depending upon whether
or not a user clicks on the right answer or the wrong answer, the control's
Sound Path property is set to play the appropriate sound. Each radio button
list (used to show the user the answer options) has its AutoPostBack property
set to true so that the correct sound will load and play in response to the
user's selection. If you did not set the AutoPostBack property to true, the
sound would not play until some other event called a post back.
Take a quick look at
the handler associated with an selected index changed to one of the radio button
Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e AsSystem.EventArgs) Handles RadioButtonList1.SelectedIndexChanged
= 2 Then
missed that one, try it again</b>"
In this instance, the
third answer in the list is correct and the other three options are incorrect.
Whenever the user selects the correct response, the Play Page Sound control's
Sound File property is set to a wave file called "applaus8.wav". In all other
options, the Sound File property is set to a wave file called "burp.wav". After
setting the sound to point at the correct wave file, a call is made to a
subroutine called, "EvaluateResponses()". This subroutine looks like this:
Private Sub EvaluateResponses()
Dim correct As Integer =
= 2 Then
= 3 Then
= 1 Then
= correct.ToString() & "
of 3 Answered
As you can see, this
subroutine checks each radio button list to see if the correct item has been
selected and for each correct response on the page, it updates an integer
variable called "correct" to contain that list. After calculating the score,
the integer variable is used to update the text used to display the number of
correct responses made.
That pretty much
covers it, the web page in operation looks like this:
Figure 1: Test Web Site In Operation
This article discussed
a simple method that may be used to bring sound to a web site through the use of
methods that will do the same thing. This approach demonstrates using a
post-back event as the basis for loading and playing a new sound, if you need or
want to play sounds without the post-back, then you should look to the pure