Making an audio player disappear when there's no source

Ask the community
, , ,
1

I’m having trouble with
I was offered code (which looks OK to me, though I am not a coder) to make an audio player on my dynamic page disappear if there is no audio source, using collapse(). Specifically, my understanding is that it defaults to collapsed, checks if there is an audio file URL and, if so, is supposed to expand the audio player to make it visible and aim it to that URL.

However, the player currently appears even if the CMS cell (audioFileUrl2) is empty, and what’s more, loads and gets ready to play some phantom music that is not even part of my site.

To clarify: This particular song has no audio file at the moment, so the player does not need to appear; other items/pages in the dynamic collection work just fine and play the audio file linked in audioFileUrl2.

I am pretty sure this unwanted audio player was happening even BEFORE I added the collapse() code, but I cannot be sure as I was fixing many things.

The code is:

$w.onReady(() => {
    const dataset = $w("#dynamicDataset");

    $w("#audioPlayer2").collapse();

    dataset.onReady(() => {
        const item = dataset.getCurrentItem();

        if (!item) {
            return;
        }

        if (item.audioFileUrl2) {
            $w("#audioPlayer2").expand();
        } else {
            $w("#audioPlayer2").collapse();
        }
    });
});

My questions are:

  1. Do certain audio players simply not work in the dynamic page environment? This could be a problem that negates the need to look at the code.
  2. However, if the player itself doesn’t matter, then what might be making this player appear, loaded up with a random audio file?

Working in
Wix Editor, Dev Mode, CMS

Site link
www.lyricist.net/songpage/away-away is this offending page.

What I’m trying to do
Set up the page (and all the dynamic pages) with code so that the audio player only shows up if there is a URL in the table to an audio file for it to play music from.

What I’ve tried so far
I’ve spent hours on this, with ChatGPT trying to help.

I hope this is enough information! Thanks for any help you can offer.

2

Replace your code with the one I’ve provided below:

$w.onReady(() => {

    $w("#audioPlayer2").collapse();

    $w("#dynamicDataset").onReady(() => {
      let item = $w("#dynamicDataset").getCurrentItem();
    
      if ((item.audioFileUrl2) && (item.audioFileUrl2.trim() != "")) {
            $w("#audioPlayer2").expand();
        } else {
            $w("#audioPlayer2").collapse();
        }

    });

});
1 Like
3

Honestly, some of this is pretty unnecessary

In the editor, set the video player to collapsed by default, then this is all that’s needed

const dataset = $w(‘dynamicDataset’)

dataset.onReady(() => {
    if (dataset.getCurrentItem().audioFileUrl?.trim()) $w(‘audioPlayer2’).expand()
})
1 Like