« MBS REALbasic Plugins… | Home | Merry Christmas »

A webapp to play a christmas song

Check our WebApps here

This is just another example app I made today. It plays a christmas song. The audio file is provided by the application to the server, so no external web server is needed and this application can run stand alone. To compile and run you need REAL Studio 2010r5.

In the open event we search the audio files and open them as binarystreams. We create the two webfile objects. Those webfiles are part of the app class, so we have them globally. There we set the data with the content of our streams. We also define file names and mime types. They are needed so browser know what we have here:

audioFileM4V = new WebFile
audioFileM4V.Data = bM.Read(BM.Length)
audioFileM4V.Filename = "music.m4v"
audioFileM4V.MIMEType = "audio/mpeg"

audioFileOGG = new WebFile
audioFileOGG.Data = bO.Read(BO.Length)
audioFileOGG.Filename = "music.ogg"
audioFileOGG.MIMEType = "audio/ogg"

Next in the open event of the webpage we have a PageSource control. The location is set to be before content. In the open event we define the html code for this. First we pick the URLs for the audio files. Than we build the html to use the audio tag. As you see, we give it an ID for later use and have it preload automatically. If you add an autoplay tag, you can have the audio play right away. Inside the audio tag we have two sources so we provide audio for both Firefox (OGG) and Safari (MPEG4). Finally we have a text to display if HTML5 audio tag is not supported.

dim urlo as string = app.audioFileOGG.URL
dim urlm as string = app.audioFileM4V.URL
PageSource1.Source = "<audio id=""mymusic"" preload=""auto""> <source src="""+urlo+""" type=""audio/ogg"" /> <source src="""+urlm+""" type=""audio/mpeg"" />Your browser does not support the audio element.</audio>"

Next in the Play button we execute code to play the audio. This is a short javascript code which searches in the html document for the element with the ID "mymusic" which is the ID of our audio tag above. Once we got the object, we call it's play method to start playback.


same for pause:


and finally for changing volume:


Good luck with your own Web Apps!
24 12 10 - 01:07