Kombination von Meyda und P5 - Lautheit (-> Mikrophon-Version)

Meyda arbeitet sehr gut mit P5 und P5.sound zusammen, z.B. um die empfundene Lautheit aus einem Klangbeispiel automatisch zu extrahieren und zu visualisieren:

1. Einbettung der Meyda- und der Plotly-Library

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

<script src="header/p5.js"></script>
<script src="header/p5.sound.js"></script>
<script src="header/meyda.min.js"></script>

 

2. Script zur Steuerung eines Audioplayers

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

<script>
function spielAudio() { // Funktion zum Abspielen des Audioplayers
var meinplayer = document.getElementById('audio'); // finde über
// getElementById() den Audioplayer mit der id "audio" und übergebe ihn an die Variable meinPlayer.
meinplayer.play(); // starte den so gefundenen Audioplayer
}

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>

 

3. Einbettung eines Audioplayers mit id und Steuerungsmöglichkeit

Im <body> der Seite wird der Player angelegt:

<audio id="audio" src="klang/fagott_toene.mp3"> </audio>

 

4. Einbettung eines Bereichs, in dem die Daten visualisiert werden sollen

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

<DIV id="p5container" style="width:800;border: 1px solid #333;box-shadow: 8px 8px 5px #444;padding: 8px 12px;background-color:ffffff"></DIV>

 

5. Starten des WebAudioApi und Audio-Analyse mit Meyda

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:

<script defer>
const audioContext = new AudioContext(); // erzeuge einen Audiokontext (ähnlich wie
// einen Canvas) für das WebAudioApi
const htmlAudioElement = document.getElementById("audio"); // suche den
// Audioplayer via getElementById() und weise ihn der Variablen htmlAudioElement zu.
const source = audioContext.createMediaElementSource(htmlAudioElement); // füge den Audioplayer über die Variable htmlAudioElement als Mediaquelle dem audioContext hinzu.
source.connect(audioContext.destination); // verbinde den audioContext mit der
// Soundausgabe des Browsers/Computers.

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": ["loudness",], // Array (Liste) von zu analysierenden
// Eigenschaften (loudness ist ein Array von 24 Bark (Frequenzgruppenbreiten) sowie ein
// zusätzlicher Wert für die Lautheit insgesamt)
"callback": features => { // Ausgabe der ermittelten Features
bark1 = Math.round(features.loudness.specific[0] * 1000)/1000; // runde den
// ersten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark1
bark2 = Math.round(features.loudness.specific[1] * 1000)/1000; // runde den
// zweiten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark2
bark3 = Math.round(features.loudness.specific[2] * 1000)/1000; // runde den
// dritten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark3
bark4 = Math.round(features.loudness.specific[3] * 1000)/1000; // runde den
// vierten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark4
bark5 = Math.round(features.loudness.specific[4] * 1000)/1000; // runde den
// fünften Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark5
bark6 = Math.round(features.loudness.specific[5] * 1000)/1000; // runde den
// sechsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark6
bark7 = Math.round(features.loudness.specific[6] * 1000)/1000; // runde den
// siebten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark7
bark8 = Math.round(features.loudness.specific[7] * 1000)/1000; // runde den
// achten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark8
bark9 = Math.round(features.loudness.specific[8] * 1000)/1000; // runde den
// neunten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark9
bark10 = Math.round(features.loudness.specific[9] * 1000)/1000; // runde
// den zehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark10
bark11 = Math.round(features.loudness.specific[10] * 1000)/1000; // runde
// den elften Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark11
bark12 = Math.round(features.loudness.specific[11] * 1000)/1000; // runde
// den zwölften Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable bark12
bark13 = Math.round(features.loudness.specific[12] * 1000)/1000; // runde
// den dreizehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark13
bark14 = Math.round(features.loudness.specific[13] * 1000)/1000; // runde
// den vierzehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark14
bark15 = Math.round(features.loudness.specific[14] * 1000)/1000; // runde
// den fünfzehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark15
bark16 = Math.round(features.loudness.specific[15] * 1000)/1000; // runde
// den sechszehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark16
bark17 = Math.round(features.loudness.specific[16] * 1000)/1000; // runde
// den siebzehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark17
bark18 = Math.round(features.loudness.specific[17] * 1000)/1000; // runde
// den achtzehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark18
bark19 = Math.round(features.loudness.specific[18] * 1000)/1000; // runde
// den neunzehnten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark19
bark20 = Math.round(features.loudness.specific[19] * 1000)/1000; // runde
// den zwanzigsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark20
bark21 = Math.round(features.loudness.specific[20] * 1000)/1000; // runde
// den einundzwanzigsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die Variable
// bark21
bark22 = Math.round(features.loudness.specific[21] * 1000)/1000; // runde
// den zweiundzwanzigsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die
// Variable bark22
bark23 = Math.round(features.loudness.specific[22] * 1000)/1000; // runde
// den dreiundzwanzigsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die
// Variable bark23
bark24 = Math.round(features.loudness.specific[23] * 1000)/1000; // runde
// den vierundzwanzigsten Wert aus dem loudness-Array auf 3 Stellen und übergebe ihn an die
// Variable bark24
total = Math.round(features.loudness.total * 10)/10; // runde den Gesamtwert der Lautheit auf eine Stelle hinter dem Komma und übergebe ihn an die Variable total
}
});
analyzer.start(); // starte den Analyzer
}
</script>

 

