Integrating Audio Playback in screen

Integrating Audio Playback in screen

  

We would like to create functionality so that when we click on a phrase, which has a timestamp, we seed the start time in an audio player to that point in time, and it begins to play. Our audio files are stored in an entity in binary.

So far, we have tried using the StreamBinaryFiles extension to play the audio files. This works fine, however the audio player pops out in a new Windows Media Player window. Is there a way to embed this pop-out window in the Outsystems screen, or to point the streaming audio to the HTML5 Goodies Audio Player and then implement the clicking logic we would like?

We did also try just using the HTML5 Goodies Audio Player without the StreamBinaryFiles extension, but we lost the seek bar functionality when we did this.

If anyone has any experience or advice to solve this problem it is much appreciated.

Dan Asserati

Hello Dan,

From what you're describing, I think the best option is for you to include an "audio" element on your screen to play the audio. Set the source to the streaming URL you've been using, then use a bit of javascript to play the audio at the position you want. Here's a small JSFiddle that shows how the HTML and JS can look like.

Cheers,
R

Hi Rodrigo,

Thank you for your reply. I am currently working with Dan on this issue.

The issue is that the StreamBinaryFiles extension is not a streaming URL which can be used as a source, it is an action itself (which we currently call from a preparation). This means we are unable to set it as the source for an audio player. We tried the embedded audio player approach, where we did not use the StreamBinaryFiles extension, but then we lost the seek functionality, which is a must-have.

Any further help or thoughts would be greatly appreciated!

Zoe Harris

Solution

Hello Zoe,

The URL for the stream is the URL of the screen where you defined the preparation. In attach you can find an example of an application that I believe does what you need. You can also see it running here.

Cheers,
R

Solution