HTML5 Audio. Replacing Element still the same audi

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 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.

Answer 2

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.

Answer 3

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.

Answer 4

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.