[Übersicht]
Tutorials > Javascript > WebAudio Player  

  PHP Basics
   Administrationsbereich
   Counter
   Umfrage
   Kalender
   Kontaktformular
  Javascript
   WebAudio Player
   WebAudio Player Singles
   Web-Farbmixer
   Beim Scrollen nachladen
     Canvas
      Weihnachtskalender
      BCD Uhr
      Analog Anzeigeinstrument
      Drehregler
      Schieberegler
      Schiebeschalter
     Navigation
      Registerkarten-Navigation
      Rotationsmenue
     Animation & Spiele
      Warp-Flug
      Lichtjockey
  HTML
   HTML 5 Grundgerüst
  CSS
   Responsive Tabelle






php



webhostingbanner 250x250


[Beispiel]   [Download]  

Dieser Music-Player demonstriert, was mit der WebAudio-API so alles möglich ist.
Es sind nicht alle Funktionen abgedeckt, aber wohl die wichtigsten.

Er ist dazu gedacht, dass ihr euren Besuchern Musik auf der eigenen Homepage anbieten könnt.
Sei es die selbst komponierte oder einfach nur zur Unterhaltung.

Die Anfangskonfiguration der einzelnen Bausteine kann in der Konfigurationsdatei festgelegt werden.

Das Laden und Abspielen der .mp3-Dateien basiert auf dem audio-Object, so dass ein Besucher mit einem alten Browser die Musik trotzdem noch hören kann. Für diesen Fall werden auch die Werte der animierten Anzeigen mittels Zufallsgenerator simuliert.
Diese Anzeigen werden in Echtzeit mit Canvas realisiert und lesen die Frequenz- und Pegelwerte der Datei aus.



Da etwas Spielerei nicht fehlen darf, verfügt der Player noch über einen 10-Band Equalizer mit vorgefertigten Kurven, sowie diverse Anzeigemodi und -Farben für die Frequenz-Spektrum Anzeige. Dazu noch Regler für Echo- und Panoramaeffekt und eine BPM-Erkenung (durch rythmisches Anklicken).

Die Loudness-Funktion arbeitet bis zur halben Lautstärke, indem die tiefen Töne angehoben werden. Die Lautstärkeanpassung ist ein vollautomatisches Modul der API.

Die Wellenformanalyse liest die kompletten PCM-Daten ein und stellt diese mit einer direkten Sprungfunktion dar. Sie ist so detailliert, wie die Browser die maximale Canvas-Breite zulassen. Der aktuelle sichtbare Ausschnitt der ganzen Grafik läuft durch einen begrenzten Bereich.

Playlist-Verwaltung und Dateiupload sind passwortgeschützte Bestandteile des Players. Playlist-Dateien liegen für den Player im eigenen internen Format vor, können aber im .m3u-Format im- und exportiert werden. Freigegebene Listen erscheinen dann als Auswahl. Eine wird als Vorwahl markiert.

Alle Funktionen und Komponenten im einzelnen zu erklären, würde wohl ein kleines Buch füllen. Daher beschränkt sich dieses "Tutorial" lediglich auf eine grobe Beschreibung. Den Rest sieht man ja im Quellcode...

- Bausteine konfigurierbar oder als Miniplayer
- Playlistverwaltung der Onlinedateien mit Im- und Export, benötigt keine Datenbank
- Dateiupload oder Verzeichnisse einscannen und in Playlist aufnehmen
- Abspielen von lokalen Dateien per Drag & Drop
- Lokale Playlisten in Browser-Datenbank speichern
- Webradio hören, Videos anzeigen
- Mikrofon- und Webcam Integration
- Sleep- und Alarmtimer, Kalender und Uhrzeit
- ID3 Tag-Editor und Anzeige, Songtexte darstellen
- BPM auslesen und ertippen
- DJ-Mischpult mit Fader, Automix, Pitch-Funktion & CUE
- Wellenformanalyse mit Bilderzeugung
- Viele Anzeigen Pegel- und Freuquenzgang, Oszilloskop und Hauptdisplay
- Umfangreiche Audiovisuslisierung im Vollbild, Ambilight, Lichtorgel, Partybeleuchtung
- 10-Band Equalizer mit fertigen Kurven und Speicherfunktion
- Raumklang, Echo-Effekte, Panoramasteuerung und Kanal-Delay, Freuquenzweiche
- Tongererator, Effekt-Samples abspielen
- Titel-Scan, Reihenfolge programmierbar, Zufallswiedergabe, A-B-Repeat, Loudness
- Eigenes Kontextmenü, Tastensteuerung, kleine Onlinehilfe
- Willkommenstext beim ersten Besuch, Demo-Modus
- Administrationsbereich mit Check-Seite der Verzeichnisse und deren Rechte
- Besucherzähler mit Tagesarchiv
- Konfiguration und CSS online editierbar