在我的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");
}
});
很可能是因为 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");
}
});
});
我会尝试一种不同的方法来解决这个问题，首先，您可以尝试重新创建整个元素，然后加载((和play((新元素(从这里提取：jQuery/JavaScript动态更改音频源(，而不是重新加载音频的src，如下所示：
$.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>';
}
如果这不起作用，我会尝试这样做以在鼠标进入元素时播放音频(从此处提取：动态更改源后加载音频元素(：
var audio = $("#audio")[0];
$("#audio").mouseenter(function () {
audio.load();
audio.play();
});
如果以上都不起作用，您可以尝试像这家伙(jQuery/JavaScript 动态更改音频源(一样做类似的操作，最后让它以纯javascript(最后一个答案(进行工作，例如：
var audioElement = document.getElementById('audio');
audioElement.setAttribute('src', src);
// Load src of the audio file
audioElement.load();
audioElement.play();
希望对您有所帮助！
在 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");
}
});
根据您的方法和对页面上所有内容的设置方式的愿望，您可以在页面上有一个"div"区域，您可以在页面上使用 AJAX 类型 GET 刷新该区域。这样，您将把视频重新加载到页面中，然后像往常一样继续执行"播放"功能。
实现这一点所需要的是为发生所有事情的常规页面提供单独的文件，并将视频本身放在另一个文件中，该文件在使用 AJAX 类型 GET 成功加载时加载。
我之所以建议这样做，是因为我怀疑您正在尝试播放未正确加载的元素(视频(。如果我误解了什么，我很抱歉。