CODEWITHSUNDEEP
phpjavascriptmysqlhtmlaudio
awesomerobot
awesomerobot

Reputation: 11

Continuously streaming random audio from database

I'm planning out a project for a very simple audio streamer that would take a mysql database list of songs hosted on my local server, and then randomly stream a song from the list constantly throughout the day. This would be attached to a very simple frontend page that would display the name of the currently playing song.

I know how to get a random file from the database and stream it using a Javascript/HTML front end, but I'm getting lost on how to detect when a song is over - and then load the next song. Is there a simple way to do this? Can someone point me in the right direction?

EDIT: To elaborate on the frontend, I'd most likely be serving up the filename/location via PHP into the HTML5 audio tag (again I want this as simple as possible). I'm thinking the simplest way would be to play the audio file and then refresh the page and play the next file using the same audio tag and new filename - I just don't know how to cause that event to happen at the end of the song. Alternatively I could use a Javascript based player like JPlayer (http://www.jplayer.org/) if I need to.

I'm guessing there's a callback function of some kind I can use in conjunction with JQuery?

Upvotes: 1

Views: 1682

Answers (1)

Geoffrey
Geoffrey

Reputation: 11354

HTML5 audio tag has an event "onended" which is run when the media reaches its end, but since you wish to keep playing you should use the "onwaiting" event, which also fires when the media reaches its end, but keeps itself ready to accept a new track/data.

You can then use the XMLHttpRequest object to query for the next track to play, eg.

<script type="text/javascript">
  function getNextTrack(e) {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "next_track.php", false);
    xhttp.send("");

    var playback = xhttp.responseXML.childNodes[0];
    for(i = 0; i < playback.childNodes.length; ++i) {
      if (playback.childNodes[i].nodeName != 'track') continue;
      var value = playback.childNodes[i].childNodes[0].nodeValue;
      e.currentTarget.src = value;
      break;
    }
  }
</script>
<audio id="player" onwaiting="javascript: getNextTrack(e)" src="first_track.ogg"></audio>

The xml would be in the form of:

<?xml version="1.0" encoding="UTF-8" ?> 
<playback> 
    <track>next_song.ogg</track>
</playback>

Upvotes: 1

Related Questions