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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

PHP AUDIO PLAYER

All right, let us now get into how to create a PHP audio player with a playlist.

 

THE PHP & HTML

audio.php
<!-- (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

audio.js
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

audio.js
// (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

audio.js
// (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.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

PHP Audio Player With Playlist (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Very Simple PHP Audio Player (With Playlist)”

Leave a Comment

Your email address will not be published. Required fields are marked *