refresh audio source when ajax function is successful

Question

On my WordPress site I have a form that converts text to audio using AJAX and PHP. The file name remains the same when the converted text is updated, it just recreates the file.

Everything seems to work fine except that the audio source to be played is not being reloaded/refresh when I update the text.

The default download button gives me the updated file and if I refresh the whole page, I can only then hear the updated file playing.

My code (simplified for relevance) --

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');
  var path = $("#path").val();
  myVideo.src = path;

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});

<audio id="player" controls>
  <source id="audiosource" src="<?php echo $thepath; ?>" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<textarea name="pollytext" id="pollytext"></textarea>
<button type="submit" id="savetext" name="savetext">save text</button>

How can I make it so that when the file is updated, so is the audio that plays?

UPDATE

I tried the following suggestion but it didnt fix the issue -

 $.ajax ({        
         data: {
          action: 'polly_pros', 
          pollytext: txt,
          rate: rate,
          voice: voice
        },
         type: 'post',
         url: polpro.ajax_url,
         cache: false,
       success: function(data) {
           console.log(data);
 myVideo.src = path+"&rnd="+new Date().getTime();
myVideo.load();
myVideo.get(0).play();
        },
          error: function() {
            console.log("Error");            
        }
            });

Answer 1

Most probably it is because the function called by Ajax only reloads the file but does not save a new one. So browser does not reload this file.

Here is a solution

You have to add random string by the end of the file name so that browser would think that this is a different file and reload it

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');
  var path = $("#path").val();
  myVideo.src = path + "?" + new Date().getTime();

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});

Timestamp is the number you know for sure that will be different every time.

EDIT

If it works sometimes and sometimes not, it probably means that sometimes Ajax is faster and sometimes slower. This should help

jQuery(document).on('click', '#savetext', function(e) {
  e.preventDefault();
  var myVideo = $('#player');

  $.ajax({
    data: {
      action: 'polly_pros',
      pollytext: txt,
      rate: rate,
      voice: voice
    },
    type: 'post',
    url: polpro.ajax_url,
    cache: false,
    success: function(data) {
      console.log(data);
      var path = $("#path").val();
      myVideo.src = path + "?" + new Date().getTime();
      myVideo.load();
      myVideo.get(0).play();
    },
    error: function() {
      console.log("Error");
    }
  });
});