Christoph Reuter: Meyda

Meyda mit Plotly zu verbinden ist ein wenig komplizierter, da man die erhobenen Werte erst in einem Text zwischenspeichern muss, aber es funktioniert auch in 7 Schritten:

Zunächst werden im <head> der Seite die Meyda- und Plotly-Javascript-Bibliotheken eingebettet:

Dann wird im <head> der Seite ein Script zur Steuerung des Audioplayers angelegt:

function stopAudio() { // Funktion zum Stoppen des Audioplayers
var meinplayer = document.getElementById('audio'); // finde über
// getElementById() den Audioplayer mit der id "audio" und übergebe ihn an die Variable meinPlayer.
meinplayer.pause(); // pausiere den Player
meinplayer.currentTime = 0; // setze ihn auf den Anfang des Stücks
}
</script>

Im <body> der Seite wird der Player angelegt sowie die Auslöser zum Starten und Stoppen des Players:

Unter dem Audioplayer wird innerhalb eines <DIV>-Tag ein Bereich (hier mit der id "AnzeigeDiv") festgelegt, in dem die Audiodaten visualisiert werden sollen:

Darunter wird das Script für die Analyse eingebaut.
<script defer> bedeutet, dass das Script nicht seriell im Seitenaufbau eingebaut ist, sondern parallel zu den anderen Scripten und Funktionen auf der Seite passiert:

if (typeof Meyda === "undefined") { // falls die Meyda-Library nicht erkannt wird:
alert("Meyda konnte nicht gefunden werden, wurde die Library nicht eingebunden?"); // gebe eine Fehlermeldung aus
} else { // in allen anderen Fällen:
const analyzer = Meyda.createMeydaAnalyzer({ // erstelle einen Analyzer mit
// folgenden Eigenschaften:
"audioContext": audioContext, // audioContext, auf den sich der Analyzer bezieht
"source": source, // Quelle auf die sich der Analyzer bezieht (= der Audioplayer)
"bufferSize": 512, // Buffergröße
"featureExtractors": ["rms", "spectralCentroid", "zcr", "spectralFlatness", "energy", "spectralSlope", "spectralRolloff", "spectralSpread", "spectralSkewness", "spectralKurtosis", "perceptualSpread", "perceptualSharpness"], // Array (Liste) von zu analysierenden
// Eigenschaften
"callback": features => { // Ausgabe der ermittelten Features
if (features.rms!=0){ // sobald die gemessene Energie ungleich 0 ist = das Audio spielt
document.getElementById("levelNumber").innerHTML = document.getElementById("levelNumber").innerHTML + " " + Math.round(features.rms * 1000)/1000; // Füge zur Ausgabe der RMS-Amplitude den
// nächsten Wert hinzu und runde ihn auf 3 Stellen
document.getElementById("centroidNumber").innerHTML = document.getElementById("centroidNumber").innerHTML + " " + Math.round(features.spectralCentroid*csfaktor); // Füge zur Ausgabe des Spectral
// Centroids den nächsten Wert hinzu (multipliziert mit dem oben errechneten cf-Faktor und
// gerundet)
document.getElementById("zcrNumber").innerHTML = document.getElementById("zcrNumber").innerHTML + " " + Math.round(features.zcr * 1000)/1000; // Füge zur Ausgabe der Zero Crossing Rate
// den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("spectralFlatnessNumber").innerHTML = document.getElementById("spectralFlatnessNumber").innerHTML + " " + Math.round(features.spectralFlatness * 1000)/1000; // Füge zur Ausgabe der
// Spectral Flatness den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("energyNumber").innerHTML = document.getElementById("energyNumber").innerHTML + " " + Math.round(features.energy * 1000)/1000; // Füge zur Ausgabe der Energy den
// nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("spectralSlopeNumber").innerHTML = document.getElementById("spectralSlopeNumber").innerHTML + " " + Math.round(features.spectralSlope * 1000000000)/1000000000; // Füge zur
// Ausgabe der Spectral Slope den nächsten Wert hinzu und runde ihn auf 10 Stellen.
document.getElementById("spectralRolloffNumber").innerHTML = document.getElementById("spectralRolloffNumber").innerHTML + " " + Math.round(features.spectralRolloff * 1000)/1000; // Füge zur
// Ausgabe des Spectral Rolloffs den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("spectralSpreadNumber").innerHTML = document.getElementById("spectralSpreadNumber").innerHTML + " " + Math.round(features.spectralSpread * 1)/1; // Füge zur Ausgabe des Spectral Spreads
// den nächsten Wert hinzu.
document.getElementById("spectralSkewnessNumber").innerHTML = document.getElementById("spectralSkewnessNumber").innerHTML + " " + Math.round(features.spectralSkewness * 1000)/1000; // Füge zur
// Ausgabe der Spectral Skewness den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("spectralKurtosisNumber").innerHTML = document.getElementById("spectralKurtosisNumber").innerHTML + " " + Math.round(features.spectralKurtosis * 1000)/1000; // Füge zur Ausgabe der
// Spectral Kurtosis den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("perceptualSpreadNumber").innerHTML = document.getElementById("perceptualSpreadNumber").innerHTML + " " + Math.round(features.perceptualSpread * 1000)/1000; // Füge zur Ausgabe des
// Perceptual Spreads den nächsten Wert hinzu und runde ihn auf 3 Stellen.
document.getElementById("perceptualSharpnessNumber").innerHTML = document.getElementById("perceptualSharpnessNumber").innerHTML + " " + Math.round(features.perceptualSharpness * 1000)/1000; // Füge zur Ausgabe der Perceptual Sharpness den nächsten Wert hinzu und runde ihn auf 3 Stellen.
}
}
});
analyzer.start(); // starte den Analyzer
}
</script>

