(Answered) Adding Sound (audio, music)

advanced-prototyping
#34

Yeah, you can trigger the audio on page load. I basically pasted the action (currently in the play button) in the same place that I put the audio player loading. So in the OnLoad of the dynamic panel, after the line where the audio player is created, I then trigger the play action. You’ll probably have to put a Wait (10ms) in between loading the player and playing it, or it won’t work.

I’m not sure about storing the audio locally, I doubt it’s possible unless you’re generating the Axure HTML files and then modifying them to point to the file.

#35

mnearents, This has worked very well for me, thanks. Works great for video as well! (Just change type=‘audio/mp3’ to type=‘video/mp4’)

I’m trying to add some error handling to this with addEventListener calls, but can’t seem to do it directly. Using Gregor’s Javascript engine approach works, but not in MSIE with RP8 for some reason. Is there a way to tack an AddEventListener direclty to the audioPlayer object?

#36

I’m not sure about storing the audio locally, I doubt it’s possible unless you’re generating the Axure HTML files and then modifying them to point to the file.[/QUOTE]

I am desperately trying to get a small audio file to work locally. I can’t guarantee WiFi or internet access when I go to user testing. Any suggestions? It seems as if this would be such a simple thing to implement.

Thanks in advance

#37

What have you tried that isn’t working?

#38

Starting with the Audio RP8.rp example, I created a small MP3 file and placed it into DropBox and pointed to it from within the onLoad case. No good.

I also tried to point to the file directly on the local hard drive, also no good. The audio file does not exist within an HTML of any sort, is that my issue?

Thanks for responding
John

#39

When using the file from Dropbox, did you use a public share link? Were there any errors in the browser’s console?

When you tried it with the file locally, did you generate the HTML and run it from your disk? Local files won’t work with preview mode. Again, any errors?

#40

Hi Nathan, and thank you again for your prompt replies.

I did not use a public share link but could try that. Given that I may not have any WiFi or internet access, I really want to get a local version to work.

I’ll try the Dropbox public share as well as generating HTML files to test locally outside of preview mode.
Back in a bit…

#41

It works locally! The trick was to generate HTML files. Thanks again for the rockin response!
j

#42

Yup, preview will not work with local files. When you hit preview, Axure is actually running a lightweight server to serve the content locally and this is impacted by browser security restrictions that prevent sites from loading files from your local file system. When you run the prototype from your disk this isn’t an issue.

#43

So… the tips above work great as long as I demo the resulting HTML files on the same computer that I created them on. However, if I move the HTML files to another device, the link to the sound file is broken. I tried to edit the path but it doesn’t seem to accept the change. I’m attempting to change the HTML file and tried doing within Chrome by editing and saving it.

Any thoughts on how I can do this? I also tried putting the final destination path into the Axure path before making HTML files, unfortunately this didn’t work. And just to make things interesting, I’m creating the files on a Mac and running the demo on a Windows device.

Thanks in advance.
John

#44

OK, before anything else, I have to ask: did you copy the sound file too?

Assuming you probably did, try using a relative path to the file as the paths will look different on Windows vs. Mac. For example, if you put the sound file in the same folder as the HTML document, make the path “./soundfile.mp3”

I don’t think you can edit the files directly in Chrome (maybe I’m wrong, never tried). You can modify them in memory in the browser but I don’t think it will save the changes to the files on the disk. Just use a plain text editor. On Mac I’d recommend Sublime Text, on Windows try Notepad++ or Notepad and TextEdit respectively if you don’t want to download anything. Just make sure you’re not editing as rich text.

Lastly, any changes you make the generated HTML files will be overwritten when you generate them again from Axure. So if you’re editing the generated files, you’ll need to make that change every time you re-generate them.

#45

Hey, I figured it out. It was a silly syntax thing (direction of the “/”). I can make it work within my virtual PC and will test it on a standalone device tomorrow. I like the idea of the relative path and will test that too.

Thanks Nathan!

Cheers
John

#46

Hi again
I can successfully play a sound file triggered by loading a page. However, I now have multiple audio player setups.

I have a dynamic panel with several states, two of these states contain separate audio players and linked sound files. No matter what I’ve tried, it will only play the same sound in either state. I’ve tried adding conditions onLoad and elsewhere. The files play correctly outside of Axure and I’ve triple checked the naming used. The audio players use different names as well.

