ajax功能成功时刷新音频源答案

【问题标题】：refresh audio source when ajax function is successfulajax功能成功时刷新音频源
【发布时间】：2018-10-22 02:54:14
【问题描述】：

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

【问题讨论】：

尝试将时间戳附加到src，或动态删除/重新创建audio 元素。此外，在服务器上设置文件的过期标头也会有所帮助。
我对 ajax 还是很陌生，你能提供一些例子和你的建议吗？ @RoryMcCrossan
success: function(data) { console.log(data); myVideo.src = path+"&rnd="+new Date().getTime(); myVideo.load(); myVideo.get(0).play(); }
我用您尝试过的建议更新了我的问题。它没有工作。 @mplungjan
您能详细说明您的第二个建议吗？

标签： jquery ajax html5-audio audio-streaming ajaxform

【解决方案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");
    }
  });
});

【讨论】：

我正在测试。它似乎有效，但有延迟，因此不一致。您能否解释一下什么是新日期和获取时间以使浏览器重新加载文件？
我做到了。这只是文件名末尾的随机字符串。浏览器获取不同的文件名并重新加载它。如果它具有相同的名称，则无需重新加载文件。我不知道为什么延迟可能是因为 Ajax？问号与浏览器 url 中使用的问号相同，因此这只是一个变量。这就是为什么它并没有真正改变任何东西。只是浏览器认为它是一个不同的文件。
new Date() 使用当前日期时间创建新的日期对象。 getTime() 从日期对象获取时间戳。所以它可能看起来像这样1527167853296。它不一定是一个日期，但这样你就可以确保它每次都不一样。
有没有比日期更频繁地使用的东西？
我不知道在 JavaScript 或 jQuery 中比毫秒更快。并且时间戳是一个完整的日期时间，所以它也有毫秒。试试我编辑的答案，它现在应该每次都能工作。

【解决方案2】：

我会尝试一种不同的方法来尝试解决这个问题，首先，您可以尝试重新创建整个元素，而不是重新加载音频的 src，然后 load() 和 play() 新元素（从这里：jQuery/JavaScript Change Audio Source dynamically），像这样：

$.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();
});

如果上述方法均无效，您可以尝试像这个人 (jQuery/JavaScript Change Audio Source dynamically) 一样采用类似的方法，最后使用纯 javascript（最后一个答案）使其工作，例如：

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

希望对您有所帮助！

【讨论】：

【解决方案3】：

在 url 路径中添加时间戳，同时进行 XHR 调用。如果它不起作用，则在服务器端添加阻止缓存标头。希望它会起作用。

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：