Method for embedding sound files into your RP document

advanced-prototyping
#10

The post from @ProtoAlex earlier in this thread shows how this can be done. I guess it doesn’t work for playing multiple files simultaneously, and that’s your issue.

Yeah, that was like 5 years ago, and in RP8. I’m kind of surprised it still works. It used an embedded javascript library where I cobbled some custom audio/video functions, using a “javascript injection” method posted by one of the original Axure gurus, Gregor. At the core of it, the javascript code creates an array of audio streams. Each audio stream comes from an mp3 file. These files could be on your local system–a folder on a computer or mobile device, although you might get some performance issues trying to play multiple sounds.

If you are running your prototype on a computer, this would be the easiest thing to try, I think. In my sample RP file you link to above, just replace the online mp3 filenames with your own filenames on the same computer. The trick will be using the correct directory syntax. Easiest thing for this is to publish your prototype locally then put the mp3 files in the same folder as the prototype’s HTML files. Then you can just call the filename itself, e.g., “MySound1.mp3” To test changes (with audio) you’d need to publish locally again instead of using Axure’s Preview option.

Beyond that, you’ll need to roll up your sleeves and get ready for a fair bit of trial and error. …But maybe not new coding. The base-64 approach from @lshillman at the start of this thread essentially translates the audio content from a stream into base-64 text and embeds that into the page. In theory, you should be able to use that text block the same as you would an mp3 filename to point to the audio content. And in theory, you could paste the base-64 text block into any widget and then send a pointer to that to create an audio stream in javascript.

If I lost you here, don’t worry, but it’s leading me to another idea you should be able to easily test. In my sample file, replace the mp3 filenames with your base-64 text --the same long string you pasted in as the <source src=' ...> in the Open Link javascript call.

If I get some more time I’ll try this base-64 conversion again and see if I can get it to work.

#11

I can confirm you can have a lot of base64-encoded files playing simultaneously. I used that method to make this, in which each piano key plays an mp3. When you select a chord from the chord bar under the piano, all the notes play at once—well, okay, they play sequentially, but if your computer is fast enough they ought to sound more or less simultaneous.

I’d post the rp, but at this point it has spaghettified into a completely unreadable mess; even I have trouble with it if I go back to it after a week. But it’s doable!

PS: @mbc66, you’ve been here for nearly ten years and post advanced stuff all the time. I guess there’s no hope of making it past “apprentice level” on this new forum!

#12

@mbc66
Thank you so much. I think I got some homework now!

One question regarding the Base64 thing: The longer the audio, the longer the Base64 code. Right?
What is the actual limit of characters you can enter into the variable/function window? I can’t find any documentation on that.

#13

You won’t find any from Axure, as javascript injection it is not supported.

#14

Hi again!
I got it working all together using the Base64 method. Thanks gain!
Is there anyone having experience in modifying the audio via changing the sampling rate?
I would like to have a tone that changes with the movement of a slider.
Slide right- tone becomes higher, slide left, tone becomes lower. Realtime of course.
Naive idea is to use some math to control the sampling rate in relation to the x- position.
Any suggestions on that would -again- be much appreciated!

Greetings, Ben

#15

You might try experimenting with tone.js:
https://tonejs.github.io/

Or using oscillatorNode in vanilla js:

You could always fake it by using several mp3 files played at different pitches, but that approach would mean you go (for example) directly from a B♭ to a B, rather than “sliding” up to it. But if you don’t want to mess around with javascript, this would definitely be the easiest way to prototype it.

#16

Thank you for this invaluable explanation. Is there a way to loop an embedded sound file in Axure?

#17

Sure. In this part of the code:
<audio controls id='player'>

just add “loop”, like so:
<audio controls id='player' loop>

Here’s a live example.

#18

Thank you so much! This will save the day.

#19

lshillman, thanks again, the loop worked - just like you described it. I am still not out of the woods yet - my pause function is not getting invoked, and when I try to play two distinct soundbites on the same page, only one gets to play… any suggestions or experience you may share?

Please see - https://yf816n.axshare.com/#g=14

#20

I am sharing the Axure file for reference:

SoundTest.rp (195.6 KB)

#21

Unfortunately I’m stuck on RP9 and can’t open your file (Axure, please give me a perpetual license option so I can upgrade!), but if I had to guess, you probably need to make sure your play/pause actions are targeting the right player.

In my code in the original post, there’s this part:
append("<audio controls id='player'>
where the id='player' part is how you target the sound. So if you have multiple sounds, you probably want to change that for each one to something like id='sound1', etc.

And make sure you’re appending each player to a dynamic panel with a unique name, otherwise they’ll all be the same.

#22

Thank you, again for looking into this and trying to help… Please see the link below, I tried to share the JS as much as I could…

https://qz0ldz.axshare.com/#g=14

#23

No problem. I can’t tell what the issue is from what you posted, but here’s an rp file with two embedded sound files, both looped, that can play/pause independently:

Live example | two-at-once.rp (85.8 KB)

Let me know if this gets things working for you.

#24

You hit the nail on the head. I sincerely appreciate your assistance - I’ve noticed that the problem I experienced was part due to syntax, and part to Safari not performing consistently - chrome seemed to deliver more consistent results with both. With your permission I’d like to refer to you as Sifu Ishillman.
Thanks for helping Axure do things it was perhaps not designed to do… yet, we’re almost in 2023, and I hope Axure product managers pay greater attention to the conversations taking place in this forum and understand that we demand an experience prototyping platform that goes much further… cannot help but notice how Adobe and Figma are joining forces to build the next big thing…

#25

Ah, splendid! Very glad to see it ended up working for you. Your prototype is sure to impress.

And yes, here’s hoping someone out there is paying attention!

#26

Hello @ProtoAlex
After a couple of years I now find myself needing a bit of help on the multiple sound tip above. Sorry to be a clod on this but I’m not clear on where all the base64 sound content should reside. Is it one audioPlayer file with all the encoded sound content, and with each sound separated by “<audio controls id=‘playSound1’><source src=‘data:audio/mp3;base64,ENCODED_Sound1’ type=‘audio/mp3’></audio>” or something different?

I’m also a bit lost on how the global variable would work here. I can certainly create one but is its default data the audioplayer data? Thank you so much in advance. I’m still using v9.0

#27

@uiguyjohn each base64-encoded audio clip gets its own player (<audio>...</audio>), which you’re appending to an Axure widget (e.g., a dynamic panel or just a rectangle) named “audioPlayer” in ProtoAlex’s example (but you can call it whatever you want). The actual audio data goes in the <source> tag where you’ve got ENCODED_Sound1.

ProtoAlex is suggesting storing the audio player code (the <audio> tags and everything between them) in a global variable in case you’re going to be reusing the sound files across multiple pages. If you’re only using it in one place, no need to use a global variable.

My example RP file here was built in v9 if it helps.

#28

Awesome, thank you so much @Ishillman, this is exactly what I need to do the job. I was close as I set it up similarity but missed a minor detail. All good now. Thanks again

#29

Excellent, glad to hear it’s working!