Line Chart mit Audiobeispielen

1.  Im Header das Plotly-Script (plotly-latest.min.js) und die Array-Definitionen (lukeme_array.js) einbinden:

<script src="header/plotly-latest.min.js"></script>
<script src="header/lukeme_array.js"></script>

2. Im Body einen Bereich festlegen, in dem die Daten visualisiert werden:

<div id="AnzeigeDiv" style="width:800,height:400"></div>

3. Script-Teil starten, in dem die Traces mit den Datenwerten zusammengestellt werden

<script>
var trace1 = {
x: pitch_array,
y: inharmonicity_array,
mode: 'markers',
type: 'scatter' ,
name: 'Inharmonizität',
text: pitch_array,
};

var trace2 = {
x: pitch_array,
y: brightness_array,
mode: 'lines',
type: 'scatter',
name: 'Helligkeit',
text: pitch_array,
};

var trace3 = {
x: pitch_array,
y: tonalEnergy_array,
mode: 'lines+markers',
type: 'scatter',
name: 'Klanghaltigkeit',
text: pitch_array,
};

4. Alle Traces im Array data zusammenführen:

var data = [ trace1, trace2, trace3];

5. Layout bestimmen:

var layout = {
showlegend: true,
xaxis: {
title: 'Grundfrequenzen',
},
yaxis: {
title: 'Anteil',
},
legend: {
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
},
title: 'Inharmonizität, Helligkeit und Klanghaltigkeit der Lukeme',
};

6. Daten und Layout zusammenführen, im oben definierten Bereich ausplotten und Script-Teil beenden:

Plotly.newPlot('AnzeigeDiv', data, layout);
</script>

 

Verknüpfung der dargestellten Werte mit Audiobeispielen

Will man die Werte mit ihren Audiodateien verbinden (z.B. die Klänge der Lukeme), so legt man alle Audio-Dateien in einen Ordner (z.B. "klang"), welcher wiederum am gleichen Ort liegt wie die jeweilige html-Datei. In der Datei legt man gleich nach dem <body>-Tag einen unsichtbaren Audioplayer an und gibt ihm einen namen (z.B. "myaudio"):

<audio id="myaudio">.</audio>

 

Danach legt man in den <head>-Bereich zwei Funktionen an, die das Starten und Stoppen des Audio-Players regeln sollen, und denen man später via (id) die jeweilige Audiodatei übergibt:

<script>
function playAudio(id) {
audioPath = "klang/"+id+".mp3";
myPlayer = document.getElementById('myaudio');
myPlayer.src = audioPath;
myPlayer.play();
}

function stopAudio() {
myPlayer = document.getElementById('myaudio');
myPlayer.pause();
}
</script>

 

Danach ermittelt man mit folgender Funktion am Ende des Scripts, welcher Wert (indexNumber) aus welchem Trace (indexTrace) bei einem Mouse-Over (plotly_hover) vorliegt und spricht dann über das Dateinamen-Array (file_array aus lukeme_array.js) den jeweiligen Dateinamen an und für ein Mouse-Out (plotly_unhover) ruft man danach die Stopfunktion des Players auf:

myPlot = document.getElementById('AnzeigeDiv');
myPlot.on('plotly_hover', function(data){
var infotext = data.points.map(function(d){
indexTrace = d.curveNumber;
indexNummer = d.pointNumber;
});
playAudio(file_array[indexNummer]);
})
.on('plotly_unhover', function(data){
stopAudio();
});

Diese Funktion lässt sich universell auch für die meisten anderen Plotly-Visualisierungen verwenden.