Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by kristitammet
kristitammet
1,769 Points

Making a musicbox 1) Wrote a JS code, but it doesn't work. What's wrong? 2)How I can put boxes in the middle of page?

https://w.trhou.se/sgpvivu31r

4 Answers

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Hi Kristi,

to fix your centering problem is a bit difficult, it should work but i need to view your code for it. You can find more information about it when you search for it. You can try this link: https://css-tricks.com/centering-percentage-widthheight-elements/

You can add a jQuery link to your html which is hosted on a cdn. For example put this line at the bottom of your html, before the closing body tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

Put you own javascript after that.

I put the audiofiles in its own container for coding purposes. It doesn't have to be in its own container to target the files via jQuery, but i like to keep everything together in it's own container.

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Hi Kristi, i took a look at your code: To center the musicbox you can do this in your css:

#instrument{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Making the musicbox work: I didn't find a link in your html to a jQuery library. You'll need that. The link to your script has an error : <script scr="index.js"></script>. It has to be src instead of scr.

I altered the html a bit and put all of the audio elements inside a container and i put the javascripts at the end of the html. I also gave the audio elements a corresponding id (cAudio, dAudio, eAudio etc..)

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="main.css"/>
<title>Box of music</title>
</head>
<body>
  <div id="audioContainer">
    <audio id="cAudio">
      <source src="/AUDIO/c_note.ogg" type="audio/ogg"/>
      <source src="/AUDIO/c_note.wav" type="audio/wav"/>
      <source src="/AUDIO/c_note.mp3" type="audio/mpeg"/>  
    </audio>
    <audio id="dAudio">
      <source src="/AUDIO/d_note.ogg" type="audio/ogg"/>
      <source src="/AUDIO/d_note.wav" type="audio/wav"/>
      <source src="/AUDIO/d_note.mp3" type="audio/mpeg"/>  
    </audio>
      <audio id="eAudio">
      <source src="/AUDIO/e_note.ogg" type="audio/ogg"/>
      <source src="/AUDIO/e_note.wav" type="audio/wav"/>
      <source src="/AUDIO/e_note.mp3" type="audio/mpeg"/>  
    </audio>
    <audio id="fAudio">
      <source src="/AUDIO/f_note.ogg" type="audio/ogg">
      <source src="/AUDIO/f_note.wav" type="audio/wav">
      <source src="/AUDIO/f_note.mp3" type="audio/mpeg">  
    </audio>
      <audio id="gAudio"> 
      <source src="/AUDIO/g_note.ogg" type="audio/ogg">
      <source src="/AUDIO/g_note.wav" type="audio/wav">
      <source src="/AUDIO/g_note.mp3" type="audio/mpeg"> 
    </audio>
    <audio id="aAudio">
      <source src="/AUDIO/a_note.ogg" type="audio/ogg">
      <source src="/AUDIO/a_note.wav" type="audio/wav">
      <source src="/AUDIO/a_note.mp3" type="audio/mpeg">
    </audio>
    <audio id="bAudio">
      <source src="/AUDIO/b_note.ogg" type="audio/ogg">
      <source src="/AUDIO/b_note.wav" type="audio/wav">
      <source src="/AUDIO/b_note.mp3" type="audio/mpeg">
    </audio>
   </div>

    <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>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>  
  <script src="index.js"></script>  
</body>
</html>

In the javascript you can declare two variables containing the audio container and the musicbox elements. You can bind an eventlistener to the musicbox which listens to when a box is clicked.

var audioContainer = $('#audioContainer');
var musicBox = $('#instrument'); 
musicBox.on('click', '.box', function(){
    ///do stuff
}

When a box is clicked you can capture the id of the box:

   $(this).attr('id')

You can use this id to look up the corresponding audio element. So when you click on the box with id="c" you can look in your audioContainer for the audio element with the id="cAudio":

var note = audioContainer.find('#' + $(this).attr('id') + 'Audio');

After that you can play, pause etc your "note". To stop the note from ringing when clicking it again you will first have to pause it, rewind it and then play it again.

The whole script can look something like this:

var audioContainer = $('#audioContainer');
var musicBox = $('#instrument'); 

musicBox.on('click', '.box', function(){
  var note = audioContainer.find('#' + $(this).attr('id') + 'Audio');      
  note.trigger('pause');
  note.prop('currentTime', 0);      
  note.trigger('play');
});
kristitammet
kristitammet
1,769 Points
kristitammet
kristitammet
1,769 Points

Hi Erwin! Thank you a lot!

Couple of extra questions: 1) I tried to change #instrument in CSS sheet as you told, but result is still not correct. Now boxes are in left side :( It shouldn't be so difficult, but I don't have any idea.

2) Good notice for this jQuery library ( I haven't jet learned it, so I try to google how to add it to my files.) I downloaded and added it to my files. 3) Why you made another container ( <div id="audioContainer">) to audiofiles? Does it make code easier or more simple? JavaScript part is still not so clea:(

Thank you a lot for your help!

kristitammet
kristitammet
1,769 Points
kristitammet
kristitammet
1,769 Points

I got this center fix ok with ( position: absolute; top: 0; left: 0; bottom: 0; right: 0;).

I downloaded jQuery and I added to html file. (Still doens't work, but I try to find my mistake. It's probably in JS)

But thank you for helping!

Ohh, I found a MISTAKE in JS. I am really stupid! Had a typo error (*) before function.

Thanks again Erwin for a great help!!!