HTML5 Audio Element With Dynamic Source

November 28, 2022 Post a Comment

I have a basic audio player:

And instead of the sour

Solution 1:

For starters, you are attaching a new event handler every single time the element is clicked. If someone frequently pauses the music, they will run into problems.

Intead, try this:

<audio id="audio" autoplay controls src="song.php" type="audio/mpeg"></audio>
<script type="text/javascript">
    document.getElementById('audio').addEventListener("ended",function() {
        this.src = "song.php?nocache="+new Date().getTime();
        this.play();
    });
</script>

I'm assuming that song.php is a PHP file that returns the audio data. The nocache query parameter will ensure that the file is actually called every time.

Solution 2:

I think the problem is that you need to make a request once the current song finished, you can achieve this adding the ended event listener to the audio element:

HTML

<audio id="player" controls="controls" autoplay="true" loop="loop">
<source src="song.php" type="audio/mpeg" />
</audio>

Javascript

var audio = $("#player");
audio.addEventListener("ended", function(){
    $.post("song.php", function(result){
        audio.src = result;
        audio.pause();
        audio.load();//suspends and restores all audio element
        audio.play();
    });
});

Note: If you still have problems, include the PHP code in the question and check if your PHP file is getting the proper header

Solution 3:

Has the random choice necessarily to be done by php ?

If not, it will perhaps be simpler to tell javascript to select a random ID in a range. Then pass it to your php script as a GET parameter.

IN the php side, do a mapping of IDs > MP3 files, so that the same ID always correspond to the same MP3. You can use whatever you want: simple associative array, database, etc. In fact the IDs don't even have to be numbers.

IF you don't want that someone discover your mapping and said, call directly the wscript with ID X to download your MP3, you may change your mapping at each session for example.... the important thing is that a given ID always refer to the same MP3 at least during a reasonable period.

I whould also say that doing a redirection to the MP3 file from php may cause problems to some browsers. It is perhaps better to send the correct HTTP headers and actually return the file contents directly without redirecting. Quick example :

<?php
$file = "something.mp3";
header("Content-Type:audio/mpeg");
header("Content-LEngth:".filesize($file));
readfile($file);
?>

More info about readfile and header functions

Solution 4:

Perhaps the best way is to have a unique Request ID variable in the query string. Then with each request you can determine if it is a looped request or a new request or a new request for randomizing.

Do you know how to do this? If not I will include code.

Html5 Pros