HTML5 Audio. Replacing Element still the same audio file (cached) how to solve?

Question

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.

Answer 1

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.