# Online piano works but I want to eliminate static sound **URL:** https://discourse.processing.org/t/online-piano-works-but-i-want-to-eliminate-static-sound/35122 **Category:** Libraries **Created:** [February 12, 2022, 2:31am UTC](https://discourse.processing.org/t/online-piano-works-but-i-want-to-eliminate-static-sound/35122 "2022-02-12T02:31:00Z") **Posts on this page:** 1 **Page:** 1
### Author: ![HFredrickson](https://avatars.discourse-cdn.com/v4/letter/h/d2c977/32.png) [@HFredrickson](https://discourse.processing.org/u/HFredrickson) #### Post date: [February 12, 2022, 2:31am UTC](https://discourse.processing.org/t/online-piano-works-but-i-want-to-eliminate-static-sound/35122/1 "2022-02-12T02:31:00Z")
This code works(just copy and paste the **sketch.js** code below into the online p5.js editor: [https://editor.p5js.org/](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** ```auto ``` **style.CSS** ```auto html, body { margin: 0; padding: 0; } canvas { display: block; } ``` **sketch.js** ```auto // 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); } } ```