Online piano works but I want to eliminate static sound

Question

0.00/5 (No votes)

See more:

This code works(just copy and paste the **sketch.js** code below into the online p5.js editor: https://editor.p5js.org/ ) but every note plays emits a static-sound when the synth turns on. Can anyone suggest a way to eliminate the static sound? Maybe leave the synth running all the time and switching frequencies as notes are needed? Thank you.(to run this on your own editor you need p5.js and p5.sound.min.js files in your project folder.)

**index.html**

```
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="p5.js"></script>
	<script src="p5.sound.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">
</head>
<body>
	<script src="sketch.js"></script>
</body>
</html>

```

**style.CSS**
```
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
```

**sketch.js**
```
// Removing Objects from Arrays
// Code! Programming with p5.js
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/beginners/p5js/7.5-removing-objects-from-array.html
// https://youtu.be/tA_ZgruFF9k

// Main Sketch: https://editor.p5js.org/codingtrain/sketches/smC4Jedi
// Trail Sketch: https://editor.p5js.org/codingtrain/sketches/9Ve9S6Mx
var wave;
var playing = false;
let bubbles = [];
let time = .25;
let t = 1;
let waves = [];
let freqs = [392, 440, 392, 494, 523, 523, 330, 370, 392, 494, 587, 294, 294, 392, 440, 294, 330, 294, 294, 370, 392, 294, 330, 294, 294];
var freq;
let xs = [410, 500, 410, 600, 700, 700, 200, 350, 410, 700, 800, 100, 100, 410, 500, 100, 200, 100, 100, 350, 410, 100, 200, 100, 100];
let ys = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, ];

function setup() {
	createCanvas(1600, 2000);
	wave = new p5.Oscillator();


	for (let i = 0; i < 25; i++) {
		let x = xs[i];
		let y = ys[i];
		let r = 24;
		let b = new Bubble(x, y, r);
		bubbles.push(b);
	}
}

function mousePressed() {
	for (let i = bubbles.length - 1; i >= 0; i--) {
		if (bubbles[i].contains(mouseX, mouseY)) {
			//bubbles.splice(i, 1);
			wave.setType('sine');
			wave.start();
			wave.freq(freqs[i]);
			wave.amp(1);
			playing = true;
			wave.stop(time);
			waves.push(wave);
		}
	}
	console.log(waves);
	console.log(bubbles);
}

function draw() {
	background(0);
	strokeWeight(5);
	//stroke(255,0,255);
	fill(255, 255, 255);
	rect(60, 1400, 90, 180);
	rect(160, 1400, 90, 180);
	rect(260, 1400, 90, 180);
	rect(360, 1400, 90, 180);
	rect(460, 1400, 90, 180);
	rect(560, 1400, 90, 180);
	rect(660, 1400, 90, 180);
	rect(760, 1400, 90, 180);
	rect(860, 1400, 90, 180);
	stroke(0, 0, 255);
	fill(0, 0, 0);
	rect(10, 1300, 82, 180);
	rect(110, 1300, 82, 180);
	rect(310, 1300, 82, 180);
	rect(410, 1300, 82, 180);
	rect(510, 1300, 82, 180);
	rect(710, 1300, 82, 180);
	rect(810, 1300, 82, 180);


	for (let i = 0; i < bubbles.length; i++) {
		if (bubbles[i].contains(mouseX, mouseY)) {
			bubbles[i].changeColor('magenta');
		} else {
			bubbles[i].changeColor(0);
		}

		bubbles[i].move();
		bubbles[i].show();
	}
}

class Bubble {
	constructor(x, y, r) {
		this.x = x;
		this.y = y;
		this.r = r;
		this.brightness = 0;
	}

	changeColor(bright) {
		color = bright;
	}

	contains(px, py) {
		let d = dist(px, py, this.x, this.y);
		if (d < this.r) {
			return true;
		} else {
			return false;
		}
	}

	move() {
		this.x = this.x;
		this.y = this.y + 1.95;
	}

	show() {
		stroke(255);
		strokeWeight(4);
		fill(color);
		ellipse(this.x, this.y, this.r * 2);
	}
}
```

What I have tried:

I have tried adjusting the synthesizer parameters but I don't think they have anything to do with the static sound as the synthesizer clicks on.

Posted 11-Feb-22 15:59pm

Member 13702372

Updated 11-Feb-22 16:03pm

Add a Solution

Comments

[no name] 12-Feb-22 12:03pm

It would appear you need to fiddle with the "wav" properties in mousePressed().

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)