Wenn der Player endet oder pausiert soll die Kurve gezeichnet werden. Dies geschieht in der Funktion kurvezeichnen(), die durch die Trigger .onended und .onpause ausgelöst wird:

var meinplayer = document.getElementById('audio'); // finde über
// getElementById() den Audioplayer mit der id "audio" und übergebe ihn an die Variable meinplayer.
meinplayer.onended = function() { // wenn der Audioplayer stoppt, dann
kurvezeichnen(); // rufe die Funktion kurvezeichnen() auf
};
meinplayer.onpause = function() { // wenn der Audioplayer pausiert, dann
kurvezeichnen(); // rufe die Funktion kurvezeichnen() auf
};

function kurvezeichnen(){
zeit=[]; // erstelle ein leeres Array für die Zeitachse (Anzahl der Elemente)
rms=document.getElementById("levelNumber").innerHTML; // übergebe den Inhalt
// des Felds "levelNumber" in die Variable rms
rms_array=rms.split(" "); // erzeuge ein Array daraus, indem der Text nach allen
// Leerzeichen in seine einzelen Elemente aufgeteilt wird.
sc=document.getElementById("centroidNumber").innerHTML; // übergebe den Inhalt
// des Felds "centroidNumber" in die Variable sc
spectralcentroid_array=sc.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
zcr=document.getElementById("zcrNumber").innerHTML; // übergebe den Inhalt
// des Felds "zcrNumber" in die Variable zcr
zeroCrossingRate_array=zcr.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
sf=document.getElementById("spectralFlatnessNumber").innerHTML; // übergebe
// den Inhalt des Felds "spectralFlatnessNumber" in die Variable sf
spectralFlatness_array=sf.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
en=document.getElementById("energyNumber").innerHTML; // übergebe den Inhalt
// des Felds "energyNumber" in die Variable en
energy_array=en.split(" "); // erzeuge ein Array daraus, indem der Text nach allen
// Leerzeichen in seine einzelen Elemente aufgeteilt wird.
sl=document.getElementById("spectralSlopeNumber").innerHTML; // übergebe
// den Inhalt des Felds "spectralSlopeNumber" in die Variable sl
spectralSlope_array=sl.split(" "); // erzeuge ein Array daraus, indem der Text nach
// allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
sr=document.getElementById("spectralRolloffNumber").innerHTML; // übergebe
// den Inhalt des Felds "spectralRolloffNumber" in die Variable sr
spectralRolloff_array=sr.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
ss=document.getElementById("spectralSpreadNumber").innerHTML; // übergebe
// den Inhalt des Felds "spectralSpreadNumber" in die Variable ss
spectralSpread_array=ss.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
ssk=document.getElementById("spectralSkewnessNumber").innerHTML;
// übergebe den Inhalt des Felds "spectralSkewnessNumber" in die Variable ssk
spectralSkewness_array=ssk.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
sk=document.getElementById("spectralKurtosisNumber").innerHTML; // übergebe
// den Inhalt des Felds "spectralFKurtosisNumber" in die Variable sk
spectralKurtosis_array=sk.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
ps=document.getElementById("perceptualSpreadNumber").innerHTML; // übergebe
// den Inhalt des Felds "perceptualSpreadNumber" in die Variable ps
perceptualSpread_array=ps.split(" "); // erzeuge ein Array daraus, indem der Text
// nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
psh=document.getElementById("perceptualSharpnessNumber").innerHTML;
// übergebe den Inhalt des Felds "perceptualSharpnessNumber" in die Variable psh
perceptualSharpness_array=psh.split(" "); // erzeuge ein Array daraus, indem der
// Text nach allen Leerzeichen in seine einzelen Elemente aufgeteilt wird.
for (var i = 0; i < rms_array.length; i++) { // hole in einer Schleife in der
// Länge des Arrays rms_array jeden einzelnen Wert i aus dem Array
zeit.push(i); // und füge den jeweiligem Wert i ins Array Zeit hinzu
}

In diesem Teil werden dann - wie auch sonst bei der Visualisierung mit Plotly - aus den vorhadenen Arrays die traces für die darzustellenden Kurven angelegt, diese dann in der Variable data zusammengefasst und nach der Festlegung des Layouts mit Hilfe von Plotly.newPlot() im vorher definierten Bereich "AnzeigeDiv" ausgegeben:

var data = [ trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8, trace9, trace10, trace11, trace12]; // füge alle Kurvenarrys in dem Array
// data zusammen

var layout = { // bestimme das Layout der Visualisierung
showlegend: true, // zeige eine interaktive Legende an der rechten Seite der Visualisierung
xaxis: { // Eigenschaften der X-Achse
title: 'Samples', // Beschriftung
},
yaxis: { // Eigenschaften der Y-Achse
title: 'Amount', // Beschriftung
},
legend: { // Eigenschaften der Y-Legende
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
// Schriftart, -größe und -farbe in der Legende
},
title: 'Timbre Features eines Fagotts', // Titel für die Visualisierung
};

Plotly.newPlot('AnzeigeDiv', data, layout, {displayModeBar: false});
// gebe den Graphen in dem Bereich AnzeigeDiv aus und verwende dafür die Variablen aus data und
// layout, zeige dabei nicht die Werkzeugleiste von PlotLy an.
}

