11

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.

zer02
  • 3,963
  • 4
  • 31
  • 66

4 Answers4

5

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.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • Thanks for answering this. I will take a closer look into HTTP Headers. – zer02 Oct 24 '12 at 11:20
  • 1
    @zer02 I fixed the issue simply by passing a timestamp as querystring parameter. ex: `var param = new Date().getTime(); src = src + "?cb=" + param; audio.load(src); audio.play(); ` thanks to the answer http://stackoverflow.com/a/25823431/1201322 – Ravimallya Sep 08 '16 at 12:24
  • @Ravimallya to me this trick doesn't work ...on a streaming file ... when I stop and replay, it starts playing exactly from the point in which I stopped, instead of refreshing the buffer, in order to get the point really streamed by the station – Tormy Van Cool Feb 09 '19 at 10:33
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.

Motomotes
  • 4,111
  • 1
  • 25
  • 24
2

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.

Rhys
  • 2,807
  • 8
  • 46
  • 68
0

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.

Victor Yeung
  • 21
  • 4