Method for embedding sound files into your RP document



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.