Javascript 事件完成后重新加载页面

编辑：这个问题现在已经解决了，非常感谢所有回复的人。我 当我有足够的声誉时，我会回来投票支持回复 为此：）

我一直在想在onclick音频文件播放完毕后如何重新加载页面

我制作了一个静态页面，页面上的图像覆盖了整个窗口。我在一个名为“audio”的文件夹中有一堆愚蠢的音频文件

我有一些php代码，可以在音频文件夹中随机选取一个mp3，并根据请求回显其文件名：

$files = glob('audio/*.mp3');  // get all .mp3 files in the music directory
$fname = $files[array_rand($files)]; // get a random file name
//echo $fname; // uncomment to echo random file name

稍后在页面中，当检测到鼠标点击并将随机生成的文件名注入代码时，一些JavaScript将播放一个文件：

<script>
    function play(){
        var audio = document.getElementById("audio");
        audio.play();
                }
    </script>
    <input type="image" SRC="eye.gif" value="PLAY"  onclick="play();setTimeout('history.go(0);',6000);l">
    <audio id="audio" src="<?php echo $fname; ?>" ></audio>

超时是一种解决方法，我打赌在达到时间阈值后刷新开始之前音频文件可能已经播放完毕

我真正想要的是，用某种方法检测文件何时在浏览器中播放完毕，然后自动刷新页面

（我正在刷新页面，以便再次生成随机音频文件。）

我希望我的帖子有意义

本网站的专家将非常感谢您在此提供的任何帮助

---

亲切问候，

您可以使用回调fn在

canplaythrough

事件中重新加载页面：

---

audio.addEventListener（'canplaythrough'，isAppLoaded，false）

您可以使用回调fn在

canplaythrough

事件中重新加载页面：

---

audio.addEventListener（'canplaythrough'，isAppLoaded，false）
我重新阅读了你的问题，似乎你只是想随机循环不同的音频曲目，所以不需要刷新。在这种情况下，没有理由回叫PHP，只需给JavaScript所有的文件链接，让它完成它的工作

<script>
var songs = <?php echo json_encode(glob('audio/*.mp3')); ?>;

function play() {
    var audio = document.getElementById("audio");
    audio.addEventListener('ended', function(e) {
        audio.src = songs[Math.floor(Math.random()*songs.length)];
        audio.load();
    }, false);
    audio.play();
}
</script>
<input type="image" SRC="eye.gif" value="PLAY"  onclick="play();">
<audio id="audio" src="<?php echo $fname; ?>" ></audio>

我重读了你的问题，似乎你只是想随机循环不同的音频曲目，所以不需要刷新。在这种情况下，没有理由回叫PHP，只需给JavaScript所有的文件链接，让它完成它的工作

<script>
var songs = <?php echo json_encode(glob('audio/*.mp3')); ?>;

function play() {
    var audio = document.getElementById("audio");
    audio.addEventListener('ended', function(e) {
        audio.src = songs[Math.floor(Math.random()*songs.length)];
        audio.load();
    }, false);
    audio.play();
}
</script>
<input type="image" SRC="eye.gif" value="PLAY"  onclick="play();">
<audio id="audio" src="<?php echo $fname; ?>" ></audio>

而不是重新加载页面。我建议在play（）函数中使用回调函数来调用第二个函数，第二个函数可以使用Ajax从php脚本获取另一个响应并将其放入src，然后再次调用play函数

我现在正在使用我的手机，所以有点难写一个例子，但如果没有人跳上它，我会在以后尝试

如果你对Ajax不太确定，希望这对你有所帮助。看看w3schools，他们的教程非常好


编辑：
这是一个合适的脚本，未经测试，所以请注意语法，但即使它不太正常，也应该让您朝着正确的方向努力

function playRandomAudio() {
    // get random audio
    $.ajax({url: "randomaudio.php", success: function(result){
        $("#audio").attr("src",result);
    }});

    // play it
    $("#audio").play();
}

$(function() {
    // document onload, play audio
    playRandomAudio();
});

$("#audio").bind('ended', function(){
    // done playing, do it again 
    playRandomAudio();
});

randomaudio.php

<?php
$files = glob('audio/*.mp3');  // get all .mp3 files in the music directory
$fname = $files[array_rand($files)]; // get a random file name
echo $fname; // uncomment to echo random file name

而不是重新加载页面。我建议在play（）函数中使用回调函数来调用第二个函数，第二个函数可以使用Ajax从php脚本获取另一个响应并将其放入src，然后再次调用play函数

我现在正在使用我的手机，所以有点难写一个例子，但如果没有人跳上它，我会在以后尝试

如果你对Ajax不太确定，希望这对你有所帮助。看看w3schools，他们的教程非常好


编辑：
这是一个合适的脚本，未经测试，所以请注意语法，但即使它不太正常，也应该让您朝着正确的方向努力

function playRandomAudio() {
    // get random audio
    $.ajax({url: "randomaudio.php", success: function(result){
        $("#audio").attr("src",result);
    }});

    // play it
    $("#audio").play();
}

$(function() {
    // document onload, play audio
    playRandomAudio();
});

$("#audio").bind('ended', function(){
    // done playing, do it again 
    playRandomAudio();
});

randomaudio.php

<?php
$files = glob('audio/*.mp3');  // get all .mp3 files in the music directory
$fname = $files[array_rand($files)]; // get a random file name
echo $fname; // uncomment to echo random file name

啊，我真的很喜欢这个想法，比完全刷新要好得多。有人回答了我上面的问题，但是你刷新php而不是整个页面的解决方案听起来确实比我计划的更好。旁注：我是新来的，所以我不知道是否应该将上面给出的解决方案标记为正确，或者是否允许我等待您的方法？有两件事可以作为答案吗？嗨，达伦，我很感激你的评论，但是它似乎对我不起作用。我把这个代码放在身体的标签之间了吗？还需要啊等等。jquery。没有包括这个。以前从未做过。为什么我需要这个？老实说，你刚才说的话我没听懂多少。我不介意查找它，但是在不知道我在找什么的情况下跳进一个网站有点尴尬。似乎在这个页面中可能需要使用多种技术：HTML、PHP、Javascript、CSS。。。现在是ajax和jquery？老实说，我真的不知道我突然在做什么！我现在已经将jquery包含在头部：
注入仍有一些问题。正在阅读您发送给我的Ajax页面。。。祝我好运！啊，我真的很喜欢这个想法，比完全刷新要好得多。有人回答了我上面的问题，但是你刷新php而不是整个页面的解决方案听起来确实比我计划的更好。旁注：我是新来的，所以我不知道是否应该将上面给出的解决方案标记为正确，或者是否允许我等待您的方法？有两件事可以作为答案吗？嗨，达伦，我很感激你的评论，但是它似乎对我不起作用。我把这个代码放在身体的标签之间了吗？还需要啊等等。jquery。没有包括这个。以前从未做过。为什么我需要这个？老实说，你刚才说的话我没听懂多少。我不介意查找它，但是在不知道我在找什么的情况下跳进一个网站有点尴尬。似乎在这个页面中可能需要使用多种技术：HTML、PHP、Javascript、CSS。。。现在是ajax和jquery？老实说，我真的不知道我突然在做什么！我现在已经将jquery包含在头部：
注入仍有一些问题。正在阅读您发送给我的Ajax页面。。。祝我好运！我试过这个代码，效果很好！谢谢！：）音频在结束前不再被切断