Highcharts WebAudio test

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

<div id="buttonContainer">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="clear">Clear</button>
</div>

CSS

#container {
    min-width: 300px;
    max-width: 900px;
    height: 550px;
    margin: 1em auto;
}

#buttonContainer {
    text-align: center;
}

JavaScript

// Bubble size is duration
// Bubble color is waveform type

var speed = 120, // Delay between notes in milliseconds
    // Map wave frequencies to musical notes (roughly)
    scale = [
        65, // C2
        69, // C#
        73, // D
        77, // Eb
        82, // E
        87, // F
        92, // F#
        98, // G
        103, // G#
        110, // A
        116, // Bb
        123, // B
        131, // C3
        138, // C#
        146, // D
        155, // Eb
        164, // E
        174, // F
        185, // F#
        196, // G
        207, // G#
        220, // A
        233, // Bb
        246, // B
        261, // C4
        277, // C#
        293, // D
        311, // Eb
        329, // E
        349, // F
        369, // F#
        392, // G
        415, // G#
        440, // A
        466, // Bb
        493, // B
        523, // C5
        554, // C#
        587, // D
        622, // Eb
        659, // E
        698, // F
        739, // F#
        783, // G
        830, // G#
        880, // A
        932, // Bb
        987, // B
        1046, // C6
        1108, // C# 
        1174, // D
        1244, // Eb
        1318, // E
        1396, // F
        1479, // F#
        1567, // G
        1661, // G#
        1760, // A
        1864, // Bb
        1975, // B
        2093, // C7
        2217, // C#
        2349 // D
    ],
    waveTypes = [{
    	type: 'sine',
        color: 'rgba(201, 224, 245, 0.6)',
    }, {
    	type: 'square',
        color: 'rgba(178, 222, 245, 0.6)',
    }, {
    	type: 'triangle',
        color: 'rgba(194, 222, 216, 0.6)',
    }, {
    	type: 'sawtooth',
        color: 'rgba(232, 219, 198, 0.6)',
    }],
    pause = true,
    audioContext = new (window.AudioContext || window.webkitAudioContext)(),
    prevFreq = 15,
	chart = Highcharts.chart('container', {
        title: {
            text: 'Highcharts crystals'
        },

        subtitle: {
            text: 'Web Audio API test'            
        },

       ...