How to automatically pause other audio players and play only the one that's selected on a Wix website?

So on my website, there are few simple audio players that are live streaming radio stations.

And here is my code for these audio players:

<audio src="https://cbc_r2_tor.akacast.akamaistream.net/7/364/451661/v1/rc.akacast.akamaistream.net/cbc_r2_tor" controls style="width:75px;" volume="1.0"> </audio>

<audio src="http://204.2.199.166/7/288/80873/v1/rogers.akacast.akamaistream.net/tor925" controls="true" style="width:75px;" volume="1.0"></audio>

<audio src="http://indie.streamon.fm:8000/indie-48k.aac" controls="true" style="width:75px;" volume="1.0"></audio>

These players don't pause automatically when the other is being played.

I did some research on this topic and found this script here on stack...

<script>  
document.addEventListener('play', function(e){    
    var audios = document.getElementsByTagName('audio');    
    for(var i = 0, len = audios.length; i < len;i++){    
        if(audios[i] != e.target){    
            audios[i].pause();    
        }    
    }    
}, true);  
</script>

Btw I'm using wix.com to build all of this and I'm really not sure where to put this script exactly. I tried to put it beneath in Edit code where the code of the individual audio player is but that doesn't seem to work at all.

What would be the simplest way to achieve this?

I'm a beginner so any help would be appreciated. Thanks in advance :)

Solution

Wix does not expose the window or document objects.

However, you can use $w().

As in let myElement = $w("#myElement");

See the site for more: https://www.wix.com/code/reference/%24w.html

EDIT

I'd advise against using 'document' as a variable name here, it could be confused with being the real document object.

Here are some pointers from the Wix site I indicated above that should sort out what you are trying to do...

Getting elements from the page (from Wix):

let imageElements = $w("Image");

let firstImage = imageElements[0];

Just replace 'Image' with 'Audio';

Use the onReady event (from Wix):

function onReady(initFunction: ReadyHandler): void
callback ReadyHandler(): Promise<void>

Put your initialisation code in the onReady event - otherwise the DOM may not be ready.

Creating your event handler (from Wix):

$w("#myElement").onEvent( (event, $w) => {
    let targetId = event.target.id;  // "myElement"
});

$w("#myElement").onEvent( (event, $w) => {
    let eventType = event.type; // "click"
});

So, use something like:

$w.onReady(function() {
    let myAudios = $w("audio");

    myAudios.onEvent((event, $w) => {
        let eventType = event.type;
        if(eventType == "play") // or use 'click' if play is not exposed
        {
            let targetId = event.target.id;
            for(var i = 0; i < myAudios.length; i++) {
                if(myAudios[i].id != targetId) {
                    myAudios[i].pause();
                }
            }        
        }
    });
});

Final note.

You'll want to put your javascript code on the page you are working with using the code panel.

From Wix:

The Public section of the sidebar contains files that are publicly accessible from your site. You can create JavaScript files and text files for use in public, and you can organize these files in folders. Your page and site code, which are also publicly accessible, do not appear in the Public section.

To edit page and site code, use the code panel.

See this short video from Wix (you can jump to 30secs) to see where the code panel is. https://support.wix.com/en/article/working-in-the-code-panel

EDIT 2

I finally gave in, and created a Wix account to test this.

Unfortunately, you are limited to what you can do in javascript regarding the APIs they expose from the objects placed on the page.

However, there is a way to get your functionality:

Create an HTML iframe.

Click Add, then More, then drag the HTML iframe onto your page.

Double-click it, or select it and click 'Edit Code', then add all of the below to the 'Add your code here (HTTPS only)' box.

<audio src="http://narwakk.free.fr/musiques/Bob/Bob Marley - Roots, Rock, Reggae.mp3" controls> </audio>
<audio src="https://jazz-wr06.ice.infomaniak.ch/jazz-wr06-64.aac" controls></audio>
<audio src="https://hpr.dogphilosophy.net/test/wav.wav" controls></audio>
<script>
    document.addEventListener('play', function (e) {
        var audios = document.getElementsByTagName('audio');
        for (var i = 0, len = audios.length; i < len; i++) {
            if (audios[i] != e.target) {
                audios[i].pause();
            }
        }
    }, true);
</script>

Remove any code you had for the audios before, preview it, and you should be done (apart from using your own sounds).

I'll leave the previous edit as is, because it generally works - just not for audio tags...