Audio auf Webseiten ist ja immer so ein Thema.
Die “nativen” HTML “Möglichkeiten” lassen wir mal lieber aussen vor.
Des Rätsels Lösung ist ja eigentlich meistens Flash – so auch bei Soundmanager 2.
Nur bleibt Flash hier komplett im Hintergrund und wird nur als “Ausgabegerät” missbraucht.
Sounds lassen sich dann mittles einer wirklich mal sehr coolen JS API einbinden, triggern und noch einiges mehr.
Dazu ist das ganze auch noch hervorragend dokumentiert.
Im einfachsten Fall sieht sowas dann so aus:
var mySoundObject = soundManager.createSound({
id: 'mySound',
url: '/audio/mysoundfile.mp3'
});
mySoundObject.play();
soweit so praktisch schonmal.
Die Performance ist übrigens ebensfalls hervorragend.
Richtig gut wird es dann, wenn man Flash 9 vorrausetzt:
waveformData array: 256 waveform data values available while playing sound eqData array: 256 EQ spectrum data values available while playing sound peakData object: Left and right channel peak/volume data available while playing sound
damit lassen sich dann mal eben eigene Meter Darstellungen skripten. In JS.
someSoundObject.whileplaying = function() {
// Move 256 absolutely-positioned 1×1-pixel DIVs, for example (ugly, but works)
var gPixels = document.getElementById(‘graphPixels’).getElementsByTagName(‘div’);
var gScale = 32; // draw -32 to +32px from “zero” (i.e., center Y-axis point)
for (var i=0; i<256; i++) {
graphPixels[i].style.top = (gScale+Math.ceil(this.waveformData[i]*-gScale))+'px';
}
}
[/sourcecode]
HTML Canvas beispiel : http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html
benutzt wird das ganze übrigens unter anderem von:
http://muxtape.com/
http://thecloudplayer.com/
http://8tracks.com/
und natürlich http://openchords.org ;)