Question

编辑：现在已经解决了，非常感谢所有回复的人。一世当我有足够的声誉时，我会回到这里并投票回复这样做:)）

我一直试图弄清楚如何在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>

目前，我发生了几起onclick事件，但我对此并不满意：

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

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

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

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

我希望我的帖子有意义！

本网站的专家将非常感谢您的帮助！

亲切的问候，

Answer 1

我重新阅读了您的问题，似乎您只想随机循环播放不同的音轨，因此无需刷新。在这种情况下，没有理由再回调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 2

您可以使用回调fn重新加载canplaythrough事件：

上的页面

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

Answer 3

而不是重新加载页面。我建议在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

为了提高稳健性，我鼓励尝试/捕捉3行PHP，让你返回一个很好的失败而不是担心潜在的废话通过或无效的文件，可能会在javascript方面产生意想不到的结果。然后ajax调用可能有一个失败部分，可以执行一些其他任务，如警报

不要忘记包含jquery https://code.jquery.com/

如果您没有使用这些http://www.w3schools.com/jquery/jquery_ajax_intro.asp
的经验，请继续阅读jquery / ajax

活动结束后重新加载页面

3 个答案: