Drum machine project- need help

JavaScript
1

Hi all,
I have just started the drum machine project and i can have the sound played
Can someone tell me if the code is correct / why is not working?
I tried 2 methods and none of them works
1- create a function and associate it with an event attribute on the button element
2-in Jquery, just get the id element and play it

this is the link
https://codepen.io/ranran212/pen/VwpLyOm
PS:Can i make the project with Jquery rather than React?

2

Play is a DOM native function, there’s no equivalent for JQuery (as far as I know, been a while since using it).

So either you get the dom element from the Jquery wrapper, or use standard JS:

document.getElementById("C").play()

The first line of the test suite states:

You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks

So yeah, you can use JQuery :slight_smile:

Hope it helps :sparkles:

3

Hi,
thanks for your reply :slightly_smiling_face:
yes, I know that I am allowed to use Jquery but my question was if Jquery (alone) can fulfil the requirements to create the project :slight_smile:
as regarding the play() method, I used a simple DOM snippet but i cannot hear any sound :frowning:

x = document.getElementById("#C"); 

function playAudio() { 
  x.play(); 
}

(#C is the id of the audio file)

4

Hello OP,

As the other poster sort of mentioned.

Try the following to get reference to audio element.

Vanilla js to get element:

x = document.getElementById("C");

jQuery:

x = $("#C")[0];

I assume the id of the audio element is “C” and not “#C”.
From recollection html id should start with a letter [A-Za-z].

Css uses the # at start of selector to get id - that is why the jQuery syntax uses the # in its selector

Hope that helps out

5

Forget to mention - what is calling the playAudio function?

6

hi,
yes, after some googleing I came up with the get(0) (or [0]) to have the audio played in jQuery :slight_smile:
if you please give a look at this pen i made just for testinghttps://codepen.io/ranran212/pen/QWpbzrm

i had first this code and worked

$(document).ready(function(){
  $('button').click(function(){  
    $('.sound1').get(0).play();  
  }); 
})

then i tried to create a function and use it in the onclick attribute of the button but when I click on the button i get this error
Uncaught ReferenceError: playSound is not defined
(I also tried this other syntax
const playSound = () => {
$(’.sound2’).get(0).play();
} but with same poor result;

$(document).ready(function(){
  function playSound() {
    $('.sound2').get(0).play();
  };
})

by the way, what is the correct way to associate function with onclick attribute?
A- or
B-?

since I have several button, each associated with its own sound, which method is better: having the onclick attribute on the or the button.click(function{})?

7

Hello francesca.giammichel,

In jQuery - you are dealing with selector alot

If you have time you should have a read of these reference:

basically understanding css helps alot.

Your jquery selector code:

$('button')
//this selects all tag with button into a list,
//a type of jQuery list object

When you add the onclick to this selector - then all button(s) will be clicked

A few suggestion:
Give each audio element a unique id and have a separate function to deal with each button click to point for respective autio file.
Or change what is happening whe a button is clicked

These two line of code are not being used together

    let x=$(this).children("audio").attr(class);
    //assign attribute value of current clicked element find child audio and get class name
    $('.sound2').get(0).play(); 
    //find class .sound2 and get first jquery list object convert to dom object  and then play

Suggest find the dom element - like what you are doing in line 1
and then play it - like in line 2 (instead of playing .sound2)

Best practice syntax for onclick - I think is like following:

$(seclectorHere).on('click', function(){
  //code here
});
//this syntax allows for many actions to be performed
//for example 'click mousedown', the events click and mousedown at the same time

reference: .on() | jQuery API Documentation

Hope that helps out.

8

Just wanted to mention.
The following will get the same dom element

$(selector)[0]  //vanilla javascript probably faster
$(selector).get(0) //jquery
9

thank you for your assistance
Actually I understood the selector references for both css and jQuery, I am just awkward about methods and some synthax error
for example I do not undestand why, if a define a function, I cannot use it on the onclick attribute for a button

btw I had tha staff working, and I am presentrly trying to add the last pieces to have the drum machine working with keyboard stuff, too :slight_smile:
https://codepen.io/ranran212/pen/VwpLyOm?editors=1111

Yes, styling should be improved :stuck_out_tongue:

10

Ah you can call a function via an onclick event.
It is probably due to scope that the function might not be found.

Basically if the function is defined in $(document).ready it is within the scope of the ready function.
Then when you try to call it outside of the $(document).ready scope it can not find it.

Hope that makes sense.

Made a simple fiddle to try and illustrate:
https://jsfiddle.net/192kguzb/

11

hi and thank you for the fiddle ^-^

yes, I got the “scope” concept… my concerning was about something like this

<button onclick="myFunction()">Click me</button>

if I define myFunction in the js.file, es

const myFunction =()=>{
      alert("hi");
}

or 

function myFunction() {
    alert("hallo");
}

nothing happens when I click the button :frowning:

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.