Audio Player
Audio Player / Sound 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.
Man kann dieses Projekt von GitHub herunterladen.
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.
- Slider Input
- Slider Audio
- Slider Range
- Slider Play
- Slider Play Pause setTime
- Slider Volume
- kompletter Player
- Songliste
- Player mit Songliste
- mehrere Player Vorbereitung
- 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.
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.
Audio Geschwindigkeit ändern
siehe auch Video Abspielgeschwindigkeit
Entnehme das Script aus dem Videobeispiel. Es ist das gleiche Verfahren. Beim ändern der Geschwindigkeit, kann man einstellen, ob sich die Tonhöhe ändern soll oder nicht.
