I am looking for a way to add a floating audio player to the bottom of my page.
I need the audio player to link to what is being previewed on a list on my webpage. I have an audio field in a collection that is linked to a list on a webpage. When the user clicks play on the play button to listen to the audio from the list, I would like the relevant data to be shown in the audio player that I have pinned to the bottom of the screen.
Is there a way to do this through code? I have tried a few methods but to no avail. Any ideas?
Any help will be appreciated
I’m not really sure what mix of things you are trying to do?
When you say “linked to a list on a webpage” do you mean a page on your Wix site? Or an external website? If so does that external site have an audio player you have embedded into your page to use? Are you trying to create an audio player from scratch somehow? What type is the “audio field”, an external link or actual Wix Audio field?
If you’re just using the Wix Audio player thing for example I don’t think you’ll be able to do much with it outside of anything you’ve uploaded yourself to your Wix site. Maybe I’m wrong about that but the last time I used it (many years ago) that was it’s sole function.
So you might have to be a bit clearer about exactly what you’re trying to achieve and with what elements and so on, try uploading some screenshots of what you have so far maybe?
Hopefully we can get to the bottom of it with some clearer information!
1 Like
@themusingsofmaars Thank you for your response and sorry for the confusion!
A little more info: the audio player is a wix audio player that I have on my own webpage. The audio field is an audio field within a wix collection.
The wix collection is connected to a list repeater on my wix site, and within it, I have an audio player. The audio player is also connected to the collection so that the audio player track title links with my “title” text field etc.
In addition to the list repeater, I have another audio player that I want to pin to the bottom of my screen. When a user previews the audio from the list repeater, it should play via the audio player at the bottom of the screen. Similar to the functionality of Spotify. I just cannot find the right code to make this happen, if it is at all possible.
I hope this is a little clearer and the image provided helps.
Thank you.
1 Like
Got it, it’s all “in house” so to speak so that’s nice and neat to work with!
I was going to say an easy fix would be to add the player to the repeater but you already have that and want the one at the bottom more for show… or the one in the repeater is more for show, whichever way we look at it, the trouble being if we could get it working then the 2 audio players might play audio at the same time over each other? I’m not exactly sure how that works?
I know it’s not exactly what you want but it might be easier to fake one of the players, so either the bottom one is an image, track name etc and says something like “Now Playing…” or whatever but doesn’t have actual controls.
Or probably more preferably in your repeater you don’t use an audio player and have the song details and a fake play icon as a button which we can code to turn from play to a pause icon on click so the real audio player is the bottom one. Perhaps we could work out if there is code to make the bottom player start playing onClick from the repeater fake icon click too.
(this part might be easy by the looks of it:)
$w('#playbutton').onClick(() => {
$w('#myAudioPlayer').play();
});
And do the same for the pause or stop button with .stop I guess?
But the main thing is getting that bottom player to filter when the repeater item is chosen. I’m actually stuck on this exact problem with filtering an Image via a repeater of many images and haven’t found an answer, but it must be possible to do it!
My theory so far is that we need 2 datasets both the same, the one connected to your repeater showing all the songs and a second dataset shows only 1 item and this is connected to the single audio player at the bottom. You filter the 2nd dataset by a piece of information from the first, say “title” field or whatever, something unique to each item. This will obviously work and mean that the first item from your repeater will show on the bottom player. Now we just need some code that when a repeater item is clicked it will sync that 2nd dataset to the new item in the first if that makes sense? This is where I am stuck myself unfortunately.
I made a quick example site to show the sort of way I could see it working:
The dropdown at the top is just to prove to us that if you filter the repeater the individual song player at the bottom will also change with it. We wouldn’t include this on a real site, just for test purposes.
If we ignore that and press play on the songs on the repeater it will work as intended, I don’t have any audio so it must be playing a default Wix tune, lol. But as you can see the play button turns to a pause button (X for now) and the player plays music. Press the X and the song pauses, hides the X and shows the Play button again. Also if you use the play and pause button on the Audio player at the bottom the repeater buttons will change correctly too.
So that’s the basic functioning idea, we just need to find a way to use the repeater as a filter in the same way as the dropdown (except it wouldn’t hide the other options of course) and play the specific clicked item.
(Obviously I haven’t tried it but perhaps you could use your original design with the 2 audio players, one in the repeater and the one at the bottom, it would work exactly the same in theory to how I have it now, but not sure if 2 lots of audio would play… it might be possible and would look more how you wanted it!)
Thanks for your help with this. I actually managed to get this running with a few extra tweaks. I had add a separate text and image element to the list repeater and use the audio player within the list repeater as a way to store the audio.
I noticed that the songs would start from their last position, so I’ve had to add a seek value to start from the beginning. I’ve also added .hide() and hidden just to neaten the whole thing up. Let me know what you think - i’m pretty pleased with it. The only little niggle I have, is that I cannot press the pause button on the large audio player (masterPlayer) when it is pinned to the bottom of the screen, but it works fine when it is not pinned. Any ideas?
// Keep track of the currently playing song
let currentPlayingSong = null;
// Define an exported function for the custom play button click
export function playButton_click(event) {
// Get the repeater item containing the clicked element
const repeaterItem = $w.at(event.context);
// Find the relevant data elements within the repeater item
const songTitle = repeaterItem("#text17").text; // Element ID containing song title
const audioURL = repeaterItem("#audioPlayer5").src; // Element ID containing audio source
const coverImageURL = repeaterItem("#image3").src; // Element ID containing artwork
// Get a reference to audioPlayer4
const audioPlayer4 = $w("#masterPlayer");
const audioPlayer5 = $w("#audioPlayer5");
$w('#masterPlayerContainer').show(); // Audio player shown on play
// If the same song is clicked again, toggle pause/play
if (currentPlayingSong === audioURL) {
if (audioPlayer4.isPlaying) {
audioPlayer4.pause();
} else {
audioPlayer4.play();
}
} else {
// If a different song is clicked, set the new song and play from the beginning
currentPlayingSong = audioURL;
audioPlayer4.trackName = songTitle;
audioPlayer4.src = audioURL;
audioPlayer4.coverImage = coverImageURL;
audioPlayer4.seek(0); // Start from the beginning
audioPlayer5.seek(0)
audioPlayer4.play();
}
}
// Function for the "x" button to close the player
export function closeMasterPlayer_click(event) {
const audioPlayer4 = $w("#masterPlayer");
$w('#masterPlayerContainer').hide();
audioPlayer4.stop();
}
3 Likes
Aha! The old frozen footer seemed to be the issue.Sorted!
1 Like
Wow, you’ve done a really great job there!! I’m glad it was possible to get something like that working!! I noticed the song playing from the previous songs last position but I had no idea how to fix that so nice one again!!
I’m hoping I can “steal” this code for my similar purposes too, really awesome work all around! 
@themusingsofmaars No problem at all! Yes of course and if you need anything help in the future just give me a message
Hey @Guddergud,
I’m hoping to achieve something similar but I’m falling flat. I have a dataset with Album Art, Artist Name, Track Name and Audio file, and it’s reflected in a repeater that includes each of these four categories. From the repeater I can play each audio file, but ideally there would be a mirror of this process happening at the bottom of the page that can control the playback of each repeater item much in the same way we have a big playback control at the bottom of a Spotify browser. Any chance you can give me a guide on how you achieved this? Or point to relevant resources? I know there are similar articles floating around, but I’m in a bit over my head! Much much appreciated in advance!!
