Method for embedding sound files into your RP document

advanced-prototyping

#1

Sometimes your prototype needs sounds, amirite?

I’d been using the method described here and referencing audio files hosted on my own site. It got the job done, but I didn’t love it – external resources are, well, external; they might take a while to load, the domain might be blocked for some reason, and your prototype just isn’t as nicely self-contained.

I was recently poking around and discovered that you can use a data URI as an audio source in html5(!!!), meaning that you can base64-encode an mp3 and then just paste it into the audio element!

Live example | base64-embedded-sound.rp (123.7 KB)

It’s the same exact method, only instead of referencing a file on another site, you’re just including the audio data in the page itself.

Those of us on a Mac can use this terminal command:
base64 filename.mp3 > filename.txt
(or anyone can use a tool like this)

then just copy the contents of filename.txt into your audio player, like so:
javascript:void( $('[data-label="audioPlayer"]').append("<audio controls id='player'><source src='data:audio/mp3;base64,YOUR_BASE64-ENCODED_MP3_HERE' type='audio/mp3'></audio>") );

It’ll be a very long and unsightly string:

Then paste this as an “open external link” action into the event you want to trigger the sound:
javascript:void( $("#player")[0].play() );

Et voila! Hope you all are as chuffed by this as I am.