Very Simple PHP Audio Player (With Playlist)

Welcome to a tutorial on how to create a simple PHP audio player. Want to create your own podcast or playlist? Once upon a time, we have to fight with digital dragons and use all sorts of plugins to do that. But today, it is nearly as simple as using an <audio> tag. Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Audio Player	Useful Bits & Links
The End

 

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

• Put your audio files into the audio folder.
• Launch audio.php in the browser.

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

 

THE PHP & HTML

<!-- (A) AUDIO TAG -->
<audio id="demoAudio" controls></audio>
 
<!-- (B) PLAYLIST -->
<div id="demoList"><?php
  // (B1) GET ALL SONGS
  $songs = glob("audio/*.{mp3,webm,ogg,wav}", GLOB_BRACE);
 
  // (B2) OUTPUT SONGS IN <DIV>
  if (is_array($songs)) { foreach ($songs as $k=>$s) {
    printf("<div data-id='%u' data-src='%s' class='song'>%s</div>",
      $k, $s, basename($s)
    );
  }} else { echo "No songs found!"; }
?></div>

Yep, that’s all for the PHP and HTML.

• A – The audio player, good old <audio> tag.
• B1 – We use $songs = glob("audio/*.{mp3,webm,ogg,wav}", GLOB_BRACE) to get a whole list of songs from the audio folder.
• B2 – Then, loop through $songs and generate a <div> playlist. Take note of the custom data-id and data-src here.

 

 

THE JAVASCRIPT

Unfortunately, <audio> does not support playlists at the time of writing. So some Javascript is still required to build our own.

 

PROPERTIES

var aud = {
  // (A) PROPERTIES
  now : 0, // current song
  player : null, // reference to HTML <audio> element
  playlist : null, // reference to HTML playlist
}

We will use var aud to contain all the mechanics of the custom playlist/player, and there are 3 properties to take note of:

• now  Index of the current song that is playing.
• player Refers back to the <audio id="demoAudio"> tag.
• playlist Refers back to the <div id="demoList"> playlist.

 

INITIALIZE PLAYER

// (B) INITIALIZE PLAYER
aud.init = function () {
  // (B1) GET ALL SONGS
  aud.playlist = document.querySelectorAll("#demoList .song");
 
  // (B2) PROCEED SETUP ONLY IF THERE ARE SONGS TO PLAY
  if (aud.playlist.length>0) {
    // GET AUDIO TAG
    aud.player = document.getElementById("demoAudio");
 
    // CLICK ON SONG TO PLAY
    for (let song of aud.playlist) { song.onclick = aud.play; }
 
    // AUTOPLAY NEXT SONG IN PLAYLIST WHEN CURRENT SONG ENDS
    aud.player.onended = function() {
      aud.now++;
      if (aud.now>=aud.playlist.length) { aud.now = 0; }
      aud.playlist[aud.now].click();
    };
 
    // AUTOPLAY FIRST SONG
    aud.playlist[0].click();
  }
};
window.addEventListener("DOMContentLoaded", aud.init);

Next, we have an init() function that will run on page load. This should be pretty self-explanatory.

• Fetch <div id="demoList"> and put it into playlist.
• Fetch <audio id="demoAudio"> and put it into player.
• Run through playlist and attach “click to play the song”.
• When the current song has ended, we simply play the next song in the playlist.
• Start playing the first song automatically. (Remove this if you want the user to manually click on a song to start playing).

 

 

PLAY SONG

// (C) START PLAYING
aud.play : function () {
  // (C1) UPDATE CURRENT & PLAY
  aud.now = this.dataset.id;
  aud.player.src = this.dataset.src;
  aud.player.play();
 
  // (C2) A LITTLE BIT OF COSMETIC
  for (let song of aud.playlist) {
    if (song===this) { song.style.backgroundColor = "yellow"; }
    else { song.style.backgroundColor = "initial"; }
  }
};

Lastly, we have a function that plays the song itself.

• this refers back to the <div class="song"> that is being clicked in the playlist.
• So we simply update the “currently playing song” now to the custom data-id.
• Set the <audio> source to data-src, and play the song!

The end.

 

 

 

LINKS & REFERENCES

• <audio>: The Embed Audio element – MDN
• Custom Audio Player – Code Boxx

 

INFOGRAPHIC CHEAT SHEET