Custom Music Player - Play song where it left off after Page Refresh

Hi, I don't know much about JS so i have a piece of JavaScript code used for a Custom Music Player that was created with ChatGPT. But ChatGPT seem to have some limit for how long code it can write because when i ask to fix so the song will keep playing after i refresh the page, it stops generating the code pretty much in the middle of the script... So i hope that someone here can help me fix this. I do know that localStorage needs to be used. But i dont know exactly how to do it. The script is too long to paste here in the chat so i have to upload it to pastebin... https://pastebin.com/60BhnxPz
Pastebin
Custom Music Player - Pastebin.com
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
27 Replies
Tok124 (CSS Nerd)
Let me know if i also need to upload the html, css, php and MySQL Query to create the table Also, i do know that songs cannot auto play until a user interacts with the page, So i need a fix for that aswell. otherwise the song cannot continue automatically after page refresh
13eck
13eck2y ago
The HTMLAudioElement.currentTime can be called to either get the current playback time or set the playback time. Say for example the sone is 2min long (120 seconds) and it's been playing for 38 seconds. HTMLAudioElement.currentTime will be 38. You save that and the current song (HTMLAudioElement.currentSrc) in local storage. On page load you load the song and timestamp and BOOM! Read to go. Just waiting for the user to click play again As for "getting around" this, you can't. The user must interact with the page…mostly :p Chrome and Chromium-based browsers have some funky rules on if it's allowed or not: https://developer.chrome.com/blog/autoplay/
Tok124 (CSS Nerd)
Yeah i know. But it should be possible to make it so that the song starts where it left off immediately after i interact with the page. Even if i dont actually click the "Play" button
13eck
13eck2y ago
As for your code it's…well, it's by ChatGPT. And it show. And yes, that's bad. Comma-separated variable declarations, XHR, string concatenation, modulo operator instead of testing current index. Lots of bad/sus practices here
Tok124 (CSS Nerd)
Yeah i know. ChatGPT provides a quick solution but usually it's a terrible one xD
13eck
13eck2y ago
For that you can add a click/tap and keyboard event handlers to the document. So once the user touches their keyboard, clicks the screen or taps it you can start playing
Tok124 (CSS Nerd)
Okay thanks 🙂 Not sure exactly if i know how to add this to my code but i will try 🙂
13eck
13eck2y ago
Something like this
const startAutoPlay = () => {
audio.play().then(() => {
console.log("Autoplay started!");
document.removeEventListener("click", startAutoPlay);
document.removeEventListener("keyup", startAutoPlay);
}).catch(console.log);
}
document.addEventListener("click", startAutoPlay);
document.addEventListener("keyup", startAutoPlay);
const startAutoPlay = () => {
audio.play().then(() => {
console.log("Autoplay started!");
document.removeEventListener("click", startAutoPlay);
document.removeEventListener("keyup", startAutoPlay);
}).catch(console.log);
}
document.addEventListener("click", startAutoPlay);
document.addEventListener("keyup", startAutoPlay);
Tok124 (CSS Nerd)
Oh okay, thanks 🙂
13eck
13eck2y ago
And an example for the next button:
// ChatGPT's code
currentSongIndex = (currentSongIndex + 1) % songList.length;
// my suggestion
// check if the song index is the end of the list
// if yes, set it to the beginning. if no, incriment it by 1
currentSongIndex = currentSongIndex == songList.length -1 ? 0 : ++currentSongIndex;
// ChatGPT's code
currentSongIndex = (currentSongIndex + 1) % songList.length;
// my suggestion
// check if the song index is the end of the list
// if yes, set it to the beginning. if no, incriment it by 1
currentSongIndex = currentSongIndex == songList.length -1 ? 0 : ++currentSongIndex;
Tok124 (CSS Nerd)
Ooh alright thats awesome ! Thanks
13eck
13eck2y ago
For the previous song button, check current index. If 0, set to length -1, else decrement index by 1
Tok124 (CSS Nerd)
Oh alright. Thanks. I should be able to apply this to my code :p
13eck
13eck2y ago
Fixed my startAutoPlay function to remove the event listeners. Otherwise at each and every click and keyup it'll try to play the audio!
Tok124 (CSS Nerd)
So yeah, now i can just interact with the page and the song auto play. But yeah, the next issue is to fix it so that it will save the time in localStorage :p
13eck
13eck2y ago
At what point are you trying to get the timestamp? Before the window closes? When the user hits the pause button? Something else?
Tok124 (CSS Nerd)
Im trying to get the timetamp exactly before i refresh the page. The thing is that i have a lot of pages on my site. And as you know, if you visit another page on the same website, the page will refresh. All i want is that the users can navigate around on my site and the song keeps playing Because its kinda annoying to have to listen to the song from start just because you went on to a new page :p
13eck
13eck2y ago
I see, one sec. Lemme find the right event…
Tok124 (CSS Nerd)
Okay thanks 🙂
13eck
13eck2y ago
Found it! beforeunload https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event This event is fired before the page transitions away
Tok124 (CSS Nerd)
Ooh o.O
13eck
13eck2y ago
I've not worked with local storage much, so this might not be fully correct. But it should work.
const SaveToLocalStorage = () => {
const timestamp = audio.currentTime;
const currentSong = audio.currentSrc;
const objToStore = {timestamp, currentSong};
localStorage.setItem("currentSong", JSON.stringify(objToStore));
}

window.addEventListener("beforeunload", SaveToLocalStorage);
const SaveToLocalStorage = () => {
const timestamp = audio.currentTime;
const currentSong = audio.currentSrc;
const objToStore = {timestamp, currentSong};
localStorage.setItem("currentSong", JSON.stringify(objToStore));
}

window.addEventListener("beforeunload", SaveToLocalStorage);
Tok124 (CSS Nerd)
Okay thanks. I will try it 🙂
13eck
13eck2y ago
Next up you'll need to add a function to read from local storage, parse the JSON string, set the current song and timestamp, and then play the song. But I'll leave that bit to you
Tok124 (CSS Nerd)
Oh okay yeah, i noticed that it still does not play from where it left off. But thank you very much for your time. This has really helped a lot 🙂
13eck
13eck2y ago
It won't play from where it left off yet because you have to code that bit :p My above code only stores the info, it's up to you know to reverse it!
Tok124 (CSS Nerd)
Yeah i know 🙂
Want results from more Discord servers?
Add your server