MBS Xojo Developer Conference and Training
Join us from 3rd to 6th May 2017 in Berlin, Germany.

Platforms to show: All Mac Windows Linux Cross-Platform

FAQ.How to play audio in a web app?
Feedback.

Answer: You can use the HTML5 audio tag and control it with javscript.
Notes:
See our web apps here:
http://www.monkeybreadsoftware.de/realbasic/webapps.shtml

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.m4a"
audioFileM4V.MIMEType = "audio/m4a"

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.

You can set the source in the EditSource event:

dim urlo as string = app.audioFileOGG.URL
dim urlm as string = app.audioFileM4V.URL
me.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.

me.ExecuteJavaScript("document.getElementById('mymusic').play();")

same for pause:

me.ExecuteJavaScript("document.getElementById('mymusic').pause();")

and finally for changing volume:

me.ExecuteJavaScript("document.getElementById('mymusic').volume="+str(me.Value/100.0)+";")




Links
MBS FileMaker tutorial videos