1

I upload the audio files in server and play it using audio tag. Once I upload the file, it plays well. If I update the audio file in that path with the same name, it plays previous one. But specified file has new audio only. It is not play the new audio even If i refresh the page. IF I close the tab and open in a new one. Then it play the new audio.

The above issue is ocurring in a firefox browser but in chrome it is working fine.

vaishali
  • 325
  • 2
  • 11

2 Answers2

0

The fact that it works on Chrome but not on Firefox makes it look like a caching issue.

You cannot control the way the browser caches files but you can edit the headers sent by the server.
Specifically, the Control-Cache header in your case should be set to:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

See this SO question for caching in general, and that one for audio caching precisely.

filaton
  • 2,257
  • 17
  • 27
  • And have you tried the "cache-busting" technique? Namely, change the URL to which your audio tag points, using a "dummy" request field. See the second part of that question: https://stackoverflow.com/questions/25821915/how-to-force-the-html5-audio-tag-to-reload-a-changing-file – filaton May 30 '17 at 13:26
  • I have checked this but it is not working. but it deso not store the cache but how it is playing the previous one. – vaishali May 30 '17 at 14:02
0

Faced the exact same issue with Firefox a while ago and as @filaton has mentioned, it looks like a caching issue. Since you have not mentioned any code in the questions, I'll demonstrate what I did to solve the issue:

function readCapt(audiotag) {
    var readCaptcha =  document.getElementById(audiotag);
    var d = new Date();
    var n = d.getTime();
    readCaptcha.src = local_url+'/getaudio?rand='+n; //n is a unique parameter which changes during every request to the browser
    //readCaptcha.src = local_url+'/getaudio?'; the original line which threw a bug
    readCaptcha.play();
}

In my case, the URL of the audio file is fetched using the JavaScript function mentioned above. Adding the date and time parameter (n) to the end of the URL solved the issue once for all. I'm still curious to know why this issue specifically occurs in Firefox and not for other browsers. Will return once I find out the answer.

Anish Narayan
  • 72
  • 2
  • 8