ajax 函数成功时刷新音频源

Question

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

除了当我更新文本时要播放的音频源不是 reloaded/refresh 之外，一切似乎都正常。

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

我的代码（为了相关性而简化）--

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 ({        
        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 newAudio = $(createAudio(path));
           $("#player").replaceWith(newAudio);
           $("#player").load();
           newAudio.play();
        },
        error: function() {
           console.log("Error");            
        }
});

function createAudio(src) {
  output =  '<audio id="player">';
  // you can add more source tag
  output +=  '<source src='+src+'" type="audio/mp3" />';
  output +=  '</audio>';
}

如果这不起作用，我会尝试这样做以在鼠标进入元素时播放音频（从此处提取：Loading Audio Element After Dynamically Changing the Source）：

var audio = $("#audio")[0];
$("#audio").mouseenter(function () {
   audio.load();
   audio.play();
});

如果以上方法都不起作用，您可以像这个人 () 那样尝试类似的方法，并最终使用纯 javascript（最后一个答案）使其正常工作，例如：

var audioElement = document.getElementById('audio');
audioElement.setAttribute('src', src);
// Load src of the audio file
audioElement.load();
audioElement.play();

希望对您有所帮助！

Answer 2

在 url 路径中添加时间戳，同时进行 XHR 调用。如果它不起作用，则在服务器端添加 prevent cache header 。希望有用。

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

Answer 3

根据您的方法和希望如何在页面上设置所有内容，您可以在页面上有一个 "div" 区域，您可以在页面上使用 AJAX 类型 GET 刷新该区域。这样您就可以将视频重新加载到您的页面中，然后像往常一样继续您的 "play" 功能。

要实现这一点，需要为发生所有事情的一般页面创建单独的文件，并将视频本身放在另一个文件中，该文件使用 AJAX 类型 GET 成功加载。

我提出这个建议是因为我怀疑您正在尝试播放未正确加载的元素（视频）。如果我误解了什么，我很抱歉。

Answer 4

很可能是因为 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");
    }
  });
});

ajax 函数成功时刷新音频源

refresh audio source when ajax function is successful

jquery

ajax

html5-audio

audio-streaming

ajaxform