alancpazetto/tone.html

## tone.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<a href="javascript:void(0);" class="start" onclick="start()">start</a>
<br>
<a href="javascript:void(0);" class="stop" onclick="stop();">stop</a>

<script>

const audioContext = new AudioContext();
let oscilator = null;

/*
C0	        16.35
C#0/Db0 	17.32
D0	        18.35
D#0/Eb0 	19.45
E0	        20.60
F0	        21.83
F#0/Gb0 	23.12
G0	        24.50
G#0/Ab0 	25.96
A0	        27.50
A#0/Bb0 	29.14
B0	        30.87
*/

// const initFreq = new Map([
//     ['C', 16.35],
//     ['C#', 17.32],
//     ['D', 18.35],
//     ['D#', 19.45],
//     ['E', 20.60],
//     ['F', 21.83],
//     ['F#', 23.12],
//     ['G', 24.50],
//     ['G#', 25.96],
//     ['A', 27.50],
//     ['A#', 29.14],
//     ['B', 30.87],
// ]);

const initFreq = {
    'C': 16.35,
    'C#': 17.32,
    'D': 18.35,
    'D#': 19.45,
    'E': 20.60,
    'F': 21.83,
    'F#': 23.12,
    'G': 24.50,
    'G#': 25.96,
    'A': 27.50,
    'A#': 29.14,
    'B': 30.87
};
const keys = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];

let arrFreq = [];
for(let i = 0; i < 8; i++){
    let aux = {};
    keys.forEach((val) => {

        let auxValue = initFreq[val];

        for(let j = 1; j <= i; j++){
            auxValue += auxValue;
        }

        const index = `${val}${i}`;
        arrFreq[index] = auxValue;
        // aux[val] = auxValue;

    });

    // arrFreq.push(aux);
}

console.log(arrFreq);

function playNote(time, note, cb, index) {

    note = note.toUpperCase();

    if (oscilator) {
        oscilator.stop();
    }

    oscilator = audioContext.createOscillator();
    oscilator.connect(audioContext.destination);

    oscilator.type = 'sine';
    oscilator.frequency.value = arrFreq[note];
    oscilator.start();

    setTimeout(cb, time, index);

}

function playMusic(index, music) {
    index = index || 0;
    if( !music[index] ){
        playMusic(0, music);
        return false;
    }
    playNote(music[index].time, music[index].note, (index) => {
        index++;
        playMusic(index, music);
    }, index);
}

const myMusic = [
    { time: 100, note: 'C4' },
    { time: 200, note: 'D4' },
    { time: 100, note: 'E4' },
    { time: 200, note: 'F4' },
    { time: 100, note: 'G4' },
    { time: 1000, note: 'A4' },
    { time: 100, note: 'B4' },
    { time: 100, note: 'C5' },
    { time: 100, note: 'D5' },
    { time: 100, note: 'E5' },
    { time: 100, note: 'F5' },
    { time: 100, note: 'G5' },
    { time: 100, note: 'A5' },
    { time: 100, note: 'B5' },
];
playMusic(0, myMusic, true);

function start(){

    if (oscilator) {
        oscilator.stop();
    }

    oscilator = audioContext.createOscillator();
    oscilator.connect(audioContext.destination);

    oscilator.type = 'sine';
    oscilator.frequency.value = 440;
    oscilator.start();

}

function stop(){
    oscilator.stop();
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>

	<a href="javascript:void(0);" class="start" onclick="start()">start</a>
	<br>
	<a href="javascript:void(0);" class="stop" onclick="stop();">stop</a>

	<script>

	const audioContext = new AudioContext();
	let oscilator = null;

	/*
	C0 16.35
	C#0/Db0 17.32
	D0 18.35
	D#0/Eb0 19.45
	E0 20.60
	F0 21.83
	F#0/Gb0 23.12
	G0 24.50
	G#0/Ab0 25.96
	A0 27.50
	A#0/Bb0 29.14
	B0 30.87
	*/

	// const initFreq = new Map([
	// ['C', 16.35],
	// ['C#', 17.32],
	// ['D', 18.35],
	// ['D#', 19.45],
	// ['E', 20.60],
	// ['F', 21.83],
	// ['F#', 23.12],
	// ['G', 24.50],
	// ['G#', 25.96],
	// ['A', 27.50],
	// ['A#', 29.14],
	// ['B', 30.87],
	// ]);

	const initFreq = {
	'C': 16.35,
	'C#': 17.32,
	'D': 18.35,
	'D#': 19.45,
	'E': 20.60,
	'F': 21.83,
	'F#': 23.12,
	'G': 24.50,
	'G#': 25.96,
	'A': 27.50,
	'A#': 29.14,
	'B': 30.87
	};
	const keys = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];

	let arrFreq = [];
	for(let i = 0; i < 8; i++){
	let aux = {};
	keys.forEach((val) => {

	let auxValue = initFreq[val];

	for(let j = 1; j <= i; j++){
	auxValue += auxValue;
	}

	const index = `${val}${i}`;
	arrFreq[index] = auxValue;
	// aux[val] = auxValue;

	});

	// arrFreq.push(aux);
	}

	console.log(arrFreq);

	function playNote(time, note, cb, index) {

	note = note.toUpperCase();

	if (oscilator) {
	oscilator.stop();
	}

	oscilator = audioContext.createOscillator();
	oscilator.connect(audioContext.destination);

	oscilator.type = 'sine';
	oscilator.frequency.value = arrFreq[note];
	oscilator.start();

	setTimeout(cb, time, index);

	}

	function playMusic(index, music) {
	index = index \|\| 0;
	if( !music[index] ){
	playMusic(0, music);
	return false;
	}
	playNote(music[index].time, music[index].note, (index) => {
	index++;
	playMusic(index, music);
	}, index);
	}

	const myMusic = [
	{ time: 100, note: 'C4' },
	{ time: 200, note: 'D4' },
	{ time: 100, note: 'E4' },
	{ time: 200, note: 'F4' },
	{ time: 100, note: 'G4' },
	{ time: 1000, note: 'A4' },
	{ time: 100, note: 'B4' },
	{ time: 100, note: 'C5' },
	{ time: 100, note: 'D5' },
	{ time: 100, note: 'E5' },
	{ time: 100, note: 'F5' },
	{ time: 100, note: 'G5' },
	{ time: 100, note: 'A5' },
	{ time: 100, note: 'B5' },
	];
	playMusic(0, myMusic, true);

	function start(){

	if (oscilator) {
	oscilator.stop();
	}

	oscilator = audioContext.createOscillator();
	oscilator.connect(audioContext.destination);

	oscilator.type = 'sine';
	oscilator.frequency.value = 440;
	oscilator.start();

	}

	function stop(){
	oscilator.stop();
	}

	</script>

	</body>
	</html>