HTML5 audio element with dynamic source

Question

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?

When the song.php page is loaded, it randomly selects and points to a MP3 file. So, I'm trying to get the player to play the next selected track from the song.php page after the current track ends. I thought that by looping the track, it would be forced to reload and play the new file. — austinh, Jan 07 '13 at 05:18
Are you going to stream the media or just one-by-one song playback ? — AKS, Jan 07 '13 at 05:52

score 12 · Accepted Answer · edited May 23 '17 at 12:10

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.

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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

I'm still having problems. Right now the PHP file is just `` and I'm manually changing the location. — austinh, Jan 10 '13 at 04:42

score 1 · Answer 3 · answered Jan 16 '13 at 14:58

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

score 0 · Answer 4 · answered Jan 07 '13 at 05:22

0

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.

answered Jan 07 '13 at 05:22

Brett

3,296
5
29
45

I do not know how to do this. – austinh Jan 07 '13 at 05:23

HTML5 audio element with dynamic source

4 Answers4

HTML

Javascript

Linked

Related