Pause when not visible

Hi!

I have an asset grid that gets texts, images, sounds and video from a api.
Some items have an image, other items have sound or video. I have used a converter script to show/hide the different media assets depending on file name like so:

if(INPUT.endsWith(".wav"))
true;
else
false;

This works well, when there is an image I see the image, when there is a soundfile I see the sound controls.

If I press play the sound starts. But when I navigate back or forward in the grid the sound does not stop. It only stops when I navigate to another layer. Then when moving back to the layer where the sound controls are the sound continues but the controls have reverted into a state as if the audio is not playing - meaning the play button is visible, not the pause button, although the sound is playing. Even after I close the player moving back into composer the sound still playes?!

Why is this?

What I want is for the sound only to play when sound controls are visible - meaning when I can see them on screen/in viewport. As soon as the sound controls are not in viewport I want to pause the sound.

And natually I want the controls to work after I have navigatet within the experience and comes back to the sound clip.

Are there any known issues regarding using the sound asset?

Hello @it15 ,

It’s a bit tricky to investigate without your content, I recommend you to open a ticket on our Support Site so our team can investigate.

Support Team will probably ask you to share your XP with xp-for-support@intuiface.com so you may want to do that just after creating your ticket.

Regards,

Alex.

1 Like

Ok, I understand - the problem is that all content for my experience is from a local API. I would have to ask my IT departement if they can un-firewall the API endpoints in order for you to actually run the experience.

Is there no way to programatically trigger start, stop pause from an eventlistener that triggers when audio controls are visable or not visable in the sence that they are actually visable to the users eye rather than the visibility attribute of the asset?

The asset attribute visible can be true although the audio controls are outside viewport which makes this tricky.

/F

Maybe you can try to set some other triggers to ensure the sound stops?

For instance - when item moves out of focus, stop sound. Or when controls are hidden, stop sound. Or when collection index changes, stop sound? Just some ideas.

I’d go with @AlexB solution and switch your asset grid to an asset flow, so you have a notion of focus.
You can then use the “moved our of focus” trigger on your template to call the pause / stop action on the audio asset.

Using asset flow requires at least three items to be visable at the same time. I only want to show one item at a time. How would I use the “Moved out of focus” in a scrollable collection to call pause action on the audio asset not knowing if the asset that is moved out of focus is actually an audio asset?

Is there a way to combine custom script with “Moved out of focus” to get the behaviour: If item has moved out of focus and item contains audio asset then pause audio asset?

Hi @it15,

You can have only 1 item visible in an Asset Flow, you just need to either:

  • reduce the width of the asset flow to the width of your items (GIF below)
  • or put the asset flow in a Group that has the width of an item. The group will act as a clipping mask.

This is my current solution - in the group that I am currently “flowing” I have one image and a few texts. Item one have image A and text A and item two have image B but text A. I would like not to scroll the items in the flow so to give the appearance that it is only the image that changes between the items. So, what I would really like is a asset swap if you will. Meaning an asset that acts as a stack of cards where the top one is removed on “next” and put back on “previous”.

Can you add some screenshots / drawings to illustrate what you have / what you’d want to create here?