Play/Pause the audio file (inline frame, extern hyperlink google drive file)


#1

Hi there, i’m using an audio file in my prototype as meditation podcast. I did this by this way: Just wanna share how you can use sound/audio on click in Axure

When i click on pause, the audio stops, but when i click on play again the audio file does not load anymore. Does anyone know a better option to do this? HiFi_v3.rp (2.9 MB)

(check the attached RP8-file for more information)


#2

I don’t see a “Play” or “Pause” in your prototype–assuming you refer to the “profiel” page. There is a green “phone chat” icon under a transparent rectangle, with an OnClick event to open a Google Drive URL in a hidden Inline Frame widget named “video”, so perhaps that is what you mean by “Play”? Clicking that does nothing either. I duplicated “profiel” to “profiel (1)” and added an OnClick for the background image to toggle visibility of the inline frame widget. I see that I don’t have access to that URL (nor the default URL in the Inline Frame’s Frame Target property. Trying to load these URLs directly in my browser confirms this.

Looking at your other post (linked above) I see a similar Google Drive link, and that one works for me. So, I duplicated “profiel (1)” to “profiel (2a)” and changed the URL link. I created an OnClick for the green phone icon to toggle its selection state, and OnSelected to open the URL in the inline frame an d show it. The URL loads correctly in the Inline Frame, but does not autoplay (I’m on Win10, using latest Google Chrome browser, and this is a documented and intentional feature of that browser.) However, if I load the URL directly in a browser tab it does autoplay. I previewed the prototype in Firefox and it did autoplay, which has been same behavior for other video and audio stream sources.

If I show the hidden “video” inline frame widget, then I can see the HTML player controls and can play, pause and scrub through the audio stream. Same for Firefox and MS Edge browser.

I duplicated “profiel (2a)” to “profiel (2b)” and replaced the URL with an audio stream from a different source (#BLM :fist:t5: ) and the behavior was the same; it autoplays in Firefox but not Google Chrome or Microsoft Edge. This page has a slightly different method to play and stop the audio stream (by clicking on the background image) which changes states of a dynamic panel (with the inline Frame in the “on” state and nothing in the “off” state.)

I have long used a different method that I find much easier and more reliable for controlling audio and video streams. However, it does use javascript injection, so not officially supported by Axure. See “profiel (3)” for a demonstration. The OnPageLoad opens the audio stream and clicking on the green phone icon plays and pauses the audio. (For others reading this, the audio stream in the Google Drive link has about 3 seconds of blank to low-level audio in a long fade-in, so be patient to hear the audio.) Same approach and code works in RP9 as well.

HiFi_v3.rp (3.2 MB)


#4

thanks a lot, but i already kinda solved it sorry!! forgot to update.