HTML5 audio element with dynamic source

I have a basic audio player:

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

And instead of the source pointing directly to the MP3 file I have it pointed at a PHP file which then points to the MP3 file, which works. But, when the current track is over the PHP file is pointing to a new MP3 file. So, the problem that I have is that when the player goes to loop, with the new MP3 file, it completely stops working. Is there any way around this? Is there a way to do this with a playlist or any other players?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

Copied from your duplicate question:


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.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply