Autoplay sound on iPad


#1

Hi,

I desperately need help on making my app play some sound on autoplay, i can get it to work on my mac but not on the iPad but i need to play some instructions for the users to then act accordingly on the page. How can i do this ive looked at other forum pages on here and tried to understand and implement but cannot get to it to work?!

Thank you


#2

Audio is not directly supported in Axure, except with inline Frame widgets (which I consider to be indirect support as there are multiple dependencies for this to work.) I, along with other users have had some success with javascript injection methods, but those are not officially supported by Axure (meaning they work, but if something goes wrong, don’t expect support from Axure.) As you’ve found, these can be tricky to use, especially on mobile platforms, which now block autoplaying audio and video at least until the user interacts with the page.

If you can upload your .rp file it will be way easier to help you. If not, could you save out a page or two to a new .rp file, strip anything confidential, and upload that?

Just when and why do you need the sound to play? Are you trying to get sound to play when page loads? That likely won’t work on iPad. If the sound needs to play only after user does something, that should be possible.

Here is a link to an old thread that I updated last November, showing several methods to play audio. You can test the live Axure Cloud link on your iPad to see if the sound works:

So, how did you get it to work on your mac? Inline Frame? Javasript? Other?

Where is sound file located? Locally on your mac or on cloud/server somewhere? If former, then you need some way to get the sound file on your iPad and properly refer to its location–or embed the entire sound into prototype (more on that later.) If sound is online, have you ensured the iPad has access and that the server doesn’t somehow block mobile/embedded access? Test by opening the URL for the sound in a browser on iPad–does it play? Does it play automatically? The iOS blocks videos and I believe audio on a webpage from playing automatically without user interaction.

How are you accessing the prototype on an iPad? Using Axure Share and Axure app? If so, a javascript plugin to play sound on page load is probably a good approach.

Or, is prototype otherwise installed/downloaded to iPad? In the past, I’ve used offline browser apps (which let you zip up a webpage or site and transfer that zip file to iPad via iTunes. If you place sound file in the prototype’s root folder (same place as start.html) then you can open it in inline frame as an “external page” and simply paste in the filename.

Will iPad have internet connectivity? If not, then embedding the sound as base64 is probably the way to go. This thread has details:


#3

Hi,

Thank you so much for all this!

I would ideally like the sound the play on page load and you mentioned a javascript plugin method but I have hardly any idea what it means let alone how to go about it. I believe currently I have an Inline frame that allows it to work on my computer but have taken a selected page and attached so you can have a look please?

Thank youPage 1.rp (454.1 KB)


#4

The simplest form is to upload this video to YouTube as Private, and use that while setting autoplay to = 1


#5

@jamesorior, Have you tested this on an iPad? Does it somehow bypass the iOS restrictions on autoplaying a video?

It looks like @Olivia67 has done essentially the same thing on Vimeo, and her video (black screen with audio) can autoplay on Mac and Windows desktop browsers. It does not autoplay on an iPad, either in browser or Axure app.


#6

If it does not work on iPad, then it would be an issues with iPad OS not Axure. Although I have not tested it on iOS as I only have Android phone.

The example worked on Browser, Android mobile phone no problem at all.


#7

@Olivia67, I tried a few different ways to get around this. I know I’ve used sounds with prototypes on iPhone and iPad before, but not autoplaying on a page load. The best solution I can find is to use a true audio file (not video hosted on a video streaming site) with a little bit of javascript injection and some kind of user interaction to kick it off. Otherwise, Apple iOS will block it.

Try the Axure Cloud link below and inspect the .rp file to see if you understand the methods. Pages are in reverse order of my attempts, with what I think is best at top.
(Edit: first file upload failed–too big. Kept three pages only and uploaded that below.)

https://5nuv76.axshare.com

iPad Sound.rp (6.1 MB)


The details…
Page 5: Click Start (audio)
This is the best approach I could figure out. The user first sees a big START button. Clicking START plays the instructional audio and shows the game scene. I tested on an iPad and iPhone and it works. To achieve this, I created a dynamic panel from all your widgets, added a new default state and placed the START button in it. When clicked it changes the dynamic panel to next state to show the scene. The sound source is loaded in the Page Loaded event, so the javascript to access and play it is “injected” into the page’s HTML. (This “javascript injection” is not officially supported by Axure so proceed accordingly.)
javascript:var audio = new Audio("https://ia801405.us.archive.org/4/items/sandcastle3/Sandcastle3.mp3");
I took the liberty of stealing your instruction video, converting to MP3 and posting to archive.org which is a free site that hosts all sorts of public domain media (do yourself a favor and browse their Prelinger archives.) You can use any server that hosts streaming audio–I’ve found that archive.org is easy, fast, and free/donation, but may not be available in all countries. (By the way, I tried uploading the MP3 to Vimeo and YouTube and they only accept video file formats.)

Now, to play the sound on iOS (and some desktop browsers) there must be a user interaction first. That’s the reason for the START button. It’s Click or Tap event looks like this:
Set Panel State screen to game, Open Link javascript:audio.play();
Those are the only javascript calls.

Page 5 Bonus
This is same method as Page 5 but I added sounds for all the items, because the alarm and gong should make sounds, right? I also noticed you had some logic to enable and disable widgets and presume the game is to press the widgets in a specific order as instructed. So the alarm is only enabled widget at start, then apple, gong, and so on. To keep the multiple sounds code as simple as possible, a set of sound file URLs are loaded into a javascript array–and this is done in the Page Loaded event. Here is the pseudocode:

javascript:var audio = new Audio(); var playlist = new Array('http://mysource/soundfileA.mp3', 'http://mysource/soundfileB.mp3', ... 'http://mysource/soundfileZ.mp3');

You can swap out any URL for the sound files, add in more or remove some. Just remember to wrap your URLs with single quotes and separate them with a comma.

To play any one of those sounds, a fairly simple javascript line sets which sound to play and then plays it. For example, the START button plays the first sound in the array (and javascript arrays start at position 0 (zero)) :
javascript:audio.src = playlist[0]; audio.play();

The “alarm” widget plays the next sound in the array like so:
javascript:audio.src = playlist[1]; audio.play();

Feel free to use or download any of the sounds. Some I happened to have posted already, others I found on the site.

Page 4: Click Play (video)
This is the best I could do with your existing Vimeo source. Your video is loaded in the inline frame, which is in the foreground. At the size you had it (37x21) Vimeo shows a play button to fill it, which is nice. The user needs to click it to hear the instructions, and then click the background (or some other button maybe) to send it to back or hide it. There is no event triggered when the user clicks play nor when the video/sound completes so no way to determine when to automatically hide the iFrame.

Page 3: Fullscreen iFrame
I tried loading a “Launch” page in your inline frame with a big START button. Pressing START then loads your Vimeo video with autoplay=1. The idea is that the user would be interacting within the inline frame which would bypass the autoplay-blocking. Nope, didn’t work. Turns out the user has to interact on the Vimeo page before the video/sound will play.

Page 2: Simplified Link
I noticed you had an unclosed <iframe> tag in the Open Link action. It still worked but you were essentially embedding an iframe (code from Vimeo) in an iframe (your “Instructions Sound 1” inline frame widget.) You only need to call the https:// . This didn’t affect autoplay however.

Page 1: Your original page


#8

Ahh this looks perfect, I will give this a go and let you know if i have any problems! Thank you so much!!!