Pop Ballad Generator

Using a popular chord progression and a RNG

by John Satriano

HTML

<h1> Pop Ballad Generator!</h1>

<br>
    <p>This is an experimental music generator I made in my spare time. It follows a very common chord progression, (I,V,vi,IV), and generates random notes within the key and up to a certain range of octaves. Let me know what you think! [email protected]</p>

<p>
  <a href="http://jsat.io/blog/2015/03/26/pop-ballad-generator/">Blog post about how this was made!</a>
</p>
<br>
<p>Future work: New chord progressions, octave ranges below base key, time signatures, pauses/unslurred notes</p>
<br>
<p>Control the madness here:</p>

CSS

h1 {
    font-size:50px;
    text-align:center
}
p {
    margin:0px 5%; padding:0px;
	text-align:center;  
}
.button, .button_end {
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    margin-left:auto;
    margin-right:auto;
}
.button:hover {
    background-color:#5cbf2a;
}
.button:active, .button_end:active{
    position:relative;
    top:1px;
}
.button_end {
	background-color:#c74557;
	border:1px solid #eb1212;
	text-shadow:0px 1px 0px #e6688c;
}
.button_end:hover {
	background-color:#ff0022;
}

.buttonDiv {
    text-align: center;
}
.ddDiv {
    text-align: center;
}
.selector {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    background: #fff;
    cursor: pointer;
    border: 1px solid #f6f0e4;
}

JavaScript

var keys = {
    "C": 16.35,
        "C#/Db": 17.32,
        "D": 18.35,
        "D#/Eb": 19.45,
        "E": 20.6,
        "F": 21.83,
        "F#/Gb": 23.12,
        "G": 24.5,
        "G#/Ab": 25.96,
        "A": 27.5,
        "A#/Bb": 29.14,
        "B": 30.87,
}
//this used to work differently. I am lazy.
var waveforms = {
    "sine": "sine",
        "square": "square",
        "sawtooth": "sawtooth",
        "triangle": "triangle",
}

//Configurations
var octave = 3;
var key = keys["A"];
var base;
//used with calculating notes
var a = Math.pow(2, 1 / 12);
var range = 16
var waveform = waveforms["sawtooth"];
var chordType;
var melodyType;
var context;
var notesPerMeasure = 4;
var qtrNote = 600;
var eigthNote = qtrNote / 2;
var minNote = eigthNote;
var time;
var melodyInt;
var chor1, chor2, chor3, melody, chordGain, melodyGain;
var isRunning = false;

//All browsers, hooray
try {
  context = new AudioContext();
} catch (err) {
  context = new webkitAudioContext();
}

//volume
chordGain = context.createGain();
melodyGain = context.createGain();
chordGain.gain.value = 0.05;
melodyGain.gain.value = 0.1;

//End Configurations

init = function () {

    updateBase();
    updateWaveformType();
    buildScale();

    //hook everything up
    chor1 = context.createOscillator();
    chor2 = context.createOscillator();
    chor3 = context.createOscillator();
    melody = context.createOscillator();

    chor1.connect(chordGain);
    chor2.connect(chordGain);
    chor3.connect(chordGain);
    melody.connect(melodyGain);
    chordGain.connect(context.destination);
    melodyGain.connect(context.destination);

    //Set type of wave for chord
    chor1.type = chordType;
    chor2.type = chordType;
    chor3.type = chordType;

    //Set type of wave for melody
    melody.type = melodyType;

    melody.frequency.value = base;
    chor1.frequency.value = notes[chordProg[0][0]];
    chor2.frequency.value = notes[chordProg[0][1]];
    chor3.frequency.value =...