@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.)
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