(Answered) Adding Sound (audio, music)

advanced-prototyping
#28

I know this is an old thread, but I was experimenting around, and although this might not solve the mobile issues (I’m not sure, I didn’t try it), I did figure out a way to reduce the slight lag between the user’s action and when the audio starts playing (I experienced this lag using some of the javascript solutions above).

In OnPageLoad, you can use jQuery to append an HTML5 audio player into a dynamic panel. If you don’t want to see the player, simply hide the panel somewhere, either under something or off screen. Give the audio player an HTML ID tag to reference. In the user action (OnClick or whatever), use javascript to reference the HTML5 player to play or pause it.

OnPageLoad:
javascript:void( $(’[data-label=“audioPlayer”]’).append("<audio controls id=‘player’><source src=‘http://www.audiocheck.net/Audio/audiocheck.net_gangnam16.mp3’ type=‘audio/mp3’>Your browser does not support the audio element.</audio>") );

In the User Action (OnClick):
javascript:void( $("#player")[0].play() );

And to pause:
javascript:void( $("#player")[0].pause() );

For me, this made it more real time and got rid of the slight lag. I think in user testing users would notice that lag and it would distract from the purpose of the audio in the UI.

#29

Hi mnearents

Do you mind posting the Axure file?
I don’t really understand where did you place the Java script.

Thanks,
Tomer

#30

I’m also struggling to understand your implementation, mnearents. Any chance you could provide an example file? Many thanks for contributing to this topic!

#31

Sorry, I didn’t notice the responses to this. Here are files for 7 and 8:
Audio RP7.rp (53.1 KB)

Audio RP8.rp (53.8 KB)

#32

Hi mnearents -

Are you able to get the currentTime - the elapsed time of the clip?

#33

Thank you. How can I include audio that store locally with the generated prototype html?
Also is it possible to have the audio play automatically when the page is launch?

Angel

Method for embedding sound files into your RP document
#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