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

我会尝试不同的方法来尝试解决这个问题，首先，您可以尝试重新创建整个元素，然后加载（）并播放（）新元素（从中提取），而不是重新加载音频的src。这里：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();

希望它有所帮助！

Answer 2

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

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

根据您的方法和对页面上所有内容设置方式的要求，您可以拥有一个＆＃34; div＆＃34;您在页面上使用AJAX类型GET刷新的区域。这样您就可以将视频重新加载到您的页面中，然后继续播放＆＃34;播放＆＃34;像往常一样运作。

实现这一目标需要的是为一般页面创建单独的文件，并将视频本身放在另一个使用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函数成功时刷新音频源

4 个答案: