JavaScript Equalizer programmieren

Einfach als Designelement oder auch funktionsfähig ist dieser Equalizer ein echter Hingucker! Hier erkläre ich Dir, wie Du diesen Equalizer selber mit reinem JavaScript programmieren kannst.

Equalizer sind in der Musikbranche dafür zuständig, die Höhen und Tiefen eines Songs anzuzeigen und zu visualisieren. Und genau das demonstrieren wir hier auch, nur… mit zufälligen Werten.

See the Pen Equalizer by WebDEasy (@WebDEasy) on CodePen.

1. Das HTML-Gerüst

Im ersten Schritt erstellen wir die einzelnen Bars .equalizer-bar und den untersten Balken pro Bar als span.

<div class="equalizer">
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
  <div class="equalizer-bar">
    <span></span>
  </div>
</div>

Danach fügen wir noch den Lauftext mit Hilfe des marquee Tags ein.

<div class="song-info">
  <marquee>Currently playing: Awesome song - WebDEasy ft. codepen.io - Duration: Endless - File: 404 not found</marquee>
</div>

2. Das Styling

Das komplette Styling habe ich mit SASS (Syntactically Awesome Stylesheets) umgesetzt. Wenn Du das Styling einfach übernehmen möchtest, kannst Du mit Hilfe dieses Tools in normales CSS umwandeln lassen.

Schriftart, Hintergrund und Grundeinstellungen stelle ich an diesen drei Elementen ein.

body {
  font-family: arial, sans-serif;
  background-color: #000;
  width: 100%;
  height: calc(100vh - 4rem);
  margin: 0;
}

.equalizer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  margin-top: 4rem;
}

.song-info {
  color: #FFF;
  width: 25rem;
  font-style: italic;
  font-size: 12px;
  margin: .5rem auto;
}

Danach geht es an das Hauptelement: den Equalizer und dessen Bars und Balken.

Hierbei ist es wichtig, dass die einzelnen span Elemente eine Transition von 200 Millisekunden bekommen, da der Effekt später gut zur Geltung kommen soll. Ich habe mit verschiedenen Werten herumprobiert und habe damit ein gutes Ergebnis erzielt.

Die einzelnen Balken bekommen alle unterschiedliche Farben, wie bei vielen echten Equalizern auch.

.equalizer-bar {
  width: 1.8rem;
  margin: 0 3px;
  display: flex;
  flex-direction: column-reverse;
  
  span {
    display: block;
    height: 4px;
    border-radius: 2px;
    width: 100%;
    margin: 2px 0;
    background-color: #FFF;
    transition: .2s ease all;
    opacity: 1;
  }
  
  &:nth-child(1) span {
    background: #fc0127;
  }
  
  &:nth-child(2) span {
    background: #fb0275;
  }
  
  &:nth-child(3) span {
    background: #b50cd3;
  }
  
  &:nth-child(4) span {
    background: #6407e9;
  }
  
  &:nth-child(5) span {
    background: #2a06a9;
  }
  
  &:nth-child(6) span {
    background: #080ad7;
  }
  
  &:nth-child(7) span {
    background: #0265e2;
  }
  
  &:nth-child(8) span {
    background: #03fcfc;
  }
  
  &:nth-child(9) span {
    background: #02fe46;
  }
  
  &:nth-child(10) span {
    background: #05fb0f;
  }
  
  &:nth-child(11) span {
    background: #97f611;
  }
  
  &:nth-child(12) span {
    background: #f5e506;
  }
  
  &:nth-child(13) span {
    background: #d7a414;
  }
  
  &:nth-child(14) span {
    background: #fc6b02;
  }
  
  &:nth-child(15) span {
    background: #df1506;
  }
  
}

3. Den Equalizer mit JavaScript beleben

Kommen wir nun zu dem in meinen Augen spannendsten Part: Die Programmierung.

Im ersten Schritt legen wir eine Konstante mit der Bar Höhe fest. Das ist die maximale Anzahl ans Bars, also die tatsächliche Höhe des Equalizers.

Anschließend rufen wir die Funktion addBarSpans() auf. Diese Funktion fügt die Anzahl an Spans in jeden Balken ein. Damit haben wir uns viel Schreibarbeit im HTML gespart und dient nur zur Vorbereitung.

const MAX_BAR_HEIGHT = 18;

addBarSpans();

// Add the default spans
function addBarSpans() {
  const bars = document.getElementsByClassName('equalizer-bar');
  
  let html = '';
  for(let j = 0; j < MAX_BAR_HEIGHT; j++) {
    html += '<span></span>';
  }  
  
  for(let i = 0; i < bars.length; i++) {
    bars[i].innerHTML = html;
  }
}

Als nächstes schreiben wir uns schon zwei Hilfsfunktionen welche wir später noch benötigen.

Die Funktion getActiveSpans(spans) gibt die Anzahl der Spans zurück die sichtbar – somit aktiv sind. Außerdem haben wir die Funktion getRandomHeight(), welche uns eine zufällige Zahl zwischen Eins und der maximalen Höhe unserer Balken zurück gibt.

// Returns the number of active spans
function getActiveSpans(spans) {
  let counter = 0;
   
  for(let i = 0; i < spans.length; i++) {
    if(spans[i].style.opacity > 0) counter++;
  }
  
  return counter;
}

// Returns a random number between 1 and 20
function getRandomHeight(maxBarHeight) {
  return Math.round(Math.random() * (maxBarHeight - 1)) + 1;
}

Jetzt kommt unser Hauptprogramm. Wir rufen alle 200 Millisekunden die Funktion setRandomBars() auf. Diese „Schleife“ läuft dann endlos.

Die Funktion hat eine Schleife über alle Balken (erste markierte Zeile) und eine Schleife über alle Bars in diesem Balken (zweite markierte Zeile).

Zuvor werden alle notwendigen Werte ermittelt (Zeile 11-13). Alle span Elemente, die höher als die neue Höhe ist werden ausgeblendet, alle anderen eingeblendet.

Im Anschluss (Zeile 23-27) werden die fünf oberen Bars berechnet und die Sichtbarkeit (opacity) absteigend gesetzt. Das bewirkt einen schöneren und sanfteren Effekt nach oben.

setInterval(() => {
  setRandomBars();
}, 200);

// Main programm (repeats)
function setRandomBars(maxBarHeight) {
  const bars = document.getElementsByClassName('equalizer-bar');
  
  for(let i = 0; i < bars.length; i++) {
     
    let spans = bars[i].getElementsByTagName('span');
    let activeSpanCount = getActiveSpans(spans);
    let newHeight = getRandomHeight(MAX_BAR_HEIGHT);
    
    for(let j = 0; j < spans.length; j++) {
      
      if(newHeight > activeSpanCount) {
        spans[j].style.opacity = '1';
      } else if(j > newHeight) {        
        spans[j].style.opacity = '0';
      }
      
      // set little opacity
      let upperSpan = MAX_BAR_HEIGHT - j;
      if(newHeight > MAX_BAR_HEIGHT-5 && upperSpan < 5) {
        spans[j].style.opacity = '0.' + upperSpan;
      }
      
    }
  }
}

4. Fazit

Dieser Equalizer ist vielfältig einsetzbar und vielleicht hast Du ja eine API, die Du mit diesem Equalizer verbinden kannst, um ihn funktionsfähig zu machen – und nicht nur zufällige Werte.

Danke, dass Du bis hier gelesen hast und bin auf Dein Feedback gespannt! 🙂