Simple Javascript/CSS Jukebox Tutorial

select a song!
  • stop music
  • crumblin_down.mp3
  • dragula.mp3
  • have_you_ever_seen_the_rain.mp3
  • i_hate_myself_for_loving_you.mp3
  • i_would_walk_500_miles.mp3

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

home

HTML

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

< div class="jukebox" >
 < img src="https://solaria.neocities.org/smallgifs/cdspin.gif" >
  < ul >
   < li onclick="stopmusic()" >stop music< /li >
   
   <  li value="0" onclick="playsong()">crumblin_down.mp3	
     < audio >< source src="https://media-upload.net/uploads/5S9FeDnNyrOE.mp3" type="audio/mp3" >< /audio >
   < /li>
   < li value="1" onclick="playsong()">dragula.mp3
     < audio >< source src="https://media-upload.net/uploads/e6gThUtmqE2z.mp3" type="audio/mp3" >< /audio >
   < /li >
   < li 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 >
   < /li >
   < li 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 >
   < /li >
   < li value="4" onclick="playsong()">i_would_walk_500_miles.mp3
     < audio >< source src="https://media-upload.net/uploads/KGSmbhNQCsfF.mp3" type="audio/mp3" >< /audio >
   < /li >
  < /ul >
< /div >

This is the full HTML

Lets look closer at each list item:

< li value="0" onclick="playsong()">crumblin_down.mp3	
  < audio >< source src="https://media-upload.net/uploads/5S9FeDnNyrOE.mp3" type="audio/mp3" >< /audio >
< /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 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();}
  
  function stopmusic() {
  	var y = document.getElementsByTagName('audio');
  	for(var j=0; j<y.length; j++) {
  		y[j].pause();}
< /script >

this is the full javascript

First Function

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();

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();

Second Function

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

CSS

The css is pretty simple, infact if you want the song menu to be visable all the time, rather than on hover, you can style everything however you like. This CSS will show you how to make the list menu appear when the user hovers over the jukebox div

.jukebox {
  position: relative;
  width: 100px;}
.jukebox ul {
  display: none;
  list-style: none;
  background: purple;
  position: absolute;
  top: 0px;
  left: 100px;}
.jukebox:hover ul {
  display: inline-block;}
 jukebox li:hover {
 background: pink;}

This is a basic formatting of the css, with most of the personal preference styling removed for clairity. Still there are things like the width, and backgrounds that are up to you to decide

Marquee

Completeley optional, but this adds scrolling text that lets the viewer know which song is playing, or if any music is playing at all

< marquee > 
  < p id="marq" >select a song!< /p >
< /marquee >

This is the HTML for the marquee. it holds a paragraph element that has an id (you can name it anything as long as it has one for the javascript)

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

Here is the list item again. I used title="" to store the text i want the marquee to display (song title and artist). you dont have to do this if what you want to display is the same as the text inside the list element 

function playsong() {
  document.getElementById('marq').innerHTML = event.target.title;}
  
function stopmusic() {
  document.getElementById('marq').innerHTML = 'no music is playing';}

Here are the two javascript functions we made earlier, each with an extra line for the marquee

there is one more thing to add

var y = document.getElementsByTagName('audio');
  for(var j=0; j<y.length; j++) {
    y[j].onended = function() {
      document.getElementById('marq').innerHTML = 'select a song!';};}

without this bit of javascript, the marquee would continue to display a songs name after the song finished on its own (the marquee so far only changes when a different song is chosen, or the stop button is clicked)

Thats it! Have fun ^^

home