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.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

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

If you spot a bug, feel free to comment below. I try to answer short 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.

 

SCREENSHOT

 

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.

 

 

 

STEP 1) THE PHP & HTML

<div id="demo">
  <!-- (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) {
      $name = basename($s);
      printf("<div data-src='%s' class='song'>%s</div>", rawurlencode($name), $name);
    }} else { echo "No songs found!"; }
  ?></div>
</div>

Yep, there are only 2 components for this simple example.

1. The audio player, good old <audio> tag.
2. The playlist.
   • We will use $songs = glob("audio/*.{mp3,webm,ogg,wav}", GLOB_BRACE) to get the list of songs from the audio folder. Take note, glob will not recursively read into sub-folders.
   • Then, loop through $songs and generate the playlist. Take note of the custom data-src here.

 

 

STEP 2) JAVASCRIPT PLAYLIST INIT

var aud = {
  // (A) INITIALIZE PLAYER
  player : null,   // html <audio> element
  playlist : null, // html playlist
  now : 0,         // current song
  init : () => {
    // (A1) GET HTML ELEMENTS
    aud.player = document.getElementById("demoAudio");
    aud.playlist = document.querySelectorAll("#demoList .song");
 
    // (A2) LOOP THROUGH ALL THE SONGS, CLICK TO PLAY
    for (let i=0; i<aud.playlist.length; i++) {
      aud.playlist[i].onclick = () => aud.play(i);
    }
 
    // (A3) AUTO PLAY WHEN SUFFICIENTLY LOADED
    aud.player.oncanplay = aud.player.play;
 
    // (A4) AUTOPLAY NEXT SONG IN PLAYLIST WHEN CURRENT SONG ENDS
    aud.player.onended = () => {
      aud.now++;
      if (aud.now>=aud.playlist.length) { aud.now = 0; }
      aud.play(aud.now);
    };
  }
};
window.addEventListener("DOMContentLoaded", aud.init);

Unfortunately, <audio> does not support playlists at the time of writing. So we will need to build our own, var aud contains the mechanics of our custom playlist player.

• (A1) Get the HTML elements.
  • aud.player refers to <audio id="demoAudio">.
  • aud.playlist is an HTMLCollection of songs contained in <div id="demoList">.
  • The idea is to use aud.now to track the current song playing in aud.playlist. For example, aud.now = 0 will indicate the first song, aud.now = 1 indicates the second, and so on.
• (A2) Loop through all the songs, attach “click to play” onclick = aud.play.
• (A3) Just a bit of precaution here, we wait until the song is sufficiently buffered before playing.
• (A4) When the current song ends, we do a aud.now++ and play the next song automatically.

 

 

STEP 3) PLAY SONG

// (B) START PLAYING
aud.play : id => {
  // (B1) UPDATE CURRENT & PLAY
  aud.now = id;
  aud.player.src = "audio/" + aud.playlist[id].dataset.src;
 
  // (B2) A LITTLE BIT OF COSMETIC
  for (let i=0; i<aud.playlist.length; i++) {
    if (i==id) { aud.playlist[i].classList.add("now"); }
    else { aud.playlist[i].classList.remove("now"); }
  }
};

Lastly, we have a function that plays the song itself. Very simply, we set aud.play.src to the selected data-src. The end. aud.player.oncanplay will automatically start playing once sufficiently buffered.

 

 

CUSTOMIZING THE AUDIO PLAYER?

Take extra note that <audio> cannot be styled or customized (at the time of writing). But we can build one ourselves, check out the custom audio player link below.

 

 

COMPATIBILITY CHECKS

• HTML Audio Element – CanIUse
• Arrow Functions – CanIUse

Works on all modern “Grade A” browsers.

 

LINKS & REFERENCES

• <audio>: The Embed Audio element – MDN
• Custom Audio Player With Playlist – Code Boxx
• Need to read sub-folders? Check out List Files & Folders In PHP – Code Boxx