CODEWITHSUNDEEP
javascriptphpaudioonclick
user5062856
user5062856

Reputation:

Reloading a page after an event has finished

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 :)

I have been trying to figure out how to reload the page after an onclick audio file has finished playing.

I have made a static page with an image covering the entire window. I have a bunch of silly audio files in a folder called "audio"

I have some php code in place that will pick a random mp3 in the audio folder and echo its filename on request:

$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

And later in the page some JavaScript to play a file when a mouse click is detected with the randomly generated file name injected into the code :

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

At the moment, I have a couple of onclick events happening however, I am not happy with this one:

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

The timeout is a workaround, where I am gambling that the audio file would have finished playing before the refresh commences after the time threshold is met.

What I would really like, is some way of detecting when the file has finished playing in the browser, and then refresh the page automatically.

(I am refreshing the page so the random audio file gets generated again.)

I hope my post makes sense!

Any help here would be greatly appreciated from the experts on this site!

Kind regards,

Upvotes: 1

Views: 2357

Answers (3)

Dave Chen
Dave Chen

Reputation: 10975

I re-read your question, and it seems like you just want to loop different audio tracks randomly, so no refresh required. In this case, there's no reason to call PHP back, just give JavaScript all the file links, and let it do its work.

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

Old answer:

There are listeners that you can attach onto your audio:

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

audio.play();

Upvotes: 1

Darren H
Darren H

Reputation: 902

Rather than reloading the page. I'd suggest using a callback in the play() function to call a second function, the second function could use Ajax to get another response from the php script and drop it into the src, then call the play function again

I'm using my mobile phone right now so a bit hard to write an example, but if nobody jumps on it I'll give it a go later on.

Hope that helps a bit If you're unsure about Ajax have a look on w3schools, their tutorials are very good

edit: Here is a suitable script, untested so keep an eye out for syntax, but even if it's not quite working it should put you strongly in the right direction

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

To improve robustness, I'd encourage a try/catch around the 3 lines of php allowing you to return a nice fail rather than worrying about potential nonsense coming through or invalid files that could produce unexpected results on the javascript side. Then the ajax call could have a failure section that could do some other task such as an alert

Don't forget to include jquery https://code.jquery.com/

Further reading on jquery/ajax if you are not experienced in using these http://www.w3schools.com/jquery/jquery_ajax_intro.asp

Upvotes: 0

timeiscoffee
timeiscoffee

Reputation: 458

You can have a callback fn that reloads the page on canplaythrough event:

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

Upvotes: 0

Related Questions