Creating simple music box with JavaScript

In this article, you will be creating a small JavaScript project “Music box”. This project gives you more practice with Object-oriented programming. It is easy to build your own music box. In this JavaScript project you will present a list of your favorite songs.

Skills you need:

HTML
CSS
JavaScript.

Steps to create music box project by using JavaScript.

1. Add audio tags.

Let’s start by choosing and downloading the audio file. That you will need to create these music boxes. Once You’ve downloaded the the audio make sure it is in the place where you can find it easily.

3.Add your audio tags.

Now you will add the <audio> tag in the <body> of HTML file. let’s see the example shown below.

<body>
          <audio>
          </audio>
</body>

The HTML <audio> tag is used to play an audio file on a web page. That is going to be the key to the whole project.

3. Adding audio files

Now that we’ve add the audio files to the audio tag. Now the problem is that there is not one audio file type all the browsers can play. So we must offer three different audio files that we know various browsers will be able to handle.

Each one of the files will make the same sound but they have been converted to different formats that are suitable for different browsers. By providing different files, we make it more likely that someone will be able to hear and play with our music boxes project.

So now we understand why we have so many different file types. Now let’s add our audio to the <audio> tag. To do it you will define three different source for your audio element that a browser could pick.

inside the <audio> tag add a new < source> tag.
The< source> element allows you to specify alternative audio files which the browser may choose from.

example:

<audio id="cAudio">
        <source src="/static/apps/music_boxes/media/c_note.mp3" type="audio/mpeg"></source>
        <source src="/static/apps/music_boxes/media/c_note.ogg" type="audio/ogg"></source>
        <source src="/static/apps/music_boxes/media/c_note.wav" type="audio/wav"></source>   
    </audio>

4. make some boxes

Now you start making your boxes. Each box has it own unique id. You can give them different colors and style as you like to. Each box will become a button that plays a single note.

<div id= "instrument">   
        <div id= "c" class="box"></div>        
        <div id= "d" class="box"></div>
        <div id= "e" class="box"></div>
        <div id= "f" class="box"></div>
        <div id= "g" class="box"></div>
        <div id= "a" class="box"></div>
        <div id= "b" class="box"></div>
    </div>

In above code

In the HTML tab add a new <div> tag below our audio files.
Give it an id=”instrument” attribute. We’ll use this container to hold and position the note boxes.
Inside the <div id=”instrument”>, add seven more div.
Give each <div> an id that corresponds to a musical note starting with c and ending with b. Hint: this is a C scale (c, d, e, f, g, a, b).
Also, give each <div> a class called “box” (We’ll use this to shape all of our note boxes the same).

5. Style the boxes using css

By using CSS you can style your Boxes. you can add colors shape anything you want to.

body {
    background-color: black;   
}

/*This is the style for our boxs' container. With it we can position and center the boxes in the browser.*/

#instrument {
    height: 116px;
    width: 812px;
    padding-right: 10px;
    padding-top: 50px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

/*This is the style that give our music boxes shape*/

.box {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 10px;
    float:left;
}

/*These are the styles that individually color our boxes and also determine the hover and active states*/

#c:hover {
    background-color:#661920;
    cursor: pointer;

}

#c:active {
    background-color:#db1d2d;  
}

#c {
    background-color: #3e181b;
    border: 3px solid #db1d2d;
}
#d:hover {
    background-color:#6e2819;
    cursor: pointer;
    
}

#d:active {
    background-color:#f0421c;   
}

#d {
    background-color: #422018;
    border: 3px solid #f0421c;
}


#e:hover {
    background-color:#735b20;
    cursor: pointer;
}

#e:active {
    background-color:#fec02d;   
}

#e {
    background-color: #45391b;
    border: 3px solid #fec02d;
}


#f:hover {
    background-color:#1b613b;
    cursor: pointer;
}

#f:active {
    background-color:#20d071;   
}

#f {
    background-color: #193c29;
    border: 3px solid #20d071;
}


#g:hover {
    background-color:#184d65;
    cursor: pointer;
}

#g:active {
    background-color:#1a9ddb;   
}

#g {
    background-color: #18323e;
    border: 3px solid #1a9ddb;
}


