This music player demonstrates what is possible with the WebAudio API.
Not all functions are covered, but probably the most important ones.
It is intended so that you can offer your visitors music on your own homepage.
Be it the self-composed one or just for entertainment.
Playlist management and file upload are password-protected parts of the player.
Playlist files are in the player's own internal format, but can be imported and exported in .m3u format.
Approved lists then appear as a selection. One is marked as an area code.
Where permitted, visitors can also play their own .mp3 files from their hard drive.
Since some gimmicks should not be missing, the player also has a 10-band equalizer with pre-set curves
and an individual storage space, as well as various display modes and colors for the frequency spectrum display.
In addition, controls for echo and panorama effects.
The oscilloscope shows the current curve.
The waveform analysis reads in the complete PCM data and displays it with a direct step function.
The currently visible section of the entire graphic runs through a limited area.
The BPM is determined and the ID3 tags are read.
The loudness function works up to half volume by boosting the low tones.
The volume adjustment is a fully automated module of the API.
The DSP component produces various surround sound and delay effects.
The tone generator serves no special purpose.
The remaining functions should be known from other players and should be self-explanatory.
A mouse is ideal for operation, although it also works with your finger.
Some functions can also be used with buttons. Here is a feature overview:
Y |
= |
Play |
|
← / → |
= |
Scan (hold) |
|
V |
= |
Visualization view |
P |
= |
Pause |
|
Bild auf / Bild ab |
= |
Track jump |
|
H |
= |
This help here |
S |
= |
Stop |
|
Pos1 / End |
= |
PL start / PL end |
|
W |
= |
Welcome Texts |
M |
= |
Mute |
|
+ / - |
= |
Volume |
|
C |
= |
Cover image & ID3 data |
Z |
= |
Random |
|
l / r |
= |
Balance |
|
U |
= |
Clock and Calendar |
A |
= |
AmbiLight |
|
↑ / ↓ |
= |
Pitch |
|
D |
= |
Player-Demo start |
By clicking on the "DJ" button, 2 identical players are loaded into a small mixer.
A different playlist can be loaded per page. If the same is used on both sides, the player and
In automix mode, skips every other track during automatic transitions.
Alternatively, different playback sequences can also be programmed.
In this view, the arrangement of the building blocks is fixed and the VOL control is deactivated, since these functions here
Accept the channel slider and the fader.
The animated displays can put a heavy load on the computer, so you can use the switches below to switch them off if necessary
disable individually. If the images are not already cached, the waveform analysis may take a few seconds.
The player is optimized for the Google Chrome browser. The loading and playing of the .mp3 files is based on the <audio> object,
so that a visitor with an old browser that doesn't have the WebAudio API can still hear the music.
In this case, the values of the animated displays are also simulated using a random number generator.
These displays are realized in real time with Canvas and read the frequency and level values of the file.
Delays can occur on low-performance end devices, as a lot of computing power is required.
This is especially true for the mixer with 2 players at the same time.
In the left area of the DSP component (Digital Sound Processor) there are 4 ready-made surround sound simulations
and acoustic effects.
A microphone can be integrated in the middle area.
Anyone who feels called to do so can sing karaoke, otherwise it can alternatively be used as a dictaphone.
The buffer is downloaded as a .webm file (WebMedia) and records for a maximum of 999 seconds.
The image of a webcam can be shown on the display and still photos can be taken.
The tone generator is only intended to generate the 4 waveforms. Just a toy...
This player uses the following memories:
Sessions & Cookies: |
Admin login, Building block order, Equalizer USER, player Skin |
Local storage: |
Display settings, welcome message read |
Indexed DB: |
Local playlist (file content & metadata, wave images) |
SQLite: |
Visitor Statistics |
Except for the simple non-personalized visitor counter,
All data is stored on the visitor's own computer.
The script is freeware and can be adapted and expanded according to your own wishes.
Nevertheless, the copyright and other notices may not be removed!
The redistribution of the script
in its original state is not forbidden but encouraged.
Further information can be found in the [
GTC on numaek.de].
Of course, the license rights of the titles on offer must be observed separately!