Simple Javascript/CSS Jukebox Tutorial

select a song!

home

I call this a jukebox not only beceause I've come across a few other personal pages that call their music player one, but because its features are more limited than a modern music player. Like a jukebox, it has a selection of songs that the patron can select, and the user cannot change the volume or spot within a song. This makes our web jukebox much more simple because we dont need to alter the volume or time slider

I'm making this tutorial because in my own efforts to make my jukebox, I only found needlessly complex code, so I made my own from scratch! The length of this page may seem long, but the code really is simple! I just like to over explain things ^^

Note: my knowledge of javascript is very limited, I'm just throwing together bits I've learned during my efforts

Update 2/5/24: altered code to increase accessibility and updated tutorial language/organization for clairity

Summary

Heres the code in order of how it would show up in the HTML document

.jukebox {
  position: relative;}
.jukebox ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;}
.jukebox:hover ul, .activate:focus + ul, .jukebox:focus-within > ul {
  display: inline-block;}

This CSS goes in the style element above the body.

<script>
  function stopmusic() {
  	var y = document.getElementsByTagName('audio');
  	for(var j=0; j<y.length; j++) {
  		y[j].pause();}
  	
  	document.getElementById('marq').innerHTML = 'no music is playing';}
  		
  function playsong() {
  	var y = document.getElementsByTagName('audio');
  	for(var j=0; j<y.length; j++) {
  		y[j].pause();}
  	var songvalue = event.target.value;
  	document.getElementsByTagName('audio')[songvalue].currentTime = 0;
  	document.getElementsByTagName('audio')[songvalue].play();
  	
  	document.getElementById('marq').innerHTML = event.target.title;}
</script>

This JS goes in a script element above the body.

<div class="jukebox">
 <button class="activate"><img src="https://solaria.neocities.org/smallgifs/cdspin.gif"></button>
  <ul>
   <button onclick="stopmusic()" >stop music</button>
   
   <li><button value="0" onclick="playsong()">crumblin_down.mp3	
     <audio ><source src="https://media-upload.net/uploads/5S9FeDnNyrOE.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="1" onclick="playsong()">dragula.mp3
     <audio ><source src="https://media-upload.net/uploads/e6gThUtmqE2z.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="2" onclick="playsong()">have_you_ever_seen_the_rain.mp3
     <audio ><source src="https://media-upload.net/uploads/gTKMVftE8oCu.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="3" onclick="playsong()">i_hate_myself_for_loving_you.mp3
     <audio><source src="https://media-upload.net/uploads/TRNy3ljbSKXa.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="4" onclick="playsong()">i_would_walk_500_miles.mp3
     <audio><source src="https://media-upload.net/uploads/KGSmbhNQCsfF.mp3" type="audio/mp3"></audio>
   </button></li>
  </ul>

  <marquee > 
    <p id="marq">select a song!</p>
  </marquee>
  
  <script>
    var y = document.getElementsByTagName('audio');
    for(var j=0; j<y.length; j++) {
      y[j].onended = function() {
        document.getElementById('marq').innerHTML = 'select a song!';};}
  </script>
      
</div>

This is the HTML in the body, notice the script element in the HTML body.

The following sections explain the code in detail if you are confused or need help ^^

HTML

Lets start with the HTML (then Javascript, lastly CSS). I will also skip the marquee for now.

<div class="jukebox">
 <button class="activate"><img src="https://solaria.neocities.org/smallgifs/cdspin.gif"></button>
  <ul>
   <button onclick="stopmusic()" >stop music</button>
   
   <li><button value="0" onclick="playsong()">crumblin_down.mp3	
     <audio ><source src="https://media-upload.net/uploads/5S9FeDnNyrOE.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="1" onclick="playsong()">dragula.mp3
     <audio ><source src="https://media-upload.net/uploads/e6gThUtmqE2z.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="2" onclick="playsong()">have_you_ever_seen_the_rain.mp3
     <audio ><source src="https://media-upload.net/uploads/gTKMVftE8oCu.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="3" onclick="playsong()">i_hate_myself_for_loving_you.mp3
     <audio><source src="https://media-upload.net/uploads/TRNy3ljbSKXa.mp3" type="audio/mp3"></audio>
   </button></li>
   <li><button value="4" onclick="playsong()">i_would_walk_500_miles.mp3
     <audio><source src="https://media-upload.net/uploads/KGSmbhNQCsfF.mp3" type="audio/mp3"></audio>
   </button></li>
  </ul>
</div>

Lets look closer at each list item:

<li><button value="0" onclick="playsong()">crumblin_down.mp3	
  <audio><source src="https://media-upload.net/uploads/5S9FeDnNyrOE.mp3" type="audio/mp3"></audio>
</button></li>

JavaScript

The following code is in the head of the document (but not in the style section), you could also put it in the body of the document

<script>
  function stopmusic() {
    var y = document.getElementsByTagName('audio');
    for(var j=0; j<y.length; j++) {
      y[j].pause();}
  		
  function playsong() {
    var y = document.getElementsByTagName('audio');
    for(var j=0; j<y.length; j++) {
      y[j].pause();}
    var songvalue = event.target.value;
    document.getElementsByTagName('audio')[songvalue].currentTime = 0;
    document.getElementsByTagName('audio')[songvalue].play();}
</script>

Stop Music Function

function stopmusic() {
  var y = document.getElementsByTagName('audio');
  for(var j=0; j<y.length; j++) {
  	y[j].pause();}