Audio stack that pauses on tab switch

Hi, I am looking for a simple mp3 audio player stack that will automatically pause or stop the currently playing audio when the user selects a different tab (Foundation 6). Any ideas?

Same type question but audio or video

Good questions.

I have a series of radio commercials and placed each one inside Joe Workman’s accordion stack, Squeezebox. I did this to create url links to each spot, but it also enables visitors to click/play each individual spot. If a spot is playing when a second play button is pressed, the first spot automatically stops when the second spot is started.

At the top of the page is the entire reel, with each individual spot in the reel separated out should a listener want to replay a spot without restarting the entire reel.

https://www.davidfreels.com/atlanta.copywriter.mywork/best.atlanta.copywriter.radio/davidfreels.com.radio.php

Don’t know if this will help.

The normal approach would be to choose an audio or video stack that supports “pause on outside click”.

The basic methodology is to detect if the user clicks outside of the audio or video - such as another media player or interface elements like tabs, buttons or toggle panels. This offers a solution for two common problems:

  1. Stops audio or video disappearing out of sight, but still being heard on the page playing somewhere.
  2. Stops multiple audio or video stacks playing simultaneously.

It’s a standard behaviour in my audio and video stacks. I suspect other developers might have implemented something similar.

The difficulty is that there are dozens of stacks on the market that toggle the display of items - think accordions, carousels and tabs. It would be an impossible task to write code into audio or video player stacks that could detect when any these others stacks were being used on the page and pause content when a click on one of these occured.

So by means of simply pausing content when a click is detected anywhere outside of itself, this solves the problem nicely.

1 Like

So I had a little play today and the following JS snippet will pause all audio and video when a tab changes.

$(document).on("change.zf.tabs", function(){
    $('audio,video').each(function(){$(this)[0].pause()})
});

This will only work with Foundation 6 tabs.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.