6. Setup- und Draw-Funktion für P5 erstellen

Auf der Grundlage der mit Meyda ermittelten Chroma-Werte kann nun mit Hilfe von P5 mit der Visualisierung begonnen werden. Wie in den meisten P5-Anwendungen benötigt man hierzu eine setup()- und eine draw()-Funktion sowie am Ende eine Funktion, die das Starten und Stoppen des Audioplayers steuert (togglePlay()):

function setup(){
var container = createCanvas(800,400); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
container.mouseClicked(togglePlay); // auf Klick auf Canvas mit Funktion togglePlay
// reagieren
faktor = 25; // Faktor um die Frequenzgruppen (bark) über den Canvas gleichmäßig zu verteilen
}

function draw(){
background(255, 255, 255); // zeichne weißen Hintergrund
cursor(HAND); // zeige den Cursor als Hand
noStroke(); // keine Strichfarbe
fill(188, 188, 188); // Füllfarbe auf hellgrau setzen
textSize(10); // Textgröße auf 10 setzen
text("Bark 1: " + bark1, 20, 20); // Text für bark1-Wert erstellen
text("Bark 2: " + bark2, 20, 30); // Text für bark2-Wert erstellen
text("Bark 3: " + bark3, 20, 40); // Text für bark3-Wert erstellen
text("Bark 4: " + bark4, 20, 50); // Text für bark4-Wert erstellen
text("Bark 5: " + bark5, 20, 60); // Text für bark5-Wert erstellen
text("Bark 6: " + bark6, 20, 70); // Text für bark6-Wert erstellen
text("Bark 7: " + bark7, 20, 80); // Text für bark7-Wert erstellen
text("Bark 8: " + bark8, 20, 90); // Text für bark8-Wert erstellen
text("Bark 9: " + bark9, 20, 100); // Text für bark9-Wert erstellen
text("Bark 10: " + bark10, 20, 110); // Text für bark10-Wert erstellen
text("Bark 11: " + bark11, 20, 120); // Text für bark11-Wert erstellen
text("Bark 12: " + bark12, 20, 130); // Text für bark12-Wert erstellen
text("Bark 13: " + bark13, 20, 140); // Text für bark13-Wert erstellen
text("Bark 14: " + bark14, 20, 150); // Text für bark14-Wert erstellen
text("Bark 15: " + bark15, 20, 160); // Text für bark15-Wert erstellen
text("Bark 16: " + bark16, 20, 170); // Text für bark16-Wert erstellen
text("Bark 17: " + bark17, 20, 180); // Text für bark17-Wert erstellen
text("Bark 18: " + bark18, 20, 190); // Text für bark18-Wert erstellen
text("Bark 19: " + bark19, 20, 200); // Text für bark19-Wert erstellen
text("Bark 20: " + bark20, 20, 210); // Text für bark20-Wert erstellen
text("Bark 21: " + bark21, 20, 220); // Text für bark21-Wert erstellen
text("Bark 22: " + bark22, 20, 230); // Text für bark22-Wert erstellen
text("Bark 23: " + bark23, 20, 240); // Text für bark23-Wert erstellen
text("Bark 24: " + bark24, 20, 250); // Text für bark24-Wert erstellen
fill(188, 48, 47); // Füllfarbe auf dunkelrot setzen

text("gesamt: " , 20, 300); // Text für Lautheits-Gesamt-Wert erstellen
textSize(30); // Textgröße auf 30 setzen
text(total, 20, 340); // Text für Lautheits-Gesamt-Wert erstellen

c_bark1 = map(bark1, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark1 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark1 zu
rect(100+1*faktor, height-c_bark1, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark1 und deren Abstand vom Faktor faktor abhängig ist.
c_bark2 = map(bark2, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark2 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark2 zu
rect(100+2*faktor, height-c_bark2, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark2 und deren Abstand vom Faktor faktor abhängig ist.
c_bark3 = map(bark3, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark3 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark3 zu
rect(100+3*faktor, height-c_bark3, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark3 und deren Abstand vom Faktor faktor abhängig ist.
c_bark4 = map(bark4, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark4 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark4 zu
rect(100+4*faktor, height-c_bark4, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark4 und deren Abstand vom Faktor faktor abhängig ist.
c_bark5 = map(bark5, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark5 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark5 zu
rect(100+5*faktor, height-c_bark5, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark5 und deren Abstand vom Faktor faktor abhängig ist.
c_bark6 = map(bark6, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark6 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark6 zu
rect(100+6*faktor, height-c_bark6, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark6 und deren Abstand vom Faktor faktor abhängig ist.
c_bark7 = map(bark7, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark7 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark7 zu
rect(100+7*faktor, height-c_bark7, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark7 und deren Abstand vom Faktor faktor abhängig ist.
c_bark8 = map(bark8, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark8 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark8 zu
rect(100+8*faktor, height-c_bark8, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark8 und deren Abstand vom Faktor faktor abhängig ist.
c_bark9 = map(bark9, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark9 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark9 zu
rect(100+9*faktor, height-c_bark9, 15, height); // erstelle ein Rechteck, dessen
// Höhe von der Variablen c_bark9 und deren Abstand vom Faktor faktor abhängig ist.
c_bark10 = map(bark10, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark10 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark10
// zu
rect(100+10*faktor, height-c_bark10, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark10 und deren Abstand vom Faktor faktor abhängig ist.
c_bark11 = map(bark11, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark11 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark11
// zu
rect(100+11*faktor, height-c_bark11, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark11 und deren Abstand vom Faktor faktor abhängig ist.
c_bark12 = map(bark12, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark12 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark12
// zu
rect(100+12*faktor, height-c_bark12, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark12 und deren Abstand vom Faktor faktor abhängig ist.
c_bark13 = map(bark13, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark13 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark13
// zu
rect(100+13*faktor, height-c_bark13, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark13 und deren Abstand vom Faktor faktor abhängig ist.
c_bark14 = map(bark14, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark14 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark14
// zu
rect(100+14*faktor, height-c_bark14, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark14 und deren Abstand vom Faktor faktor abhängig ist.
c_bark15 = map(bark15, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark15 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark15
// zu
rect(100+15*faktor, height-c_bark15, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark15 und deren Abstand vom Faktor faktor abhängig ist.
c_bark16 = map(bark16, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark16 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark16
// zu
rect(100+16*faktor, height-c_bark16, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark16 und deren Abstand vom Faktor faktor abhängig ist.
c_bark17 = map(bark17, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark17 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark17
// zu
rect(100+17*faktor, height-c_bark17, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark17 und deren Abstand vom Faktor faktor abhängig ist.
c_bark18 = map(bark18, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark18 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark18
// zu
rect(100+18*faktor, height-c_bark18, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark18 und deren Abstand vom Faktor faktor abhängig ist.
c_bark19 = map(bark19, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark19 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark19
// zu
rect(100+19*faktor, height-c_bark19, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark19 und deren Abstand vom Faktor faktor abhängig ist.
c_bark20 = map(bark20, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark20 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark20
// zu
rect(100+20*faktor, height-c_bark20, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark20 und deren Abstand vom Faktor faktor abhängig ist.
c_bark21 = map(bark21, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark21 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark21
// zu
rect(100+21*faktor, height-c_bark21, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark21 und deren Abstand vom Faktor faktor abhängig ist.
c_bark22 = map(bark22, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark22 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark22
// zu
rect(100+22*faktor, height-c_bark22, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark22 und deren Abstand vom Faktor faktor abhängig ist.
c_bark23 = map(bark23, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark23 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark23
// zu
rect(100+23*faktor, height-c_bark23, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark23 und deren Abstand vom Faktor faktor abhängig ist.
c_bark24 = map(bark24, 0, 3, 0, height); // skaliere den Wert zwischen 0 und 3 von
// bark24 so, dass er zwischen 0 und der Höhe des Canvas ist und weise ihn der Variablen c_bark24
// zu
rect(100+24*faktor, height-c_bark24, 15, height); // erstelle ein Rechteck,
// dessen Höhe von der Variablen c_bark24 und deren Abstand vom Faktor faktor abhängig ist.
}

function togglePlay() { // Steuerung des Audioplayers
meinplayer = document.getElementById('audio'); // finde über
// getElementById() den Audioplayer mit der id "audio" und übergebe ihn an die Variable meinplayer.
if (!meinplayer.paused) { // wenn der Audioplayer nicht pausiert
stopAudio(); // pausiere ihn
} else { // in allen anderen Fällen
spielAudio(); // starte ihn
}
}
</script>

 

 

Insgesamt sieht das Script dann folgendermaßen aus:

 

<head>
<head>
<script src="header/p5.js"></script>
<script src="header/p5.sound.js"></script>
<script src="header/meyda.min.js"></script>

<script>
function spielAudio() {
var meinplayer = document.getElementById('audio');
meinplayer.play();
}

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

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

<audio id="audio" src="klang/fagott_toene.mp3" > </audio>
<DIV id="p5container" style="width:800;border: 1px solid #333;box-shadow: 8px 8px 5px #444;padding: 8px 12px;background-color:ffffff"></DIV>

<script defer>
const audioContext = new AudioContext();
const htmlAudioElement = document.getElementById('audio');
const source = audioContext.createMediaElementSource(htmlAudioElement);
source.connect(audioContext.destination);
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": ["loudness"],
"callback": features => {
bark1 = Math.round(features.loudness.specific[0] * 1000)/1000;
bark2 = Math.round(features.loudness.specific[1] * 1000)/1000;
bark3 = Math.round(features.loudness.specific[2] * 1000)/1000;
bark4 = Math.round(features.loudness.specific[3] * 1000)/1000;
bark5 = Math.round(features.loudness.specific[4] * 1000)/1000;
bark6 = Math.round(features.loudness.specific[5] * 1000)/1000;
bark7 = Math.round(features.loudness.specific[6] * 1000)/1000;
bark8 = Math.round(features.loudness.specific[7] * 1000)/1000;
bark9 = Math.round(features.loudness.specific[8] * 1000)/1000;
bark10 = Math.round(features.loudness.specific[9] * 1000)/1000;
bark11 = Math.round(features.loudness.specific[10] * 1000)/1000;
bark12 = Math.round(features.loudness.specific[11] * 1000)/1000;
bark13 = Math.round(features.loudness.specific[12] * 1000)/1000;
bark14 = Math.round(features.loudness.specific[13] * 1000)/1000;
bark15 = Math.round(features.loudness.specific[14] * 1000)/1000;
bark16 = Math.round(features.loudness.specific[15] * 1000)/1000;
bark17 = Math.round(features.loudness.specific[16] * 1000)/1000;
bark18 = Math.round(features.loudness.specific[17] * 1000)/1000;
bark19 = Math.round(features.loudness.specific[18] * 1000)/1000;
bark20 = Math.round(features.loudness.specific[19] * 1000)/1000;
bark21 = Math.round(features.loudness.specific[20] * 1000)/1000;
bark22 = Math.round(features.loudness.specific[21] * 1000)/1000;
bark23 = Math.round(features.loudness.specific[22] * 1000)/1000;
bark24 = Math.round(features.loudness.specific[23] * 1000)/1000;
total = Math.round(features.loudness.total * 10)/10;
}
});
analyzer.start();
}

function setup(){
var container = createCanvas(800,400);
container.parent('p5container');
container.mouseClicked(togglePlay);
faktor = 25;
}

function draw(){
background(255, 255, 255);
cursor(HAND);
noStroke();
fill(188, 188, 188); textSize(10);
text("Bark 1: " + bark1, 20, 20);
text("Bark 2: " + bark2, 20, 30);
text("Bark 3: " + bark3, 20, 40);
text("Bark 4: " + bark4, 20, 50);
text("Bark 5: " + bark5, 20, 60);
text("Bark 6: " + bark6, 20, 70);
text("Bark 7: " + bark7, 20, 80);
text("Bark 8: " + bark8, 20, 90);
text("Bark 9: " + bark9, 20, 100);
text("Bark 10: " + bark10, 20, 110);
text("Bark 11: " + bark11, 20, 120);
text("Bark 12: " + bark12, 20, 130);
text("Bark 13: " + bark13, 20, 140);
text("Bark 14: " + bark14, 20, 150);
text("Bark 15: " + bark15, 20, 160);
text("Bark 16: " + bark16, 20, 170);
text("Bark 17: " + bark17, 20, 180);
text("Bark 18: " + bark18, 20, 190);
text("Bark 19: " + bark19, 20, 200);
text("Bark 20: " + bark20, 20, 210);
text("Bark 21: " + bark21, 20, 220);
text("Bark 22: " + bark22, 20, 230);
text("Bark 23: " + bark23, 20, 240);
text("Bark 24: " + bark24, 20, 250);
fill(188, 48, 47);
text("gesamt: " , 20, 300);
textSize(30);
text(total, 20, 340);

c_bark1 = map(bark1, 0, 3, 0, height);
rect(100+1*faktor, height-c_bark1, 15, height);
c_bark2 = map(bark2, 0, 3, 0, height);
rect(100+2*faktor, height-c_bark2, 15, height);
c_bark3 = map(bark3, 0, 3, 0, height);
rect(100+3*faktor, height-c_bark3, 15, height);
c_bark4 = map(bark4, 0, 3, 0, height);
rect(100+4*faktor, height-c_bark4, 15, height);
c_bark5 = map(bark5, 0, 3, 0, height);
rect(100+5*faktor, height-c_bark5, 15, height);
c_bark6 = map(bark6, 0, 3, 0, height);
rect(100+6*faktor, height-c_bark6, 15, height);
c_bark7 = map(bark7, 0, 3, 0, height);
rect(100+7*faktor, height-c_bark7, 15, height);
c_bark8 = map(bark8, 0, 3, 0, height);
rect(100+8*faktor, height-c_bark8, 15, height);
c_bark9 = map(bark9, 0, 3, 0, height);
rect(100+9*faktor, height-c_bark9, 15, height);
c_bark10 = map(bark10, 0, 3, 0, height);
rect(100+10*faktor, height-c_bark10, 15, height);
c_bark11 = map(bark11, 0, 3, 0, height);
rect(100+11*faktor, height-c_bark11, 15, height);
c_bark12 = map(bark12, 0, 3, 0, height);
rect(100+12*faktor, height-c_bark12, 15, height);
c_bark13 = map(bark13, 0, 3, 0, height);
rect(100+13*faktor, height-c_bark13, 15, height);
c_bark14 = map(bark14, 0, 3, 0, height);
rect(100+14*faktor, height-c_bark14, 15, height);
c_bark15 = map(bark15, 0, 3, 0, height);
rect(100+15*faktor, height-c_bark15, 15, height);
c_bark16 = map(bark16, 0, 3, 0, height);
rect(100+16*faktor, height-c_bark16, 15, height);
c_bark17 = map(bark17, 0, 3, 0, height);
rect(100+17*faktor, height-c_bark17, 15, height);
c_bark18 = map(bark18, 0, 3, 0, height);
rect(100+18*faktor, height-c_bark18, 15, height);
c_bark19 = map(bark19, 0, 3, 0, height);
rect(100+19*faktor, height-c_bark19, 15, height);
c_bark20 = map(bark20, 0, 3, 0, height);
rect(100+20*faktor, height-c_bark20, 15, height);
c_bark21 = map(bark21, 0, 3, 0, height);
rect(100+21*faktor, height-c_bark21, 15, height);
c_bark22 = map(bark22, 0, 3, 0, height);
rect(100+22*faktor, height-c_bark22, 15, height);
c_bark23 = map(bark23, 0, 3, 0, height);
rect(100+23*faktor, height-c_bark23, 15, height);
c_bark24 = map(bark24, 0, 3, 0, height);
rect(100+24*faktor, height-c_bark24, 15, height);
}

function togglePlay() {
meinplayer = document.getElementById('audio');
if (!meinplayer.paused) {
stopAudio();
} else {
spielAudio();
}
}

</script>
</body>