Ganz am Ende der Seite werden via <DIV>-Tags die Stellen markiert, an denen die Werte für die einzelnen Timbre-Features zwischengespeichert werden, um später in die jeweiligen Arrays geschrieben zu werden. Mit dem Zusatz style="display:none" wird dafür gesorgt, dass diese Zwischenspeicherung als Textfeld im Browser nicht sichtbar ist.

function stopAudio() {
var meinplayer = document.getElementById('audio');
meinplayer.pause();
meinplayer.currentTime = 0;
}

</script>
</head>
<body text="#000000" bgcolor="#FFFFFF">

csfaktor = audioContext.sampleRate/512*2; //Faktor, mit dem der SpectralCentroid multipliziert werden muss, Sample-Rate/Buffersize

if (typeof Meyda === "undefined") {
alert("Meyda konnte nicht gefunden werden, wurde die Library nicht eingebunden?");
} else {
const analyzer = Meyda.createMeydaAnalyzer({
"audioContext": audioContext,
"source": source,
"bufferSize": 512,
"featureExtractors": ["rms", "spectralCentroid", "zcr", "spectralFlatness", "energy", "spectralSlope", "spectralRolloff", "spectralSpread", "spectralSkewness", "spectralKurtosis", "perceptualSpread", "perceptualSharpness"],
"callback": features => {
if (features.rms!=0){
document.getElementById("levelNumber").innerHTML= document.getElementById("levelNumber").innerHTML + " " +(Math.round(features.rms * 1000)/1000);
document.getElementById("centroidNumber").innerHTML= document.getElementById("centroidNumber").innerHTML + " " +(Math.round(features.spectralCentroid*csfaktor));
document.getElementById("zcrNumber").innerHTML= document.getElementById("zcrNumber").innerHTML + " " +(Math.round(features.zcr * 1000)/1000);
document.getElementById("spectralFlatnessNumber").innerHTML= document.getElementById("spectralFlatnessNumber").innerHTML + " " +(Math.round(features.spectralFlatness * 1000)/1000);
document.getElementById("energyNumber").innerHTML= document.getElementById("energyNumber").innerHTML + " " +(Math.round(features.energy * 1000)/1000);
document.getElementById("spectralSlopeNumber").innerHTML= document.getElementById("spectralSlopeNumber").innerHTML + " " +features.spectralSlope;
document.getElementById("spectralRolloffNumber").innerHTML= document.getElementById("spectralRolloffNumber").innerHTML + " " +(Math.round(features.spectralRolloff * 1)/1);
document.getElementById("spectralSpreadNumber").innerHTML= document.getElementById("spectralSpreadNumber").innerHTML + " " +(Math.round(features.spectralSpread * 1)/1);
document.getElementById("spectralSkewnessNumber").innerHTML= document.getElementById("spectralSkewnessNumber").innerHTML + " " +(Math.round(features.spectralSkewness * 1000)/1000);
document.getElementById("spectralKurtosisNumber").innerHTML= document.getElementById("spectralKurtosisNumber").innerHTML + " " +(Math.round(features.spectralKurtosis * 1000)/1000);
document.getElementById("perceptualSpreadNumber").innerHTML= document.getElementById("perceptualSpreadNumber").innerHTML + " " +(Math.round(features.perceptualSpread * 1000)/1000);
document.getElementById("perceptualSharpnessNumber").innerHTML= document.getElementById("perceptualSharpnessNumber").innerHTML + " " +(Math.round(features.perceptualSharpness * 1000)/1000);
}
}
});
analyzer.start();
}

var meinplayer = document.getElementById('audio');
meinplayer.onended = function() {
kurvezeichnen();
};
meinplayer.onpause = function() {
kurvezeichnen();
};

function kurvezeichnen(){
zeit=[];
rms=document.getElementById("levelNumber").innerHTML;
rms_array=rms.split(" ");
sc=document.getElementById("centroidNumber").innerHTML;
spectralcentroid_array=sc.split(" ");
zcr=document.getElementById("zcrNumber").innerHTML;
zeroCrossingRate_array=zcr.split(" ");
sf=document.getElementById("spectralFlatnessNumber").innerHTML;
spectralFlatness_array=sf.split(" ");
en=document.getElementById("energyNumber").innerHTML;
energy_array=en.split(" ");
sl=document.getElementById("spectralSlopeNumber").innerHTML;
spectralSlope_array=sl.split(" ");
sr=document.getElementById("spectralRolloffNumber").innerHTML;
spectralRolloff_array=sr.split(" ");
ss=document.getElementById("spectralSpreadNumber").innerHTML;
spectralSpread_array=ss.split(" ");
ssk=document.getElementById("spectralSkewnessNumber").innerHTML;
spectralSkewness_array=ssk.split(" ");
sk=document.getElementById("spectralKurtosisNumber").innerHTML;
spectralKurtosis_array=sk.split(" ");
ps=document.getElementById("perceptualSpreadNumber").innerHTML;
perceptualSpread_array=ps.split(" ");
psh=document.getElementById("perceptualSharpnessNumber").innerHTML;
perceptualSharpness_array=psh.split(" ");
for (var i = 0; i < rms_array.length; i++) {
zeit.push(i);
}

var trace1 = {
x: zeit,
y: rms_array,
mode: 'lines',
type: 'scatter' ,
name: 'Amplitude',
marker: {
color: 'rgb(188, 48, 47)',
},

text: rms_array,
};
var trace2 = {
x: zeit,
y: spectralcentroid_array,
mode: 'lines',
type: 'scatter' ,
name: 'Spectral Centroid',
marker: {
color: 'rgb(48, 188, 48)',
},
text: spectralcentroid_array,
};
var trace3 = {
x: zeit,
y: zeroCrossingRate_array,
mode: 'lines',
type: 'scatter' ,
name: 'Zero Crossing Rate',
marker: {
color: 'rgb(48, 48, 188)',
},
text: zeroCrossingRate_array,
};
var trace4 = {
x: zeit,
y: spectralFlatness_array,
mode: 'lines',
type: 'scatter' ,
name: 'Spectral Flatness',
marker: {
color: 'rgb(255, 48, 188)',
},
text: spectralFlatness_array,
};
var trace5 = {
x: zeit,
y: energy_array,
mode: 'lines',
type: 'scatter' ,
name: 'Energy',
text: energy_array,
};
var trace6 = {
x: zeit,
y: spectralSlope_array,
mode: 'lines',
type: 'scatter' ,
name: 'Spectral Slope',
text: spectralSlope_array,
};
var trace7 = {
x: zeit,
y: spectralRolloff_array,
mode: 'lines',
type: 'scatter' ,
name: 'spectral Rolloff',
text: spectralRolloff_array,
};
var trace8 = {
x: zeit,
y: spectralSpread_array,
mode: 'lines',
type: 'scatter' ,
name: 'Spectral Spread',
text: spectralSpread_array,
};
var trace9 = {
x: zeit,
y: spectralSkewness_array,
mode: 'lines',
type: 'scatter' ,
name: 'spectral Skewness',
text: spectralSkewness_array,
};
var trace10 = {
x: zeit,
y: spectralKurtosis_array,
mode: 'lines',
type: 'scatter' ,
name: 'spectral Kurtosis',
text: spectralKurtosis_array,
};
var trace11 = {
x: zeit,
y: perceptualSpread_array,
mode: 'lines',
type: 'scatter' ,
name: 'Perceptual Spread',
text: perceptualSpread_array,
};
var trace12 = {
x: zeit,
y: perceptualSharpness_array,
mode: 'lines',
type: 'scatter' ,
name: 'Perceptual Sharpness',
text: perceptualSharpness_array,
};

var data = [ trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8, trace9, trace10, trace11, trace12];

var layout = {
showlegend: true,
xaxis: {
title: 'Samples',
},
yaxis: {
title: 'Amount',
},
legend: {
font: { family: 'Verdana, sans-serif', size: 10, color: 'black', }
},
title: 'Timbre Features eines Fagotts',
};

Plotly.newPlot('AnzeigeDiv', data, layout, {displayModeBar: false});
}

</script>