How to make a button that plays sound when pressed?

So I’m trying to make a camera app on Axure 9 and I need to make a button that would make a sound when pressed first. Can anyone help?

Unfortunately, sounds are not directly supported in Axure. You can read through this old thread for some workarounds. Note the “inline frame” method doesn’t work so well anymore with some browsers–notably Google Chrome–as it is a safety and usability “feature” to prevent audio from playing in a popup window or inline frame without user interaction. The javascript injection methods still work, but are not supported by Axure–they work but you can’t get support from Axure–that’s where this forum comes in :slight_smile:

EDIT: I’ve re-updated my audio demo file with an example of using an inline frame widget (along with some workarounds for Chrome) as well as a javascript method to play a sound, and extending that to load multiple sounds in an array.

Axure-Audio-RP9.rp (149.3 KB)

https://5dsgt8.axshare.com

While my example uses online streaming audio, it can be used with local audio files. Just use “local URL” syntax to point to audio files on your system. You can Google that term for help, but the basics are easy.

  1. Local files only work with generated HTML, not Preview mode.

  2. If the file is in the same folder as the .html files then its “short URL” is simply its filename. So, the easiest thing tends to be copying your sound files into the same folder as the HTML you generate.

  3. If the file is in a subfolder, just preface the filename with that folder name. For instance, you could copy a whole folder of audio files into your prototype’s HTML folder. If that folder’s name is “Sounds” and your target audio file is “beep.mp3” then its URL would be “Sounds/beep.mp3”

  4. If the file is in a folder other than your prototype’s HTML folder, you can use the shortcuts, **./** to refer to the root folder, and **../** to refer to one folder level above. So, if your audio file is in a folder named, “ProtoSounds” at the same level as your prototype’s HTML folder, then the URL would be, “…/ProtoSounds/beep.mp3” and if one level higher, it would be, “…/…/ProtoSounds/beep.mp3”

  5. You can use %20 to replace any spaces in the folder name or filename. So, “beep boop.mp3” would become "beep%20boop.mp3. In some cases you can wrap it all in single-quotes or double-quotes to handle spaces, but using %20 is more reliable.

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.