0

I have a page. It has upload mp3 and an audio player. You upload and javascript uploads mp3 file, reloads page, and the audo player is now loaded with the mp3 file.

FYI. I call a php function to load up the mp3 file.

all is working fine.
EXCEPT, NOW I have issue where I ONLY need to refresh or reload the audio player or reload the mp3 file, which is returned from my php function.

I have tried this: $('#mp3Player').html(document.URL + ' #mp3Player');

and tried: .load and .replaceWith

however, all are not correct, one just loads another mp3, or the whole page, or just adds text inside the player, etc.

HOW do I do the exact same thing as a page reload, BUT ONLY for the audio player?

thanks!

NOTE: the javascript itself doesn't know or have the new mp3 file. it only knows that a new mp3 has been uploaded, and after it's done... it refreshes the page. the PHP code grabs the new mp3 file.

again, a page refresh/reload works perfect. BUT I have need to ONLY refresh the div or the audio player, NOT the whole page.

user1864734
  • 105
  • 2
  • 12
  • Does this answer your question? [change – Joshua Chan Dec 08 '19 at 23:12
  • Thanks Joshua, while that does seem better, I believe it will not work due to the fact, the javascript doesn't know the file to play. So I can't change the source from within the javascript. I have a php function that will change the source (ie. return a new mp3 file). So the page refresh works fine... can't i just somehow do a page refresh but ONLY for the div or the audio control, etc. etc. --- and the javascript is being called from the upload, so "after" the upload is complete, then it needs to fire off the command to refresh/reload the player – user1864734 Dec 08 '19 at 23:28
  • Where are you uploading the audio? You could call your PHP code using AJAX by writing it as an API, returning you the audio URL, update the audio src and load the audio element. You can also create object URL from blob/base64 encoded audio data following [Javascript make audio blob](https://stackoverflow.com/a/40329529/9758160). It really depends on your flow and use-case, additional info will help. – Joshua Chan Dec 09 '19 at 00:04
  • thanks... yes, I'm sure I could rewrite stuff, but i'm using other JS for file upload, etc. but that isn't in the cards. I guess it is not possible to refresh ONLY the part of the page that needs to be refreshed? I had thought you could mimic what happens on a page reload? – user1864734 Dec 09 '19 at 04:24
  • It IS possible, through AJAX... The backbone of the dynamic web app we have right now is exactly that. Please read [How to load content using Ajax](https://stackoverflow.com/questions/21746519/how-to-load-content-using-ajax), and also [Understanding And Using REST APIs](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) – Joshua Chan Dec 09 '19 at 04:35
  • thanks Joshua, nice links! I was able to figure it out, even though used a slightly different way :) – user1864734 Dec 11 '19 at 08:34

0 Answers0