I want to make programmed sounds when I press the text.

Asked 1 weeks ago, Updated 1 weeks ago, 1 views

It's been four weeks since I taught myself how to code my life. I'm Corinne, a designer.

We are creating html in the form of a programmed sound when you press text.

(Struggling alone) So far, I've made a design that turns into a color bar when I click on a text.

The purpose is to make programming sounds when you press letters.

The professor made the code that makes the sound as a sample in the p5 editor and shared it with me.

(I also put the code that the professor helped me at the bottom.)

The code you made as a sample makes sounds in the p5 editor.

When I press the text of the html file that I created, I think I have to put a function value in order to make a sound, but I don't know which function value to write where and how, so I'm posting a question here.

<div id= "word" onclick="myFunction()">

Yesterday, an acquaintance of mine advised me to put a function value in here. I don't know what it is. (Because it's so corin...))

Please help me.

I'm using Max Monterey, and I'm working with an editor named Atom.

https://github.com/HinnnaHinnna/my-first-website/blob/main/visu_p(2).html https://hinnnahinnna.github.io/my-first-website/visu_p(2)

(Html that I made is put here. ) (I don't think I know exactly how to post the code in this questionnaire.) For now, I will upload the link above as well. I was wondering if I could use it as a reference.)

The path of the code you made as a sample is as follows.

https://editor.p5js.org/yangminha/sketches/HaRY7zGgM

When I put the cord on, it doesn't go up exactly.

Please help me...

javascript

2022-09-20 10:25

1 Answers

The code you made as a sample makes sounds in the p5 editor.

Then let's take a look at your sample.

<div onClick="playho(2);">ho2</div>

Let's think of this HTML as a foreign language text and read it.

Here begins a division. on click (this): playho 2

There is no word I don't know, but I don't know the meaning of the playho verb. Your index.html seems to know the meaning of this verb when you see it playing sound. So do you know what this verb is on your index.html web page? Open the questioner's github link, open the browser JavaScript console (if Chrome, F12), and click on it.

Oh, no! There's a red error.

Uncaught ReferenceError: playho is not defined
Unhandled reference error: I don't know what playho is

Sure enough, they don't even know the web page. But I don't see this scary error in your sample. Why is that? I think your sample source knows the meaning of the playho verb. Where did you learn that? I'm sure you've learned it somewhere!

Search all sources. Luckily, I was able to find playho in your sketch.js.

function playho(number) {
  // Blah blah blah...
}

Because this JavaScript was included in index.html, the browser could remember ("allocate") the playho verb ("function") and interpret ("execute"/"rendering")! Now, let's see if you learned that your code is playho

In your sketch.js, you can't find playho, but you can only find this.

function word(number) {
    // Blah blah blah...
}

Oh no! You never learned playho and you learned word. Then your index.html's fault is just a playho that should have been called word.

Now you understand what to fix. If you don't understand, let's just give it up, and let's say it's faster to copy your sample and start over. Don't give up, and look carefully again with a refreshing mind.


2022-09-20 10:25

If you have any answers or tips


© 2022 pinfo. All rights reserved.