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
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
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/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
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
Yeah i know. ChatGPT provides a quick solution but usually it's a terrible one xD
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 playingOkay thanks 🙂 Not sure exactly if i know how to add this to my code but i will try 🙂
Something like this
Oh okay, thanks 🙂
And an example for the next button:
Ooh alright thats awesome ! Thanks
For the previous song button, check current index. If 0, set to length -1, else decrement index by 1
Oh alright. Thanks. I should be able to apply this to my code :p
Fixed my
startAutoPlay
function to remove the event listeners. Otherwise at each and every click and keyup it'll try to play the audio!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
At what point are you trying to get the timestamp? Before the window closes? When the user hits the pause button? Something else?
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
I see, one sec. Lemme find the right event…
Okay thanks 🙂
Found it!
beforeunload
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
This event is fired before the page transitions awayOoh o.O
I've not worked with local storage much, so this might not be fully correct. But it should work.
Okay thanks. I will try it 🙂
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
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 🙂
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!
Yeah i know 🙂