jquery - ajax函数成功时刷新音频源

Question

在我的 WordPress 网站上，我有一个使用 AJAX 和 PHP 将文本转换为音频的表单。更新转换后的文本时，文件名保持不变，只是重新创建文件。

一切似乎都工作正常，除了当我更新文本时要播放的音频源没有重新加载/刷新。

默认的下载按钮为我提供了更新的文件，如果我刷新整个页面，我只能听到更新的文件播放。

我的代码(为了相关性而简化)--

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>

如何才能使文件更新时播放的音频也更新？

更新

我尝试了以下建议，但没有解决问题 -

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

很可能是因为 Ajax 调用的函数只重新加载文件，但不保存新文件。因此浏览器不会重新加载该文件。

这是一个解决方案

您必须在文件名末尾添加随机字符串，以便浏览器认为这是一个不同的文件并重新加载它

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");
    }
  });
});

时间戳是您确定的数字，每次都会不同。

编辑

如果有时有效，有时无效，则可能意味着 Ajax 有时更快，有时更慢。这应该有帮助

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");
    }
  });
});