Oh how I, and probably many of you, long for the day when adding sound to Axure is a native feature. I wrote a tutorial last year about adding a sound bite to a Windows 7 login simulation, but there are too many annoying problems with this approach, like:
- having to use a separate HTML file to reference an external sound file
- not being about to use AxShare for one-click prototype generation without also having to upload the HTML and sound file to a different host
- worrying about browser support for the HTML markup I used to embed the sound file
There’s no way prototypers want to go through this every time we want to play a little something for our ear holes. Yesterday I was again tasked with adding sound to an Axure prototype so I decided to revisit my previous approach. I discovered another way to use sound by using an old Axure feature in a new way.
Embedding YouTube Video with an iFrame
We’ve all done it: you drag the iFrame widget from the Widgets Pane to the Design Pane, double-click it, and paste a YouTube link into the external link text field:
If you’re not familiar with this technique, Paul from Axure explains the details here in this Axure forum post. The beauty of this approach is that it’s super fast to use the audio from YouTube videos if you take an extra minute to refine the technique.
Here’s how it works.
4 Steps to Using YouTube Movies for Audio
Set the iFrame properties
Start by dragging your iFrame onto your Design Pane and naming it something like iframe_sound. Right-click on the iFrame and toggle borders off and never show borders:
Get the YouTube embed code
Let’s head over to YouTube and say hello to Benny:
Click the Share button beneath the video, then the Embed button to expand the iFrame code. Make sure to use the iFrame src link and not the one from the Share text field above it. The correct source link is highlighted in blue below:
Link the sound to an event
Drag a standard button shape onto my Design Pane and add an onClick event to it. In Step 2 of the Case Editor dialogue, click the Open Link(s) in Frame(s) and choose the iframe_sound iFrame you created and named earlier. Click the Link to an external url or file radio button and paste the YouTube embed code from the previous step and click OK:
Notice that I added &autoplay=1 (highlighted in blue and apparently not a real Dictionary word) to the end of the URL. This makes the video play as soon as it’s loaded into the iFrame. Since we’re triggering sound to play when the button is clicked, we don’t want to have to click the video again to hear it. Also keep in mind that although I used a button’s onClick event to play the sound, you can assign the sound to play on any other Axure event like onPageload or onLostFocus, etc.
“But I can still see the YouTube Video!”
As it stands, clicking our button will play the video and unleash audio to your ears, but even though the video autoplays, it is still visible. To fix this, select the iFrame and move it to x,y coordinates of 0,0 then set its width, height to 1,1:
You should now see a tiny stray pixel in the upper left corner of your Design Pane. Since you toggled the iFrame’s border and scroll bars, you won’t see anything unless you drag your mouse to select it:
If you haven’t guessed it by now, this is only a temporary hack for getting sound into Axure. The great thing about this method is that you have YouTube’s entire inventory at your fingertips. If you’re a real go-getter, you can upload sounds to your own YouTube account and build a sound library to embed in your Axure prototypes. On the flip side, copyrighted YouTube videos don’t always play when embedded and the fact that iFrames have to load the YouTube links means you’ll almost always experience a load delay from its server.