I am using the HTML5 Audio element inside my HTML file.

Trying many methods,I just cannot manage to replace the audio file via AJAX, it still returns the same audiofile.

<div id="audiodiv">
   <audio id="audioelement">
    <source src="test.ogg" type="audio/ogg">
   </audio>
</div>

So I record a new file called test.ogg which overwrites the old one. I tried using jQuery and using$("#audiodiv").html('') and re-rendering this part. Then fetching the element via document.getElementbyID and then using the .play() function .

It returns the same old test.ogg,which was already overwritten by the new one.

So I tried to delete the cache, still the same problem.

The only way this works is deleting the cache and closing the browser and calling the page again...

How can I solve this?

Thank you very much for help.

I am using the HTML5 Audio element inside my HTML file.

Trying many methods,I just cannot manage to replace the audio file via AJAX, it still returns the same audiofile.

<div id="audiodiv">
   <audio id="audioelement">
    <source src="test.ogg" type="audio/ogg">
   </audio>
</div>

So I record a new file called test.ogg which overwrites the old one. I tried using jQuery and using$("#audiodiv").html('') and re-rendering this part. Then fetching the element via document.getElementbyID and then using the .play() function .

It returns the same old test.ogg,which was already overwritten by the new one.

So I tried to delete the cache, still the same problem.

The only way this works is deleting the cache and closing the browser and calling the page again...

How can I solve this?

Thank you very much for help.

• javascript
• html
• caching
• html5-audio

• 3 You can also add a cache busting param in the audio src url like var src = "test.ogg?cache-buster=" + new Date().getTime() – maxdec Commented Aug 15, 2016 at 15:17
• not working as i use similar method on my js file – chings228 Commented Jan 23, 2020 at 3:08

4 Answers 4

If you're not going to change the name of the file but keep updating it then you need to add immediate Expires HTTP headers to the response on the server side. Exactly how you do this depends on which server you're using. Common ones include Apache and IIS.

However, it would be easier, and also better practice, to let the browser cache the audio and just give each new file a different name.

I used the same file server side using a JS no cache trick like this:

var audioPlayer =  $('<audio src="/' + mp3FileName + '?noCache=' + Math.floor(Math.random() * 1000000) + '" type="audio/mpeg" autoplay controls></audio>');

Setting the Expire, Last-Modified, and Cache-control header didn't work for me, but adding a random string of numbers to the src as a GET variable did the trick.

The quickest and easiest solution is to change the name of the file. This will resolve the issue. Otherwise go with robertc's solution. Personally I would just change the filename.

IF you place the <audio> tag in an <iframe>

THEN refresh the <iframe> with a 5 second delay during the event where you upload your new sound file. It might output your new sound file.

$('#UploadNewSoundButton').click(function(){
       //insert code that uploads new sound file 

       setTimeout(function(){
            window.frames['iframeWithAudio'].location.reload();
        },5000)   
 })

maybe??? I'm new here.