SoundPlayer

Audio mit Javascript

Einen Audio oder Videoplayer kann man sehr einfach mit den HTML5 Elementen Audio oder Video erstelen. Die Player werden von den Browsern geliefert und sehen sehr unterschiedlich aus. Gestaltung mit CSS wird bei einigen Browsern kaum unterstützt.

Will man einen einheitlichen Player kann man die Steuerungselemente mit HTML Elementen wie img, input, button etc. erstellen und diese mit CSS gestalten. Die Funktionalität wird per Javascript erstellt.

var myAudio = new Audio('mySong.mp3');
myAudio.play();

Step by Step Tutorial Audioplayer

In der folgenden Schritt für Schritt Anleitung, werden mittels mehrerer Beispiele Audioplayer erstellt.

  1. Slider Input
  2. Slider Audio
  3. Slider Range
  4. Slider Play
  5. Slider Play Pause setTime
  6. Slider Volume
  7. kompletter Player
  8. Songliste
  9. Player mit Songliste
  10. mehrere Player Vorbereitung
  11. mehrere Player

Links

CSS Eigenschaften für Input Range Sliders

Audio Eigenschaften und Methoden und Events:
W3Schools Audio Element
W3Schools Javascript Audio

Howler.JS Javascript Library für Sound

How to create Range Slider / W3Schools

RangeSlider JS (JQuery needed)

NouISlider (schlanker Slider)

Alternative

Hier noch 2 Alternativen, die mit dem JQuery Slider gemacht sind. Allerdings ist dieser Code komplizierter. Manchmal ist so ein Framework komplizierter als der direkte Weg mit HTML5, Javascript und CSS. Das liegt wohl daran, dass man heute mehr Möglichkeiten hat.

1 Player JQuery Slider

2 Player JQuery Slider

Das erste Beispiel ist ein Player auf einer Seite. das zweite Beispiel sind 2 Player, wobei immer nur ein Sound abgespielt werden kann, der andere stoppt automatisch.

audioTest


Javascript Tipps