Play next audio player in a repeater

Ask the community
,
1

Hello guys,

I got a tricky problem here,

This is what I want: When an audio players ends, it plays the next audio player in my repeater.
What is happening: When an audio player ends, it restarts the same audio player in my repeater
my code:

// For full API documentation, including code examples, visit https://wix.to/94BuAAs

$w.onReady(function () {
 // TODO: write your page related code here...
   $w("#audioPlayer1").onEnded( (event) => {
 let $item = $w.at(event.context);
    $w("#dynamicDataset").next()
     .then( () => {
    $item("#audioPlayer1").play()
    console.log("Finished moving to the next item");
  } );
  } );

});

Can someone provide a smart way to do this?
It would be really appreciated <3

2

I’m not sure that this is a smart way, but it’s one way…

$w.onReady(function () {
   $w("#audioPlayer1").onEnded(async (event) => {
      let $item = $w.at(event.context);
      await $item("#audioPlayer1").stop();
      let endedSongItemData =      $item("#dataset1").getCurrentItem();
      let id = endedSongItemData._id;
      let idx = 0;
      $w("#repeater1").forEachItem(($i, itemData, index) => {
         if (id === itemData._id) {
            idx = index;
         }
      })
      idx = (idx < $w("#repeater1").data.length - 1) ? idx + 1 : 0;
      $w("#repeater1").forEachItem(($i, itemData, index) => {
         if (idx === index) {
            $i("#audioPlayer1").play();
         }
     })
   });
});

I set this up to repeat the “playlist”. You could change it to just stop after the last audio track.

Disclaimer: I put this together sort of quickly. It seems to work, probably has bugs, but it most likely won’t cause your computer to melt.

3

It works just as expected, thanks

but is there a way to make it keep going to the next audio player even when it’s not on the same tab?

For example, I published the site and played the audio in the repeater, when I switch to a different chrome tab, I want it to enter the next audio player but it just stops till I enter the tab again
Same thing on my phone, when I lock screen it just stops playing…

Your answer works great tho
I just wanted it to play even when it’s not the same tab idk if it’s wix problem or code problem

Thanks,
DJ bon26

4

@okeyiwobi Hmmm, I just tried running the site and the music even plays when I change tabs, browser pages, etc. I only tried on my MacBook, didn’t try it on my phone.

Maybe it depends on the music. I’m playing AC/DC. :upside_down_face:

5

@yisrael-wix Yeah you got a point :thinking:

Thanks for the answer, you answered the basic question i needed
When you notice the problem I’m having please update me:)
other than that thank you

DJ bon26

6

Hey @yisrael-wix ,

I figured a better, easier way to play next audio and it plays with screen off on mobile and outside the made tab

first of all I numbered the repeater with counter in each Item like this: (Which helped me out later)

Here’s how I numbered it:

export function dataset12_ready() {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
  $w('#repeater1').onItemReady( ($item, itemData, index) => {
        $item("#numberText").text = (index +1).toString() + ".";
    })
}

Then what I did next was getting the current text item. Let’s say it was the first track, the text would be (1.). so I added an audioplayer end function and and the text + 1 which will be equals to 2 (1. + 1 = 2)
Then I added a code that gets the item that the text is 2 + “.” (2.) and it plays the the audio

here’s the code:

export function audioPlayer1_ended(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here:
 let $item = $w.at(event.context);
 let endedSongItemNumber = $item("#text162").text.toString();//converting it into a number
 let nextItem = (Number(endedSongItemNumber) + 1).toLocaleString()//adding 1 to the number
 let nextItemText = nextItem + "."
    $w('#repeater11').forEachItem(($item1, itemData, index)=>{
 if ($item1('#text162').text === nextItemText)
      $item1('#audioPlayer1').play()
      console.log(nextItemText)
    })
}

You must’nt reply back lol

I added this code for people who prefers it this way

DJ bon26

7

@yisrael-wix , Hi … this script works fine on a desktop but not on mobile, any suggestions?

8

Hi,
I tried this script , it works on the desktop, and shows as working on the mobile preview, however when testing it on actual mobile browser, it does not play the next audio, is there anything with the audio player configurations which needs tweaking or is it the script… Can someone guide?