(Answered) Adding Sound (audio, music)

advanced-prototyping
#21

Hi everyone,

I am building an ipad prototype that needs to play a couple of sound files. So far I managed to add sound files via an inline frame and linking to mp3 in a dropbox. Unfortunately my prototype will later need to be used offline.

In axure 6.5 it was possible to just put the mp3 file into the same folder as the start.html and type filename.mp3 instead of a url.
Now I have axure 7 and my sound files won’t play anymore this way.
This one works:

adding sound 1.JPG888×582 148 KB


This one doesn’t:
adding sound 2.JPG885×581 54.7 KB

What did I do wrong? Looking forward to your answers! Thanx in advance!

adding sound 1.JPG888×582 55.4 KB


#22

Hi everyone,

I am building an ipad prototype that needs to play a couple of sound files. So far I managed to add sound files via an inline frame and linking to mp3 in a dropbox. Unfortunately my prototype will later need to be used offline.

In axure 6.5 it was possible to just put the mp3 file into the same folder as the start.html and type filename.mp3 instead of a url.
Now I have axure 7 and my sound files won’t play anymore this way.
This one works:

adding sound 1.JPG888×582 148 KB


This one doesn’t:
adding sound 2.JPG885×581 54.7 KB

What did I do wrong? Looking forward to your answers! Thanx in advance!

Imke

P.S. I actually also just realized that sound files from dropbox play on pc, but not on ipad…any clue why?

#23

In the meantime, I managed to make my sound files play offline by following these instructions: How to Prototype Windows 7 with Axure: Part 2 - Axureland
However, the sound files still do not want to play on iPad! I tried it with the AxureShare app and ProtoSee.
Please help, any suggestions are welcome!

#24

Hi Imkepimke,

What you’re likely running into is a limitation of mobile Safari, which is that it doesn’t like audio files to be autoplayed. When you load the sound file into an inline frame, mobile Safari is basically seeing that as a file loaded in a new window and it won’t play it until you interact with it somehow. You can use a bit of a Javascript hack in Axure RP, though, to get around this. Instead of loading your audio file in an inline frame, use the action “Open Link in Current Window” and set it to an external URL that looks like this:

javascript:var audio = new Audio(“http://www.audiocheck.net/Audio/audiocheck.net_gangnam16.mp3”); audio.play();

Obviously you’ll change the URL to your audio file, but adding that script to your OnClick event will allow you to directly play sound instead of having it load in an inline frame. This will work on both mobile and desktop, provided your browser supports the Audio element (Can I use… Support tables for HTML5, CSS3, etc).

Regards,
Jonathan

#25

Thanks a lot for your help! It does work! Now we just have another problem though. If we want to play another sound file or if someone presses the button again, the previous sound does not stop playing. We start hearing several sounds at the same time…

#26

Hi Imkepimke,

In that case you, might try something like this:

javascript:if (audio) {audio.pause();}; var audio = new Audio(“http://www.audiocheck.net/Audio/audiocheck.net_gangnam16.mp3”); audio.play();

That condition at the beginning will test to see if “audio” is already set and, if so, pause it. That should take care of any stray audio streams playing.

Regards,
Jonathan

#27

Hijacking this thread.
Using Jonathans code it works fine for chrome on desktop but not for my chrome on mobile (Chrome 47.0.2526.83) and not for the axshare app on android. Is there a workaround for that?
Since the chrome version is supported it should work.

Since the app is much more comfortable it would be great to have it there.

Edit:
Seems like on mobile dropbox links do not work. Got freewebspace and now I have a clear link with an .mp3 ending. Works fine.

#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…