How to associate several component events to one JavaScript file?

[Bob Walance]

TL;DR Summary

Need help understanding associating web page component events to one JavaScript file.

I am creating a web page that will have several buttons on it. When a button is pressed it will play a tone or combination of tones.

With the Google Web Designer application, I can create a simple page with one button on it. I'm able to associate the clicking of that button with "Custom Code" for that button in order to play a tone, and it works.

I have not been able to figure out how to use one JavaScript file that several buttons use for their tone-generating functions - rather than having "Custom Code" for each button separately.

I'm not a software engineer and perhaps Google Web Designer is not the appropriate tool.

Any ideas would be appreciated.

 

[pbuk]

I'm not a software engineer and perhaps Google Web Designer is not the appropriate tool.

I don't think it is.

Any ideas would be appreciated.

Idea 1:

Idea 2 - the basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics

Idea 3 - how most people do this on a larger scale in 2022: https://reactjs.org/docs/getting-started.html

Idea 4 - how I like to do this on a larger scale in 2022:

 

[Bob Walance]

I can follow your html and javascript in Idea#1, and I'm playing around with it on the codepen website. I will start learning html. The javascript is easier for me because I have written C and C++ applications.

Your Idea#4 is something that I will study.

Thank you very much, pbuk. Your effort is sincerely appreciated.

 

[Bob Walance]

I have not been able to figure out how to use one JavaScript file that several buttons use for their tone-generating functions - rather than having "Custom Code" for each button separately.

I did find exactly what I was looking for by searching for 'html external javascript'. The key concept is 'external javascript'.

This is how to do it --
Place this in the html file. It associates the name of the JavaScript file and its functions ('<' and '>' omitted here):
script src="myMusicFunctions.js" /script
My .js file has a function called playSineWave(freq).

This code was created by the Google Web Designer app for the button press events:
script type="text/javascript" gwd-events="handlers"
window.gwd = window.gwd || {};
gwd.playThe440Hz = function(event) {
playSineWave(440);
};
gwd.button2 = function(event) {
playSineWave(550);
};
gwd.button1event = function(event) {
playSineWave(440);
};
gwd.button2event = function(event) {
playSineWave(550);
};
/script

 

[pbuk]

If you are happy with that then fine, but IMHO sooner or later you are going to find that Google Web Designer is just getting in your way and not really doing much for you - you can achieve a lot with just a few lines of vanilla HTML/CSS/JS (leveraging the excellent tone.js library).

 

[Bob Walance]

Yes, GWD is definitely a crutch. I have zero experience with html so it will help me achieve my goal more quickly AND allow me to see what-is-what in the html.

Cb or B#? E# or Fb? That is all very confusing to me - even having played trombone all throughout junior and senior high school. IMHO, the 12 notes should be called 0,1,2,3...11. No more enharmonic equivalents to worry about. No more sharp and flat keys and very simple key changes.

I blame the piano for this obfuscation. I posted about this a couple of years ago and am still really enjoying playing this other layout. There's a video at the bottom of the thread.
https://www.physicsforums.com/threa...d-juxtaposed-with-a-balanced-keyboard.989172/