Anyone ever encounter this issue?
Thanks in advance
John

#47

Update
I am able to play two different sounds using two audio players as long as they are not within a dynamic panel. They also work if they are within different dynamic panels. If each audio player is in a unique state of the same dynamic panel, then I only get one audio file to play regardless of what the case is set to. Interestingly, the layer positioning determines which audio file plays. The lowest one takes precedence.

I’ve got the sounds to play as expected but now they don’t play automatically onLoad. Working on a fix for that.
Cheers
John

#48

I’ve been messing around with audio and video again… so will boot this thread yet another time :slight_smile:

Using mnearents method to load HTML5 audio directly, you can just keep adding audio streams to the page, then refer to their array position to control them. Combining this with Gregor’s infamous JAVASCRIPT ENGINE, I can play, pause and reload multiple audio files simultaneously. Have a look.

bvi1kj.axshare.com

Audio-Array.rp (107 KB)

John, you can copy the code from the “Load Audio Files” button to the OnPageLoad event and it will load files automatically --just be sure to wait 500 ms after invoking the JAVASCRIPT ENGINE before calling any javascript. I haven’t tried loading the audio controls to dynamic panel states, but it should work --the audio streams are attached to the page so should be available from any widget or div on that page. I have loaded videos to separate dynamic panel states and that works fine.

Now I need to add in time codes and a scrubbable timeline…

How to make a button that plays sound when pressed?
Adding Audio files and controlling playback?
Embedded Audio / Stop, Pause, Start
Nested Repeater Alternative?
#49

Please excuse me but I need to let out a litle rant. These workarounds lead to the purpose of this program to absurdity. It is ridiculous, that there is this discussion since 2012 and there is stil no audio feature in Axure. Instead of thinking about javascrip workarounds, you could just build in this feature. I’m thinking about presentig my UI for an illiterate target group in powerpoint, that might be faster.

I use prototyping tools because I can’t write code and don’t want to ask the developers for building dummies.

#50

Hi, I’ve placed a local file I want to be played within the project’s directory. In the inline frame I added the file’s local path (C:\Users…\filename.wav) and it plays the audio file after generating html files for the project.
However, as discussed here above, it doesn’t work when I export the project in attempt to run it on a different device. When generating all other html files, Axure doesn’t generate an html file from the local file.
What should I do to make an audio file become an html file? so that I’ll be able to modify the rp file and link to that generated html file directly instead of using local path to the audio file?

Thanks!
Inbar

#51

Hi Inbar,

The best way to render the audio/video file across different machines is to upload it to a public file-sharing service, e.g. YouTube, which will give you an embedded share-able URL that you’ll be able to target with the iframe. Having a publicly accessible audio file should ensure that you get consistent results when viewing the project on a different device, as long as that device has an internet connection.

If you’d rather keep the audio file private, what will help is to put the file directly into the project’s generated HTML folder and then edit the target frame URL as simply “filename.wav” or “./filename.wav”, so that the local path of your machine is not in the target frame URL, e.g.:

When viewing the prototype on a different device, extract the ZIP containing the generated HTML files and double-click on an HTML file to view the project - there shouldn’t be a need to update the audio file target URL on the new device. When updating your project, however, you’ll want to make sure to update the generated HTML files as well (“Publish > Regenerate Current Page to HTML”).

#52

YouTube (and Vimeo) have changed what and how they allow access to content. You have to go through their API, which works differently from methods described in this thread. You can search “YouTube” on this forum to get more info.

I’ve found the Internet Archive is a good place to freely host audio and video files, as well as get tons of content for just about anything. You can get a URL which will quickly load your sound file, and choose to make it publicly available or not.

Another approach I’ve used for local-only files called from Axure prototypes is to put them in a folder at same level as or one folder above my HTML folder, e.g., named “sounds”. Then, just zip up that folder with your HTML folder and port it anywhere. In this way, you can keep updating and publishing your Axure prototype without having to keep moving files around, as well as reuse those sound files in other prototypes.

Pro Tip: It’s best to use relative URLs in your Axure calls, e.g., “…/sounds/myfile.mp3” instead of “C:\otherfolder\sounds\myfile.mp3” to make it more portable.

Method for embedding sound files into your RP document
closed #53