Sonification

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/8.0.1/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.1/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.1/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.1/modules/sonification.js"></script>
<script src="https://code.highcharts.com/8.0.1/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This chart demonstrates how you can play charts as sound,
        enabling large data sets to be visualized without the need
        for sight. This technique is referred to as Sonification,
        and has many uses, including increased accessibility for
        visually impaired users.
    </p>
</figure>

<div id="controls" style="">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="rewind">Rewind</button>
    <input type="range" id="speed" name="Speed" 
         min="0.5" max="2" value="1" step="0.05">
    <label for="speed">Speed</label>
</div>

<pre id="csv_data"...

CSS

#container {
	height: 500px;
}

#controls {
    margin: 0 auto;
    text-align: center;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 320px; 
	max-width: 900px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

// Sonification options
var sdInstruments = [{
        instrument: 'sineMajor',
        instrumentMapping: {
            duration: 200,
            frequency: 'y',
            volume: 0.7,
            pan: -1
        },
        instrumentOptions: {
            minFrequency: 220,
            maxFrequency: 1900
        }
    }],
    nyInstruments = [{
        instrument: 'triangleMajor',
        instrumentMapping: {
            duration: 200,
            frequency: 'y',
            volume: 0.6,
            pan: 1
        },
        instrumentOptions: {
            minFrequency: 220,
            maxFrequency: 1900
        }
    }];

// Point of interest options
var poiTime = Date.UTC(2018, 4, 6),
    poiEarcon = {
        // Define the earcon we want to play for the point of interest
        earcon: new Highcharts.sonification.Earcon({
            instruments: [{
                instrument: 'squareMajor',
                playOptions: {
                    // Play a quick rising frequency
                    frequency: function (time) {
                        return time * 1760 + 440;
                    },
                    volume: 0.1,
                    duration: 200
                }
            }]
        }),
        // Play this earcon if we hit the point of interest
        condition: function (point) {
            return point.x === poiTime;
        }
    };

// Create the chart
var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Play chart as sound'
    },
    subtitle: {
        text: 'Weekly temperature averages'
    },
    yAxis: {
        title: {
            text: 'Temperature (°F)'
        }
    },
    xAxis: {
        type: 'datetime',
        plotLines: [{
            value: poiTime,
            dashStyle: 'dash',
            width: 1,
            color: '#d33'
        }]
    },
    tooltip: {
        split: true,
        valueDecimals: 0,
        valueSuffix: '°F'
    },
   ...