Skip to content

Instantly share code, notes, and snippets.

@guymac

guymac/mp3playlist

Last active February 19, 2025 10:21
Show Gist options
  • Save guymac/1045885 to your computer and use it in GitHub Desktop.
Save guymac/1045885 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using HTML5 as a music playlist. This html would be put in a directory and all the mp3 files that it references in a subdirectory called mp3. The whole thing can be written to CD-R where this html serves as the music playing application (and MP3 CD-Rs will autoplay in most non-interactive devices).
Raw
mp3playlist
<html>
<head>
<title>EDM Favorites Volume 4</title>
<script type="text/javascript">
//<![CDATA[
(function(){
// audioElement = HTML5 Audio
AudioHandler = function(audioElement)
{
this.trackElement = undefined;
this.audioElement = audioElement;
var self = this;
// click on track to play
document.addEventListener
(
'click',
function(evt)
{
self.play(evt.target);
},
false
);
// play next track when current ends
this.audioElement.addEventListener
(
'ended',
function()
{
self.play(self.trackElement.nextElementSibling);
},
true
);
};
// trackElement = list item with track name
AudioHandler.prototype.play = function(trackElement)
{
if (!trackElement || trackElement.tagName.toLowerCase() != 'li') return;
this.trackElement = trackElement;
this.audioElement.src = 'mp3/' + this.toEscapedASCII(trackElement.textContent) + '.mp3';
this.audioElement.play();
var lis = document.getElementsByTagName('li');
for (var i = 0, l = lis.length ; i < l ; i++)
{
lis[i].className = '';
}
trackElement.className = 'playing';
};
// converted listed title with fancy characters to simple
AudioHandler.prototype.toEscapedASCII = function(str)
{
var arr = [];
for (var c = '', i = 0, l = str.length ; i < l ; i++)
{
c = str.charAt(i);
switch (c)
{
case 'Ø': arr.push('O'); break;
case 'ö': arr.push('o'); break;
case '#': arr.push('%23'); break;
default: arr.push(c); break;
}
}
return arr.join('');
};
// initialize when ready
window.onload = function()
{
new AudioHandler(document.getElementsByTagName('audio')[0]);
}
})();
// ]]>
</script>
<style type="text/css">
ul { -webkit-column-count:2;-moz-column-count:2;column-count:2; }
li:hover { text-decoration: underline; }
li.playing { font-weight: bold; }
</style>
</head>
<body>
<h1>EDM Favorites Volume 4</h1>
<hr/>
<audio controls="controls"
onerror="alert('Could not play MP3 audio file ' + this.src + '!');">
HTML5 MP3 audio required
</audio>
<ul>
<li>01. Midgard-Earth (Unusual Cosmic Process Remix) - Astropilot</li>
<li>02. Skylarking - BT</li>
<li>03. The Veldt (8 Minute Edit) - deadmau5 featuring Chris James</li>
<li>04. Intense (Full Version) - Armin van Buuren featuring Miri Ben-Ari</li>
<li>05. Canvas - M.I.K.E.</li>
<li>06. Beam Me Up (Kill Mode) - Cazzette</li>
<li>07. Keep This Memory (Original Mix) - Audien</li>
<li>08. Beautiful Life (Full Version) - Armin van Buuren featuring Cindy Alma</li>
<li>09. K Ta (Original Mix) - Andy Moor</li>
<li>10. Sundown (Original Mix) - Thomas Bronzwaer</li>
<li>11. The Grid - Ian Betts</li>
<li>12. The Other Side (Original Mix) - Skytech</li>
<li>13. Synergy - Jaytech</li>
<li>14. Liberation - Orkidea</li>
<li>15. Cocoon (Original Mix) - Ummet Ozcan</li>
<li>16. Born To Rage (USA Version) - Dada Life</li>
<li>17. Rocker Monster - Heatbeat</li>
<li>18. You Will Never Be - &Oslash;rjan Nilsen</li>
<li>19. Fire Fire Fire - Progresia featuring Linnea Sch&ouml;ssow</li>
<li>20. Hurricane (Myon &amp; Shane 54 In Search Of Sunrise Mix) - Myon &amp; Shane 54 featuring Amy Pearson</li>
<li>21. Mess Of A Machine (Sean Tyas Remix) - John O'Callaghan featuring Kathryn Gallagher</li>
<li>22. Sunlight Everywhere (Original Mix) - Denis Sender</li>
<li>23. 200 (Future Sound Of Egypt 200 Anthem) - Aly &amp; Fila</li>
<li>24. So Get Up (Extended Mix) - Cosmic Gate</li>
<li>25. Kill Of The Year (Original Mix) - Wezz Devall</li>
<li>26. D# Fat (Original Mix) - Armin van Buuren &amp; W&amp;W</li>
<li>27. Wayfarer (Original Mix) - Audien</li>
<li>28. Arizona (Original Mix) - Ferrin &amp; Morris</li>
<li>29. Sky Harbour (Original Mix) - ReOrder</li>
<li>30. Nothing Without Me (Album Mix) - Markus Schulz featuring Ana Diaz</li>
<li>31. Slave (Ben Gold Club Dub Mix) - Tritonal featuring Fisher</li>
<li>32. Character (Original Mix) - Mark Sixma</li>
<li>33. The Motive (Original Mix) - M.I.K.E.</li>
<li>34. F The Bull$h1t (Original Mix) - Ferry Corsten</li>
<li>35. Amplify (Original Mix) - Shogun<li>
<li>36. Gunsmoke (Original Mix) - Bj&ouml;rn Akesson<li>
<li>37. Concrete Angel (John O'Callaghan Remix) - Gareth Emery featuring Christina Novelli<li>
<li>38. Fall With Me (Original Mix) - Ben Gold featuring The Glass Child<li>
<li>39. Under The Gun (Rank 1 Remix) - Conjure One featuring Leigh Nash</li>
<li>40. This Is What It Feels Like (Extended Mix) - Armin van Buuren featuring Trevor Guthrie</li>
<li>41. Teardrops (Original Mix) - Super8 and Tab</li>
<li>42. Laguna (Original Mix) - Protoculture</li>
<li>43. Messing With The Fantasy (Original Mix) - Ian Betts</li>
<li>44. Lovers (Pure Mix) - Solarstone featuring Lemon</li>
<li>45. Kinetic (Original Mix) - Abstract Vision &amp; Elite Electronic</li>
<li>46. Confront (Original Mix) - DNS Project</li>
<li>47. Arganda (Original Mix) - Heatbeat</li>
<li>48. The Fusion (Original Mix) - Omnia &amp; IRA</li>
<li>49. Slam The Door (Original Mix) - Zedd</li>
<li>50. Chow Mein (Original Mix) - Heatbeat</li>
<li>51. Wild Child (Extended Mix) - Adrian Lux &amp; Marcus Sch&ouml;ssow featuring JJ</li>
<li>52. Siren (Armin van Buuren Remix) - Kat Krazy featuring elkka</li>
<li>53. Jewel (Daniel Kandi's Emotive Mix) - Solarstone featuring Clare Stagg</li>
<li>54. Love Will Bring It All Around - Giuseppe Ottaviani featuring Eric Lumiere</li>
<li>55. We Have Tonight (Festival Mix) - Jochen Miller featuring Dogs With Jeans</li>
<li>56. Imagineer (Album Mix) - Lange</li>
</ul>
</body>
</html>
@Ken-Mathers
Copy link

Thanks so much for this, it's simple and it works. How can I modify it to play files from a directory structure like this:

Artist\Album Name\CD1\Song1.mp3
Artist\Album Name\Song1.mp3
Artist\Song1.mp3

In my case the files are in either of the locations and some files are mpg. There is also an m3u in every sub folder i.e.

Artist\Album Name\CD1\playlist.m3u
Artist\Album Name\CD2\playlist.m3u
Artist\Album Name\playlist.m3u
Artist\playlist.m3u

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment