事件结束后重新加载页面

Question

EDIT : This is now solved, thanks very much everyone who replied. I will come back here and vote up replies when I have enough reputation to do so :)

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

我制作了一个静态页面，其中一张图片覆盖了整个 window。我在一个名为 "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>

目前，我有几个 onclick 事件正在发生，但是我对这个不满意：

setTimeout('history.go(0);',6000);l

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

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

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

我希望我的 post 是有道理的！

在此站点上的专家将不胜感激！

亲切的问候，

Answer 1

您可以在 canplaythrough 事件上重新加载页面的回调 fn：

audio.addEventListener('canplaythrough', isAppLoaded, false);

Answer 2

我重新看了你的问题，你好像只是想随机循环不同的音轨，所以不需要刷新。在这种情况下，没有理由回叫 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>

旧答案：

您可以将以下听众附加到您的音频中：

var audio = document.getElementById("audio");
audio.addEventListener('ended', function(e) {
    history.go(0);
}, false);

audio.play();

Answer 3

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

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

希望对您有所帮助如果您不确定 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

为了提高稳健性，我鼓励 try/catch 围绕 php 的 3 行，让你 return 一个很好的失败而不是担心潜在的废话通过或无效可能在 javascript 端产生意外结果的文件。然后 ajax 调用可能有一个失败部分，可以执行一些其他任务，例如警报

别忘了包括 jquery https://code.jquery.com/

如果您没有使用这些 http://www.w3schools.com/jquery/jquery_ajax_intro.asp

的经验，请进一步阅读 jquery/ajax

事件结束后重新加载页面

Reloading a page after an event has finished

javascript

php

audio

onclick