Friday, March 21, 2014

How to code an audio file to run in HTML5 using data URI scheme?


When you need to fashion a web page to include in-line data, you would use the data URI (URL)
scheme.
Here is the IETF reference for the Data URL scheme,
http://tools.ietf.org/html/rfc2397

As described in the above it is,
"A new URL scheme, "data", is defined. It allows inclusion of small
   data items as "immediate" data, as if it had been included
   externally
"
You can embed different kinds of data in a web page using the source pointing to this URL scheme.
For example you can embed the image of a red dot with the following scheme,
Red dot
The above is from WIKIPEDIA.

Read the advantages and disadvantages of using URL scheme in web pages in the above link.
As to using audio files, you would normally code as follows:


If the browser does not support the .ogg file it would play the MP3 file and if it cannot it will
display a message as indicated.

In IE11 you get to see the audio controls but you get an error message.


When you accept to allow running scripts it changes to a different error but does not play the audio.


Firefox 26.0 does not play the file although the controls are displyed briefly to fade quickly.
Safari 5.1.7 clearly does not support the audio element.



Now how do you use the data URL Scheme to play audio?

The HTML5 code to use this scheme is as shown:

   <!--
src="data:audio/wav;base64,UklGRpDVAgBXQVZFZm10IBAAAAABAAEAIlYAAESsAAACABAAZGF0YWzVAgAB////Af8AAA
D//wAB
AgD9/wEAAAD//wQB/P/4AAcACQD7Afb/AgAJAf8B+v8C/wUA+gD+AQL//wAAAP4A+gABAQT//P/5
AAEABwD+AvkABgD///YAAQACAf8A/v8FAf7/+AEFAAAAAAD+AAUB/QH4/woAAgH+//wB+v8MAQX/
AgH8/wj/BwDzAAYBBP8GAQEA/gAHAAAACwAEAP7/BAAGAfn/CQATAf4AAgD3APwAC/4OAAMA/AD3
AQEAAAAB/wwC9P/+AAwB/AAAAP4A+AAHAPsAAgAS/+cABQEEAOkAAQH7/wEB+AAC//gA+wIE//kA
Af/wAQwAB//o/wMCFP/vAP8BBQHt/wIACgD0//8ABQEQAPMA9wIJ/wcB/ADxAQj/AP/6Afr/7AEK
..truncated data/>

The Base64 content is too big and therefore  truncated.

IE11 does display the controls but the error in display  is 'Invalid source'.



Safari 5.1.7 does not run the audio content.



However  Mozilla Firefox 26.0 does play the audio file.


How do you create Base64 content. You can take your *.wav file and run it thorough a program that
converts it to Base64 format and use it in the web page.

Here is an article that creates a web service to encode/decode Base64.
http://www.aspfree.com/c/a/vb-net/encodingdecoding-web-service-web-service-provider/

You can directly do it on-line by going to,
http://www.base64decode.org/




http://www.base64decode.org/
 

1 comment:

Unknown said...

Your examples aren’t working (e.g., all of the images and audio are broken) because they have break (<br>) tags in them. 🤦