Creating Stop & Pause Buttons

On more than a few occasions when helping SiteSpinner users with their sites, I have noticed web pages with more than one embedded media player. Many of those sites belonged to musicians to showcase their songs or performances. The one thing that struck me about these sites is that the media players did not interact with each other. If any audio file plays, clicking the play button on another player makes both files play simultaneously.

In this tutorial, I will provide JavaScript code allowing you to either stop (stopAll) or pause (pauseAll) all media players on your web page. The difference between the two functions is subtle. Playback stops when you stop a media player, and the player rewinds to the beginning. Pausing a media player stops playing, but the timeline is not changed, allowing the visitor to resume playback from where it stopped.

Use the following steps to create the stop and pause code

1. Open a new Code object and set the code placement to "Above End Body Tag," as shown in Figure 1.

   

2. Enter the following code into the editor window:

   <script>
   // No user modifications required.
   const players = document.querySelectorAll('audio,video')
   const stopAll = () => players.forEach(p => {p.pause(); p.currentTime = 0)
   const pauseAll = () => players.forEach(p => p.pause())
   </script>
3. Save and close the Code object.

Activating the code

To activate the stopAll() or pauseAll() functions, you must add an object to your page that a visitor can click to trigger the desired action. This section will show you two methods to use the code: a Form Button and a Text object link.

Using a Form button

Drag a Form Button from the Forms toolbar onto your page to a position where you want the button to be. Then, double-click the object to open the Form Editor. The “Button” tab should be visible; if not, click the “Button” tab to make it visible.

The Form Editor example (figure 2) shows the button label outlined in red. You can change the text to whatever you want to use. The button’s Code field, outlined in green, defines the action to take when the button is clicked. The example shows the code to activate the stopAll(). To pause players, change the action to onclick=“pauseAll()“.

Using a Text object link

Open a Text object and enter the desired text. Then highlight the text and click the “Assign a Link” tool button. You must enter at least two pieces of information, as shown in the example (figure 3). First, enter the hashtag (”#”) symbol as the URL. The hashtag prevents the link from opening to another page. Next, be sure to leave the “Link Type” field blank.

The second entry is in the Code field. As shown in the example, the Code field contains the name of the JavaScript function to either stop or pause all media players. In the example, the code to pause all payers is entered. To stop all players, you would enter onclick=“stopAll()” into the Code field instead. Feel free to enter text into the Title field (displayed as a tooltip) or customize the link’s appearance.

To place the link on the entire Text object instead of the embedded text, select the Text object, right-click on it, and choose “Edit Link.” Alternately, select the Text object and open the Quick Edit window from the Tools toolbar, or use the keyboard ALT+Q shortcut. Ensure any embedded text in the Text object does not have a link. A Text object with multiple links may not work in some browsers.

Figure 4 is an example of the Quick Editor’s Link tab. You can see the hashtag entered in item 1 and the JavaScript code entered in item 2. The code you enter would be either onclick=“stopAll()” to stop all players or onclick=“pauseAll()” to pause all players.

Sample project file

Download a sample SiteSpinner project (in zipped format) using the button below. When you preview this project, move or copy the enclosed media folder and all its contents into your Preview folder.