Adding sound is not a feature built into Axure, but some of our users have been able to embed it into their prototypes using an Inline Frame.
There is a tutorial on Axureland that shows you how to do this on the PC, I’ve never tried it myself but you can find that here How to Prototype Windows 7 Using Axure: Part 2 - Axureland
If you’ve successfully done this on the Mac, please share how you’ve accomplished this! (challenge?)
Paul,
I’m at it again trying to hack sound into Axure. I’m sure sound embeds are on their way in future Axure releases, but until then, here’s my latest attempt:
Adding Sound in Axure Using YouTube Video Embeds - Axureland
Just a quick note for future readers. Panayiotis new approach works amazingly well on desktop prototypes. Unfortunately it does not seem to work on mobile ones (e.g. iPhone) when loaded directly in the device since the iFrame will not automatically load and play the YouTube video. Instead, it loads it but will expect you to start it manuall. And if you do that, then it switches from your “app” (browser session) into the YouTube app. I really hope Axure adds native sound support soon.
Is there a way to maybe manually edit the prototype’s HTML after it’s generated (gulp)? How would someone go about doing that? Which elements would need to be edited?
Mayestro,
To edit a prototype’s HTML files, just start digging around in the generated prototype directory. All the HTML is right in there and if you want to dig deeper, explore the resources folder to find the css files.
Have fun!
Pete
Thanks Paul, really appreciate the insight. Unfortunately I ran across a new surprise… It seems the problem with the autoplay has to do with how iOS deals with those attributes in the device’s browser. I tried using your other approach of creating a stand-alone HTML page using the new simpler HTML5 audio tag, referencing a local audio file with autoplay, loading it into the iFrame, and noticed it would work on my browser but not on my iOS device.
Upon further research, I ran across information that Apple decided to disable the autoplay feature to avoid people from wasting broadband with unrequested media loads. Same thing applies to video, which would also explain the YouTube situation. Seems other developers have tried workarounds using Javascript functions to try to force the audio to play in other ways (on page load, etc.), but Apple also disabled those types of play() functions. Bottom-line, seems all audio and video files in the iOS browser require users to manually start them. :eek:
Shared this on twitter today and have been meaning to get around to posting it. I’m using a variation of Pete’s method for playing sound, by loading into an inline frame. I’ve hosted the sound file on dropbox and you basically open that sound file URL/Path in the inline frame.
AudioInFrames.rp (50.3 KB)
Hi Everyone,
I can confirm mayestro’s findings: on iPhone 5 with iOS 6.0.2, auto-play was disabled, regardless if the interaction was on load or on click. An explicit click by the user triggered the audio.
In addition, I observed that this click triggers the QuickTime mobile player creating new app context for the duration of the sound (see attached full screen image).
In my search for a solution, I stumbled upon this Using an Audio Context instead of an Audio tag HTML5 audio, but have not yet tested it.
Having said this, has anyone come across any method that auto-plays sounds in iOS (onclick/onload) without explicit user trigger and consequent app context switching?
light_forger
P.S: I would imagine that Pete’s YouTube method will open the YouTube app fullscreen and will require the user to hit ‘play’.
Hi All! I did some more digging. According to the Safari Developer Library autoplay is disabled for audio and video (so even on load users still have to trigger the playing). See section User Control of Downloads over Cellular Networks, here:
Loading…
In regards to the Audio Context method I mentioned in my previous post, the Safari Developer Library has a separate article on the topic of using the Web Audio API: Loading… However, it appears to be too much effort for adding sound to a prototype.
Hope you find this information useful!
UPDATE 1: The autoplay feature seams to be disabled regardless of which browser (tested on Opera, Bing, Chrome, etc.) is used on the iPad/iPhone.
UPDATE 2: Tested the two solutions below on an iPad and iPhone, and both autoplayed the audio:
Using SoundManager 2: http://www.schillmania.com/projects/soundmanager2/demo/template/
Using Web API’s Audio Context: http://clubsexytime.com/projects/finggame/chaseAndEatAudioContext/
light_forger
I’ve just tested Paul’s example, it’s great, is it possible to have a second button to pause/stop the audio?
Hey Paul, thank you so much. This works well. I am facing a small issue though, hope you can help me out. I have hosted the audio files on dropbox and open the autoplay link in the inline frame as you have done in the prototype. But the issue is that the file plays only if I have signed into dropbox. How to make sure that anybody anywhere using the prototype will be able to play the sounds?
Thanks again,
Manas
The best way to go about it would be to upload the audio file to an external server. So if you have a domain/hosting you can FTP your audio file up so it’s available to anyone, and then point to it from there.
Hi manasmdk,
Maybe this will help (DB Public Folder)? https://www.dropbox.com/help/16/en
light_forger
Hi Svetlin, I’m back and once again find myself in need of making audio work. I was lucky that the Android OS took longer to catch up, so I was able to show my prototypes on Android phones at the time. But now neither iOS nor Android like to autoplay audio using the inline frame. Since it seems you were the one that took your research the furthest, do you have any more recent insights on how to make it work? And from your descriptions, it sounded like SoundManager 2 would be the easiest way to go (seems on iOS the lack of Flash would cause the system to use HTML 5 at 100%), do you think that’s still the case? And if so, do you happen to have any Axure sample Project showing how it’s done? Thanks!
Hi Mayestro,
Good to hear from you. I abandoned my earlier approaches because they proved too inflexible for my needs. However, I stumbled on another solution. I am planning on a much longer write up when I get the time but in a nutshell, you can do the following:
Keep in mind that this will use the default’s built-in audio playing chrome (thus size the iFrame accordingly). Furthermore, different OSs have different limitations on audio playback for mobile e.g., iOS eliminates autoplay and requires user tap to trigger playback.
Lennart Hennigs discovered this approach independently in his “Axure for Mobile” (2nd edition book). I have additional tweaks to my version including JS functions for stopping/playing sound using custom created audio chrome, but more on that later!
Hope this helps you out!
light_forger
I have been thinking quite a bit about this and am wondering if it would be possible to do the following:
I am looking to use Axure to build a prototype and then load it into phonegap to create a downloadable app. My thoughts are to include all of the audio and video files in the prototype folder and have the prototype call them so that the media is saved on the users device and they will be able to access through the app. I know that I can have a widget built or added into the pages to play the audio, (stop it, fast forward/rewind, pause, etc…) and will be looking to build it out if it seems like the right course of action
Is this possible to do? I would prefer that the final product be one package so that internt or network connectivity is not an issue…
Any ideas/thoughts?
J
Hey Jballou,
I can’t talk about phonegap since I have used it only briefly. However, you can achieve the same result with ProtoSee. There are couple of threads on the topic. In summary, it is a $5 app which you can use to load .zip archives of generated prototypes (loadable via iTunes or Dropbox).
Using ProtoSee (iPhone only at the moment; for Android, you can probably use the file system via an SD card) is the next step of the general approach I outlined above. In a nutshell:
You have an iframe pointing to an .html file pointing to a sound file. Dump the .html and sound file (preferably an .mp4 or .ogg) in the same folder where the proto is being generated. Then set the following paths:
You will need to either use the built-in audio controls or build custom ones via CSS and FontAwesome and handle the interactivity (e.g., play/pause) with JS functions.
This approach will help you demo sound/video on a standalone device with no need for WiFi or network connectivity!
Hope this helps!
light_forger
Hello Paul,
I managed to add sound to my prototype, but when I put the prototype on my server and open it on my iPad there is no sound.
How can I solve this problem? On my Mac it works perfect but I need to demonstrate it on the iPad.
Thanks!
Hello Paul,
I managed to add sound to my prototype, but when I put the prototype on my server and open it on my iPad there is no sound.
How can I solve this problem? On my Mac it works perfect but I need to demonstrate it on the iPad.
Thanks!
Hi ankemeijs,
Can you tell us a bit about how you’re adding sound to your prototype? Even better, is there any chance you could send your file over to support@axure.com? Our support team will be able to take a close look at your prototype and offer very specific feedback to get you up and running.
Regards,
Jonathan