#a:hover {
    background-color:#4e2753;
    cursor: pointer;
}

#a:active {
    background-color:#a13fad;   
}

#a {
    background-color: #331f35;
    border: 3px solid #a13fad;
} 


#b:hover {
    background-color:#6f3a62;
    cursor: pointer;
}

#b:active {
    background-color:#f26fd4;   
}

#b {
    background-color: #43293d;
    border: 3px solid #f26fd4;
}

We you hover to make our boxes more attractive. The :hover selector is used to select elements when you mouse over them.

6. Add JavaScript.

Let’s add JavaScript to our boxes to make these boxes “musical box”. to add JavaScript you firstly need add <script>tag at the end of <body> tage or in <head> tag.

As you add the id to each note. That id will help you to control these elements. For exapmle.

<audio id="cAudio">
        <source src="/static/apps/music_boxes/media/c_note.mp3" type="audio/mpeg"></source>
        <source src="/static/apps/music_boxes/media/c_note.ogg" type="audio/ogg"></source>
        <source src="/static/apps/music_boxes/media/c_note.wav" type="audio/wav"></source>   
</audio>

Now in the JavaScript we add a new variable called as cNote.
Use document.getElementById to pull the cNote audio element we defined on the HTML tab.

var cNote = document.getElementById('cAudio');

Now that we have got a variable with our audio file , let’s make it play. Here you need to add jQuery to call out our #c(#=id) <div> and make it play your cNote variable every time it’s clicked.

$('#c').mousedown(function(){

});

This will turn that #c div into a true button that will run a function as soon as the <div> is pressed with your mouse button.

In between the function braces, add the line: cNote.play()
Go to the preview mode and click the first box? Did the note play?

Try clicking it twice, quickly. You’ll notice that the audio file will play all the way through (about 8 seconds) before we can click it again. That’s no fun. Let’s add some code to change that.

Go back into the Javascript tab.
Add a new line of code above cNote.play();
Add the following text: cNote.currentTime = 0;

$('#c').mousedown(function(){
        
        // This is a property that scrubs the audio file back to its start.
        cNote.currentTime = 0;
        
        // This plays the audio file.
        cNote.play();
    });

currentTime is a property that will scrub back to a certain point of a media file, measured in seconds. In this case we’re scrubbing it back to the beginning, or 0 seconds. This will happen every time the button is clicked and just before the file plays.

Go ahead and add ids, variables and .mousedown functions for the six other notes and your music player will be finished!

$(document).ready( function() {
    
    // This controls the button for the c note.
    
    // This variable calls the cNote audio element in the HTML.
    var cNote = document.getElementById('cAudio');
    
    // This turns our <div id= "c"> into a button that plays our audio file when the box is pressed.
    $('#c').mousedown(function(){
        
        // This is a property that scrubs the audio file back to its start.
        cNote.currentTime = 0;
        
        // This plays the audio file.
        cNote.play();
    });
    
    // This controls the button for the d note.
    
    var dNote = document.getElementById('dAudio');
    
    $('#d').mousedown(function(){
        dNote.currentTime = 0;
        dNote.play();
    });
    
    // This controls the button for the e note.
    
    var eNote = document.getElementById('eAudio');
    
    $('#e').mousedown(function(){
        eNote.currentTime = 0;
        eNote.play();
    });
 
    // This controls the button for the f note.
    
    var fNote = document.getElementById('fAudio');
    
    $('#f').mousedown(function(){
        fNote.currentTime = 0;
        fNote.play();
    });
    
    // This controls the button for the g note.
    
    var gNote = document.getElementById('gAudio');
    
    $('#g').mousedown(function(){
        gNote.currentTime = 0;
        gNote.play();
    });
    
    // This controls the button for the a note.
    
    var aNote = document.getElementById('aAudio');
    
    $('#a').mousedown(function(){
        aNote.currentTime = 0;
        aNote.play();
    });
    
    // This controls the button for the b note.
    
    var bNote = document.getElementById('bAudio');
    
    $('#b').mousedown(function(){
        bNote.currentTime = 0;
        bNote.play();
    });
    
});

Output:

Reference

Coder.com