tatecarson/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="p5.js"></script>
  <!-- Not needed -->
  <!-- <script src="p5.sound.min.js"></script> -->
  <script src="http://unpkg.com/tone"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">

</head>

<body>
  <script src="sketch.js"></script>


</body>

</html>

## sketch.js
// NOTE: you already have a setup and draw below, you can't have two
// function setup() {
//   createCanvas(400, 400);
// }

// function draw() {
//   background(220);
// }

let player;

let button;
let shiftSlider;
let shifter;

let wetMix;

function preload(){
  shifter = new Tone.PitchShift(2).toMaster();

  // NOTE: this is an incorrect path, Tone.Player is expecting a path to an mp3. See the documentation:
  // https: //tonejs.github.io/docs/13.8.25/Player

  // player = new Tone.Player(chicken + beat + AllDone + bongo).connect(shifter);
}

function setup() {
  createCanvas(400, 400);
  background(200, 230, 10);

  // NOTE: you had .connect(pitchShift), but that isn't defined
  // i'm changing it to shifter, which is defined above
  const bongo = new Tone.Player('bongos.wav').connect(shifter);

  wetMix = createSlider(0,1,1,0);
  wetMix.style("width","200px");
  wetMix.position(width/2-100, height/2+80);

  shiftSlider = createSlider(-12,12,2,1);
  shiftSlider.style("width", "200px");
  shiftSlider.position(width/2-100, height/2+150);

  button = createButton('click me for bongos')
  button.position(19, 20);
  button.mousePressed(() => bongo.start());

  // NOTE: make sure new Tone is on the same line, don't split it up like you had it
  const chicken = new Tone.Player('chicken.wav').connect(shifter);

  button = createButton('click me for chicken')
  button.position(19, 40);
  button.mousePressed(() => chicken.start());

  // NOTE: here too
  const beat = new Tone.Player('sick beat bro.wav').connect(shifter);

  button = createButton('click me for a sick beat')
  button.position(19, 60);
  button.mousePressed(() => beat.start());

  const AllDone = new Tone.Player('DONE!.wav').connect(shifter);

  button = createButton('click to hear my Mardi Gras group when I finished this assignment')
  button.position(19, 80);
  button.mousePressed(() => AllDone.start());

}

function draw() {
  // NOTE: redraw the background so we can read the labels
  background(100);
  shifter.wet.value = wetMix.value();
  shifter.pitch = shiftSlider.value();

  textSize(17);
  text("PitchShift", width/2, height/2-100);
  textSize(10);
  fill(225);

  textAlign(CENTER);
  text(int(wetMix.value() *100)+ "% effected sound", wetMix.x+100, wetMix.y-10);
  textAlign(CENTER);
  text("Shift value parameter: "+ shiftSlider.value()+"half steps", shiftSlider.x+100, shiftSlider.y-25);
}

// NOTE: this isn't going anywhere, probably can delete
// function play1(){
//   player.start();
// }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<script src="p5.js"></script>
	<!-- Not needed -->
	<!-- <script src="p5.sound.min.js"></script> -->
	<script src="http://unpkg.com/tone"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8">

	</head>

	<body>
	<script src="sketch.js"></script>


	</body>

	</html>
	// NOTE: you already have a setup and draw below, you can't have two
	// function setup() {
	// createCanvas(400, 400);
	// }

	// function draw() {
	// background(220);
	// }

	let player;

	let button;
	let shiftSlider;
	let shifter;

	let wetMix;

	function preload(){
	shifter = new Tone.PitchShift(2).toMaster();

	// NOTE: this is an incorrect path, Tone.Player is expecting a path to an mp3. See the documentation:
	// https: //tonejs.github.io/docs/13.8.25/Player

	// player = new Tone.Player(chicken + beat + AllDone + bongo).connect(shifter);
	}

	function setup() {
	createCanvas(400, 400);
	background(200, 230, 10);

	// NOTE: you had .connect(pitchShift), but that isn't defined
	// i'm changing it to shifter, which is defined above
	const bongo = new Tone.Player('bongos.wav').connect(shifter);

	wetMix = createSlider(0,1,1,0);
	wetMix.style("width","200px");
	wetMix.position(width/2-100, height/2+80);

	shiftSlider = createSlider(-12,12,2,1);
	shiftSlider.style("width", "200px");
	shiftSlider.position(width/2-100, height/2+150);

	button = createButton('click me for bongos')
	button.position(19, 20);
	button.mousePressed(() => bongo.start());

	// NOTE: make sure new Tone is on the same line, don't split it up like you had it
	const chicken = new Tone.Player('chicken.wav').connect(shifter);

	button = createButton('click me for chicken')
	button.position(19, 40);
	button.mousePressed(() => chicken.start());

	// NOTE: here too
	const beat = new Tone.Player('sick beat bro.wav').connect(shifter);

	button = createButton('click me for a sick beat')
	button.position(19, 60);
	button.mousePressed(() => beat.start());

	const AllDone = new Tone.Player('DONE!.wav').connect(shifter);

	button = createButton('click to hear my Mardi Gras group when I finished this assignment')
	button.position(19, 80);
	button.mousePressed(() => AllDone.start());

	}

	function draw() {
	// NOTE: redraw the background so we can read the labels
	background(100);
	shifter.wet.value = wetMix.value();
	shifter.pitch = shiftSlider.value();

	textSize(17);
	text("PitchShift", width/2, height/2-100);
	textSize(10);
	fill(225);

	textAlign(CENTER);
	text(int(wetMix.value() *100)+ "% effected sound", wetMix.x+100, wetMix.y-10);
	textAlign(CENTER);
	text("Shift value parameter: "+ shiftSlider.value()+"half steps", shiftSlider.x+100, shiftSlider.y-25);
	}

	// NOTE: this isn't going anywhere, probably can delete
	// function play1(){
	// player.start();
	// }