Skip to content

Instantly share code, notes, and snippets.

@guymac

guymac/mp3playlist

Last active June 23, 2023 11:28
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment