# I need two songs to sound after the other

**URL:** <https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274>\
**Category:** Coding Questions\
**Created:** [June 26, 2018, 10:05am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274 "2018-06-26T10:05:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [June 26, 2018, 10:05am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/1 "2018-06-26T10:05:23Z")

</div>

Hi community,

I would like my code to play a sound, stop for 5 secs and play another sound.  
There will be 7 sounds that have to combine randomly with each other (that makes 42 combinations).

Following the p5.js example, do you have any suggestions for a beginner like me?

Thanks heaps.

```auto
var song;

function setup() {
  song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
  createCanvas(720, 200);
  background(255,0,0);
}

function mousePressed() {
  if ( song.isPlaying() ) { // .isPlaying() returns a boolean
    song.stop();
    background(255,0,0);
  } else {
    song.play();
    background(0,255,0);
  }
}

```

[https://p5js.org/examples/sound-load-and-play-sound.html](https://p5js.org/examples/sound-load-and-play-sound.html)

---

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [June 26, 2018, 9:22pm UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/2 "2018-06-26T21:22:50Z")

</div>

This is a rough idea of my code

```auto
var volumeS, volume;
var numSongs = 24;

function preload() {
  createCanvas(windowWidth, windowHeight);
  background(255);

  keyList = ['W', 'A', 'S', 'D', 'F', 'G', 'E', 'R', 'T', 'Y', 'H', 'U', UP_ARROW, DOWN_ARROW];

  //LIST OF STRINGS
  samplePresets = [{
    name: '1bsn',
    filename: 'dn_bsn*.wav'
  }, {
    name: '2can',
    filename: 'dn_can*.wav'
  }, {
    name: '3cnt',
    filename: 'dn_cnt*.wav'
  }, {
    name: '4gtn',
    filename: 'dn_gtn*.wav'
  }, {
    name: '5gtr',
    filename: 'dn_gtr*.wav'
  }, {
    name: '6hcd',
    filename: 'dn_hcd*.wav'
  }, {
    name: '7hrn',
    filename: 'dn_hrn*.wav'
  }, {
    name: '8hrp',
    filename: 'dn_hrp*.wav'
  }, {
    name: '9obc',
    filename: 'dn_obc*.wav'
  }, {
    name: '10obo',
    filename: 'dn_obo.wav'
  }, {
    name: '11ols',
    filename: 'dn_ols*.wav'
  }, {
    name: '12pno',
    filename: 'dn_pno*.wav'
  }, {
    name: '13pob',
    filename: 'dn_pob.wav'
  }, {
    name: '14sno',
    filename: 'dn_sno*.wav'
  }, {
    name: '15spo',
    filename: 'dn_spo.wav'
  }, {
    name: '16stg',
    filename: 'dn_stg*.wav'
  }, {
    name: '17tbn',
    filename: 'dn_tbn*.wav'
  }, {
    name: '18tpr',
    filename: 'dn_tpr*.wav'
  }, {
    name: '19tpt',
    filename: 'dn_tpt*.wav'
  }, {
    name: '20vbn',
    filename: 'dn_vbn*.wav'
  }, {
    name: '21vbs',
    filename: 'dn_vbs*.wav'
  }, ];

  //LIST OF AUDIO
  samplePresetAudio = [];
  for (var i = 0; i < samplePresets.length; i++) {
    samplePresetAudio[i] = loadSound('Assets/' + samplePresets[i].filename); // + load silence + loadSecondSound
  }

  //RANDOMISE SIZE

  //RECTANGLE
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  fill(255, 255, 0);
  rect(topLeft, topRight, side, side);
  fill(0);
  textSize(windowHeight / 20);
  textFont("Helvetica");
  textAlign(CENTER);
  text("PLAY", topLeft + side / 2, topRight + side / 1.8);

  // SLIDER
  var sliderOld = createSlider(0, 4, 1);
  sliderOld.style('width', '500px');
  sliderOld.position(windowWidth / 3, windowHeight / 1.2);

  //NUMBERS
  var posNumbers = windowWidth / 3 + 10;
  var inc = 121;
  var posNumbersY = windowHeight / 1.22;
  fill(100);
  textSize(windowHeight / 25);
  textFont("Helvetica");
  textAlign(CENTER);
  text("1", posNumbers, posNumbersY);
  text("2", posNumbers + inc, posNumbersY);
  text("3", posNumbers + 2 * inc, posNumbersY);
  text("4", posNumbers + 3 * inc, posNumbersY);
  text("5", posNumbers + 4 * inc, posNumbersY);
}

function draw() {}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

  //RECTANGLE
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  fill(255, 255, 0);
  rect(topLeft, topRight, side, side);
  fill(0);
  textSize(windowHeight / 20);
  textFont("Helvetica");
  textAlign(CENTER);
  text("PLAY", topLeft + side / 2, topRight + side / 1.8);

}

function keypressed() {
  if (keyIsPressed && key == 'e')
    print(sliderOld);
}

function mousePressed() {
  var side = windowWidth / 6;
  var topLeft = windowWidth / 2 - side / 2;
  var topRight = windowHeight / 2 - side / 2;
  for (var x = 0; x < numSongs / 2; x++) {
    for (var y = 1; y < 3; y++) {
      if (mouseX > topLeft && mouseX < topLeft + side && mouseY > topRight && mouseY < topRight + side) {
        if (samplePresetAudio[x + (y - 1) * 12].isPlaying()) { // .isPlaying() returns a boolean
          samplePresetAudio[x + (y - 1) * 12].pause();
          fill(255, 255, 0);
          rect(topLeft, topRight, side, side);
          fill(255, 0, 0);
          textSize(windowHeight / 20);
          textFont("Helvetica");
          textAlign(CENTER);
          text("PLAY", topLeft + side / 2, topRight + side / 1.8);
        } else {
          samplePresetAudio[x + (y - 1) * 12].play();
          samplePresetAudio[x + (y - 1) * 12].amplitude = volume
          fill(255, 255, 0);
          rect(topLeft, topRight, side, side);
          fill(255, 0, 0);
          textSize(windowHeight / 20);
          textFont("Helvetica");
          textAlign(CENTER);
          text("PLAY", topLeft + side / 2, topRight + side / 1.8);
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [June 27, 2018, 2:08am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/3 "2018-06-27T02:08:43Z")

</div>

here are a few things to look into as you try to work it out!

firstly I’d get one thing working and then add a bit more on slowly rather than trying to add too much too fast. This is a common mistake beginners make and it makes debugging really hard. Just do one thing at a time (a small thing) and make sure its working.

So here is a list of things I’d try to work out (in order)

1. a schema to organize your files (you’re already on this from the code above)
2. a way to get and play a random file  
– you might investigate the `random()` and `int()` &/or `floor()` functions to get a random number and pull a random filename out of your json.  
– Speaking of pulling filenames out, you might want to `preload()` them all and store them in an array, this would change how you pull the audio data since you might pull it out of the array instead of loading the file right then when you need it (for performance!) (happy to provide an example of this if you want it!)
3. now that you have a random player working, its time to sort out the timing issue. build a timer using `console.log()` or `print()` just to work out what you are trying to accomplish and how to get there.  
– to build a timer there are many options including a `setInterval()` function, but I might encourage you to investigate the `seconds()`, `millis()`, `frameCount` and modulo `%` operator to create a timer withing your p5 draw loop instead of starting an entirely different timing scheme outside of p5 with a `setInterval()`
4. now that you’ve got timing down, its time to start combing the timing system and playback system together.  
– one thing you’re likely going to need for this is to know when the audio finished playing. checkout the p5.dom’s documentation on `currentTime()` and `onended()`
5. maybe you’re done? 👏

so you can see that this has been taken in steps or phases to complete one idea at a time. it can be difficult to get it all going so start small and build from there. don’t be afraid to get a small piece done at a time just work out that idea and then keep moving forward.

You might also check out the `p5.score` and `p5.part` functionality of the `p5.sound` library, it’s all about sequencing audio files. Someone else might be able to speak to it better than I can, but it’s also really in line with that you’re trying to do.

Good Luck & Happy Coding!

---

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [June 27, 2018, 8:52am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/4 "2018-06-27T08:52:49Z")

</div>

Thanks a lot for your prompt and well explained response.  
I’ll start working on this and let you know.

Cheers,

---

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [July 2, 2018, 11:30am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/5 "2018-07-02T11:30:58Z")

</div>

Hi bmoren,

I could get done all the points that you suggested (thanks heaps for your help).  
To finish the code now I just need three things and I was wondering if you could help me:

1. When I resize the window, slider and submit button don’t apply changes as other elements do. I guess they have some sort of inheritance that doesn’t allow to do this as I do with the numbers and the NEXT button. Any suggestions?
2. On the list of songs, if I’ve got A,B,C,D… I need to combine the pairs of songs without repetition (A-B, A-C, A-D, B-C, B-D, C-D) and delete the ones that have already been played from the list. Any ideas?
3. When I press submit I would like to save that info somewhere (I guess it would ideally be a .csv so every pair of sounds (row) have the different similarity ratings (columns) to analyse the information later comparing to the spectral analysis of the sounds.

Thanks a lot for your help!

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [July 2, 2018, 3:34pm UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/6 "2018-07-02T15:34:13Z")

</div>

> [@ruski15](#):
>
> - When I resize the window, slider and submit button don’t apply changes as other elements do. I guess they have some sort of inheritance that doesn’t allow to do this as I do with the numbers and the NEXT button. Any suggestions?

check out the [windowResized()](https://p5js.org/reference/#/p5/windowResized) function, you can then write a piece in there to capture the slider status with something like

```javascript
var val = slider.value();

```

or anything else you want to do when the window gets resized, this should get you there!

> [@ruski15](#):
>
> - On the list of songs, if I’ve got A,B,C,D… I need to combine the pairs of songs without repetition (A-B, A-C, A-D, B-C, B-D, C-D) and delete the ones that have already been played from the list. Any ideas?

are you using random number generator? if so you could look at [this example](https://gist.github.com/bmoren/dad0f6abee6f9eae84600d02f4ed231b) to generate a non-repeating number.

but the easiest might be to duplicate / build an array, shuffle it ([many options here](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)) and then pop each piece of the array off one by one.

> [@ruski15](#):
>
> - When I press submit I would like to save that info somewhere (I guess it would ideally be a .csv so every pair of sounds (row) have the different similarity ratings (columns) to analyse the information later comparing to the spectral analysis of the sounds.

there are a few options for this, and it depends on how you’ve saved your data.

you might look into

> **[reference | p5.js](https://p5js.org/reference/#/p5/save)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/saveTable)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/createWriter)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

good luck!

---

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [July 20, 2018, 1:42am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/7 "2018-07-20T01:42:07Z")

</div>

Hi bmoren,

Hope you are doing well.  
I’ve been trying to solve this by myself for ages but unfortunately I need some help. I want to save a csv or tsv with the information gathered by the program, but I’m unable to saveTable in any other place than at the beginning. What I need is a table that collects the inputs made by users and saves a table in csv at the very end. I’m going nuts :S

Here is an example of my problem and below is my master code:

```auto
var table;
var buttonB;
var newRow;

function setup() {
	table = new p5.Table();
	table.addColumn('number');
	table.addColumn('name');
	
	newRow = table.addRow();
	
	buttonID = createButton('SUBMIT');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(addBicho);
	
	printTable();

}

function draw() {

}

function addBicho() {
	for (i = 0; i < 10; i++) {
		table.addColumn(i);
	}
	newRow.setString(1, 'sabandija');
	print(table);
	printTable();
}

function printTable() {
	saveTable(table, 'bichos.csv');
}

```

When I first see the csv everything looks fine but when you click on submit to add info I get this:  
∫w^~)fi

* * *

Here is the full code where I need to implement it (just in case it helps). I thought it would be easier to send you a short example (above) to illustrate it much simpler. Please forbid the messy code (proper of a beginner like me):

```auto
var index = 0;
var index2 = 0;
var buttonOld;
var buttonNew;
var listAudioCombs1;
var listAudioCombs2;
var posRect = [];
var clicks = 1;
var value;
var valueOld;
var transp = [10, 10, 10, 10, 10, 10];
var answers = [];
var table;
var finish = false;
var newRow;
var play = false;
var buttons = false;
var change = false;
var inputName;
var inputAge;
var inputSex;
var inputInsPlaying;
var inputIns;
var inputYearsPlaying;
var tableArray;
var N;
var A;
var S;
var IP;
var I;
var IY;
var myInt;
var points;
var completed = false;
var file;

function preload() {
	createCanvas(windowWidth, windowHeight);
	background(255);

	keyList = ['W', 'A', 'S', 'D', 'F', 'G', 'E', 'R', 'T', 'Y', 'H', 'U', UP_ARROW, DOWN_ARROW];

	//LIST OF STRINGS
	samplePresets = [{
		name: '1cnt',
		filename: 'dn_cnt*.wav'
	}, {
		name: '2gtr',
		filename: 'dn_gtr*.wav'
	}, {
		name: '3vbs',
		filename: 'dn_vbs*.wav'
	}, {
		name: '4stg',
		filename: 'dn_stg*.wav'
	}, {
		name: '5gtn',
		filename: 'dn_gtn*.wav'
	}, {
		name: '6obc',
		filename: 'dn_obc*.wav'
	}, {
		name: '7vbn',
		filename: 'dn_vbn*.wav'
	}, ];

	// LIST of ANSWERS (table)
	table = new p5.Table();
	table.addColumn('Name');
	table.addColumn('Age');
	table.addColumn('Sex');
	table.addColumn('Instrument');
	table.addColumn('Ins');
	table.addColumn('Years');
	table.addColumn('Pair_number');
	table.addColumn('Audio1');
	table.addColumn('Audio2');
	table.addColumn('Answer');
	//save(table, "init.csv")

	//LIST OF AUDIO
	samplePresetAudio = [];
	for (var i = 0; i < samplePresets.length; i++) {
		samplePresetAudio[i] = loadSound('Assets/' + samplePresets[i].filename);
	}

	// Create list of all possible combinations
	listAudioCombs1 = []
	listAudioCombs2 = []
	var regenerate = false;
	var j = 0;
	while (j < 10) { // decide here how many pairs of sounds
		index = int(random(samplePresetAudio.length));
		index2 = int(random(samplePresetAudio.length));
		while (index == index2) {
			index2 = int(random(samplePresetAudio.length));
		}
		// check that the pair doesnt exist
		for (var k = 0; k < listAudioCombs1.length; k++) {
			if (listAudioCombs1[k] == index && listAudioCombs2[k] == index2) {
				regenerate = true
			}
			if (listAudioCombs2[k] == index && listAudioCombs1[k] == index2) {
				regenerate = true
			}
		}
		// if it didnt exist, regenerate will still be false, so add pair of values to listAudioCombs
		if (regenerate === false) {
			listAudioCombs1[j] = index;
			listAudioCombs2[j] = index2;
			j++;
		}
		regenerate = false;
	}
	inputName = createInput();
	inputAge = createInput();
	inputSex = createInput();
	inputInsPlaying = createInput();
	inputIns = createInput();
	inputYearsPlaying = createInput();

	buttonID = createButton('SUBMIT PERSONAL INFORMATION');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(changeMode);

	points = int(random(1000, 10000));

}

function draw() {
	createCanvas(windowWidth, windowHeight);

	if (change === false) {
		background(250, 0, 0, 30);
		//INPUTS
		posInputY = [];
		posInputX = windowWidth / 2;

		for (i = 0; i < 6; i++) {
			posInputY[i] = windowHeight / 4 + i * windowHeight / 20;
			//print(posInputY[i])
		}
		inputName.position(posInputX, posInputY[0]);
		inputAge.position(posInputX, posInputY[1]);
		inputSex.position(posInputX, posInputY[2]);
		inputInsPlaying.position(posInputX, posInputY[3]);
		inputIns.position(posInputX, posInputY[4]);
		inputYearsPlaying.position(posInputX, posInputY[5]);

		posText = posInputX - windowWidth / 60;
		textSize(windowWidth / 70);
		textFont("Courier");
		textAlign(CENTER, TOP);
		text("Hi! Before starting, please provide the following information:", posText, posInputY[0] - windowHeight / 10);

		textSize(windowWidth / 100);
		textAlign(RIGHT, TOP);

		text("name", posText, posInputY[0]);
		text("age", posText, posInputY[1]);
		text("sex (male, female)", posText, posInputY[2]);
		text("do you play an instrument? (yes or no)", posText, posInputY[3]);
		text("what instrument?", posText, posInputY[4]);
		text("if yes, how many years have you been playing for?", posText, posInputY[5]);
	} else {
		if (clicks === 22) {
			background(0, 255, 0, 50);
			var eraseButtonFin = buttonOld.remove();

			fill(0);
			textSize(windowWidth / 40);
			textFont("Courier");
			textAlign(CENTER, TOP);
			text("Well done! That was amazing. You got ", windowWidth / 2, windowHeight / 2);

			var finalText = points + " points";
			text(finalText, windowWidth / 2, windowHeight / 1.5);

		} else {
			background(255);
			display(clicks);
			//EXPLANATION
			var posText = windowWidth / 4;
			var posTextI = windowWidth / 2;
			var posTextY = windowHeight / 10;
			var posTextZ = posTextY + windowHeight / 10;

			fill(100);
			textSize(windowHeight / 30);
			textFont("Courier");
			textAlign(CENTER);
			text("INSTRUCTIONS", posTextI, posTextY);

			textSize(windowHeight / 45);
			textAlign(LEFT);
			text("1. Click on PLAY SOUNDS and listen to the pair of sounds - they can be repeated.\n2. Click on one of the NUMBERS to rate the degree of similitude \n between both sounds 1 very different and 5 very similar.\n3. Click on SUBMIT YOUR ANSWER. ", posText, posTextZ);

			//PLAY BUTTON
			sideX = windowWidth / 5;
			sideY = windowHeight / 5;
			co = 2.55;
			topLeft = windowWidth / co;
			topRight = windowHeight / co - sideY / co;
			fill(255, 255, 0, 50);
			rect(topLeft, topRight, sideX, sideY, 40);
			fill(0);
			textSize(windowHeight / 25);
			textFont("Courier");
			textAlign(CENTER, CENTER);
			text("PLAY\nSOUNDS", topLeft + sideX / 2, topRight + sideY / 1.85);

			//NUMBERS TO RATE
			sideNumbers = windowHeight / 7;
			var co3 = 1.4;
			var topLeftNumbers = windowWidth / co3 - sideNumbers / co3;
			var posNumbersY = windowHeight / 1.4;
			var posRectY = windowHeight / 1.56;
			var nor = 1.8;
			for (i = 1; i < 6; i++) {
				posRect[i] = i * (windowWidth / 3.7) / nor;
				fill(0, 250, 0, transp[i]);
				rect(posRect[i], posRectY, sideNumbers, sideNumbers, 20);
				fill(0);
				textSize(windowHeight / 20);
				textFont("Courier");
				textAlign(CENTER);
				text(i, posRect[i] + sideNumbers / 2, posNumbersY);
			}
			var textY = posNumbersY * 1.15;
			var textInd1 = "very different";
			var textInd5 = "very similar";
			textSize(windowHeight / 40);
			text(textInd1, posRect[1] + sideNumbers / 2, textY);
			text(textInd5, posRect[5] + sideNumbers / 2, textY);
		}
	}
}

function display() {
	var stringText = "Pair number ";
	var stringNumber = stringText + clicks;
	fill(50);
	textAlign(RIGHT, CENTER);
	textSize(windowWidth / 90);
	text(stringNumber, windowWidth - 50, windowHeight / 2.5);
}

function delay(ms) {
	var cur_d = new Date();
	var cur_ticks = cur_d.getTime();
	var ms_passed = 0;
	while (ms_passed < ms) {
		var d = new Date(); // Possible memory leak?
		var ticks = d.getTime();
		ms_passed = ticks - cur_ticks;
		// d = null; // Prevent memory leak?
	}

}

//RANDOMISE
function mousePressed() {
	sideX = windowWidth / 5;
	sideY = windowHeight / 5;
	co = 2.5;
	topLeft = windowWidth / co;
	topRight = windowHeight / co - sideY / co;

	if (change === true && mouseX > topLeft && mouseX < topLeft + sideX && mouseY > topRight && mouseY < topRight + sideY) {
		//print(index);
		samplePresetAudio[index].play();
		//print(index2);
		delay(2000);
		samplePresetAudio[index2].play();

		play = true;
	}

	sideNumbers = windowHeight / 7;
	var co3 = 1.4;
	var topLeftNumbers = windowWidth / co3 - sideNumbers / co3;
	var posNumbersY = windowHeight / 1.4;
	var posRectY = windowHeight / 1.56;
	var nor = 1.8;
	posRect[i] = i * (windowWidth / 3.7) / nor;

	for (i = 1; i < 6; i++) {
		posRect[i] = i * (windowWidth / 3.7) / nor;
		if (play === true && mouseX > posRect[i] && mouseX < posRect[i] + sideNumbers && mouseY > posRectY && mouseY < posRectY + sideNumbers) {
			//print(posRect[i]);
			value = i;
			//print(value);
			transp[1] = 10
			transp[2] = 10;
			transp[3] = 10;
			transp[4] = 10;
			transp[5] = 10;
			transp[i] = 150;
			buttons = true;
		}
	}
}

function saveAndNext() {

	if (change === true && buttons === true) {
		//need to write to save in a CSV
		newRow = table.addRow();
		newRow.setString('Name', N); // change this for name of student
		newRow.setString('Age', A);
		newRow.setString('Sex', S);
		newRow.setString('Instrument', IP);
		newRow.setString('Ins', I);
		newRow.setNum('Years', IY);

		newRow.setString('Pair_number', clicks);
		newRow.setString('Audio1', index);
		newRow.setString('Audio2', index2);
		newRow.setNum('Answer', value);

		// Check table
		tableArray = table.getArray();
		for (var i = 0; i < tableArray.length; i++) {
			//print(tableArray[i]);
		}

		randomNum = int(random(listAudioCombs1.length));
		index = listAudioCombs1[randomNum];
		index2 = listAudioCombs2[randomNum];

		transp[1] = 10;
		transp[2] = 10;
		transp[3] = 10;
		transp[4] = 10;
		transp[5] = 10;

		if (clicks == 2) {
			//save(tableArray, 'my.txt');
			//save(table, 'final.csv');
			file = new File('kk5', '.txt');
			file.open('w');
			file.write(table);
			file.close();
		}

		clicks = clicks + 1;
	}
	play = false;
	buttons = false;
	completed = false;
}

function windowResized() {
	//SUBMIT BUTTON
	if (change === true) {
		var eraseButton = buttonOld.remove();
		var posRectY = windowHeight / 1.45;
		var nor = 1.8;
		posRectX = 3 * (windowWidth / 3.7) / nor;
		buttonNew = createButton('SUBMIT YOUR ANSWER');
		buttonNew.style('width', '100px', '100px');
		buttonNew.position(posRectX, posRectY + windowHeight / 5);
		buttonNew.mousePressed(saveAndNext);
		buttonOld = buttonNew;
	} else {
		var eraseButton2 = buttonID.remove();
		posInputY = [];
		posInputX = windowWidth / 2;
		buttonIDNew = createButton('SUBMIT PERSONAL INFORMATION');
		buttonIDNew.style('width', '100px', '300px');
		buttonIDNew.position(posInputX + 20, windowHeight / 1.8);
		buttonIDNew.mousePressed(changeMode);
		buttonID = buttonIDNew;
	}

}

function exportcsv() { 
	saveTable(table, nameFile);
}

function changeMode() {

	N = inputName.value();
	A = inputAge.value();
	S = inputSex.value();
	IP = inputInsPlaying.value();
	I = inputIns.value();
	IY = inputYearsPlaying.value();

	if (N !== '' && A !== '' && S !== '' && IP !== '' && I !== '' && IY !== '') {
		change = true;

		nameFile = A + N;

		newRow = table.addRow();
		newRow.setString('Name', N.toLowerCase()); // change this for name of student
		newRow.setNum('Age', A.toString());
		newRow.setString('Sex', S.toLowerCase());
		newRow.setString('Instrument', IP.toLowerCase());
		newRow.setString('Ins', I.toLowerCase());
		newRow.setNum('Years', IY.toString());

		exportcsv();
		//print(table);

		tableArray = table.getArray();
		for (var i = 0; i < tableArray.length; i++) {
			print(tableArray[i]);
		}

		//ERASE BUTTON AND INPUTS
		var eraseButtonID = buttonID.remove();
		var eraseName = inputName.remove();
		var eraseAge = inputAge.remove();
		var eraseSex = inputSex.remove();
		var eraseInstrument = inputInsPlaying.remove();
		var eraseIns = inputIns.remove();
		var eraseYears = inputYearsPlaying.remove();

		//SUBMIT BUTTON
		var posRectY = windowHeight / 1.45;
		var nor = 1.8;
		posRectX = 3 * (windowWidth / 3.7) / nor;

		buttonOld = createButton('SUBMIT YOUR ANSWER');
		buttonOld.style('width', '100px', '100px');
		buttonOld.position(posRectX, posRectY + windowHeight / 5);
		buttonOld.mousePressed(saveAndNext);

		//CLICKS
		display(clicks);
	}

}

```

Thanks heaps in advance!  
Pablo.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 20, 2018, 4:09am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/8 "2018-07-20T04:09:36Z")

</div>

Pablo, from your previous example, you need to check the reference and check that you are using the calls properly. You have a table with two columns: number and name. However, in `addBicho()` you are adding columns (?). You might want to do this instead:

```auto
for (i = 0; i < 10; i++) {
                table.set(i,"number",i*10);
                table.set(i,"name","username_"+i0);
        }

```

I did not test this code as I am not setup in js and I have to load p5.dom as well. For the time being, just work in this small code and make it work before you move to your bigger source code. Keep the reference close by: [https://p5js.org/reference/#/p5.Table](https://p5js.org/reference/#/p5.Table) and try understanding their examples.

Kf

---

<div class="post-metadata">

**Author:** ![ruski15](https://avatars.discourse-cdn.com/v4/letter/r/e79b87/32.png) [@ruski15](https://discourse.processing.org/u/ruski15)\
**Post date:** [July 20, 2018, 4:50am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/9 "2018-07-20T04:50:32Z")

</div>

Hi Kf,

Thanks a lot for your help. I’ve added your piece of code but it is still not **saving the table** (last function), which is the main issue. Any thoughts?

Thanks a lot,  
P.

```auto
var table;
var buttonB;
var newRow;

function setup() {
	table = new p5.Table();
	table.addColumn('number');
	table.addColumn('name');

	buttonID = createButton('SUBMIT');
	buttonID.style('width', '100px', '300px');
	buttonID.position(windowWidth / 2 + 20, windowHeight / 1.8);
	buttonID.mousePressed(addBicho);

	//printTable();

}

function draw() {

}

function addBicho() {

	var newRow = table.addRow();
	for (i = 0; i < 10; i++) {
		newRow.set("number", i * 10);
		newRow.set("name", "username_" + 10);
	}
	
	printTable();
}

function printTable() {
	saveTable(table, 'bichos.csv');
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 20, 2018, 5:20am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/10 "2018-07-20T05:20:22Z")

</div>

[https://p5js.org/reference/#/p5/saveTable](https://p5js.org/reference/#/p5/saveTable)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 20, 2018, 6:12am UTC](https://discourse.processing.org/t/i-need-two-songs-to-sound-after-the-other/1274/11 "2018-07-20T06:12:23Z")

</div>

Check this code [here](http://p5js.sketchpad.cc/sp/pad/view/8sHFEVV3D3/latest). I removed any dependence on the DOM for this test. Click on the canvas, it will print the table in the standard output (Open you dev tools \>\> console in your fav browser) . It should also ask you if you want to save the file as well. Tested on firefox.

Kf

```auto
var table;
var newRow;

function setup() {
  createCanvas(300, 500);
  table = new p5.Table();
  table.addColumn('number');
  table.addColumn('name');
}
function draw() {
}

function mousePressed() {    
  console.log("addbicho");

  for (i = 0; i < 10; i++) {
    var newRow = table.addRow();
    newRow.set("number", i * 10);
    newRow.set("name", "username_" + 10);
  }

  printTable();
}
function printTable() {

  //print the results

  for (r = 0; r < table.getRowCount(); r++)
    for (var c = 0; c < table.getColumnCount(); c++) {
      print(table.getString(r, c));
    }

  saveTable(table, 'bichos.csv');
}

```