Die Idee
Meine Idee war es, ein sich um 360° drehbares Panoramabild zu erstellen und die passende Geräuschkulisse für die entsprechende Sehrichtung zu liefern. Ich war davon überzeugt, dass dies mit grundlegenden Mitteln von HTML5 möglich sein sollte. Leider musste ich nach einer ersten Recherche feststellen, dass der ‹audio›-Tag nicht so mächtig ist, wie ich mir das vorgestellt hatte. Meine erste Überlegung, die Geräuschkulisse anhand von simplen Panning-Einstellungen zu konstruieren, ist (momentan) leider nicht möglich. Doch mit einigen Tricks und Kniffs ist es mir trotzdem gelungen, ein ähnliches Produkt zu erstellen.
Und hier geht’s zum Ergebnis.
Der Standort
Die erste grosse Frage war, welchen Standort für die Aufnahmen gewählt werden soll. Natürlich kann hier ein beliebiger Standort gewählt werden, trotzdem muss man für gute Aufnahmen ein paar Dinge beachten. Der ideale Standort sollte von einer möglichst gleichbleibenden Geräuschkulisse umgeben werden und ein möglichst gleichbleibendes Bild auf alle Seiten haben. Dabei zu beachten ist ebenfalls, dass das Ergebnis erst richtig interessant wird, wenn nicht auf alle Seiten das gleiche zu hören ist. Bei meiner Feldaufnahme war die optimale Situation nicht unbedingt gegeben: Das Panoramabild hatte ich relativ schnell im Kasten, da ja nicht alle Aufnahmen zwingend zur selben Zeit (abgsehen vielleicht von den Wetterverhältnissen) aufgenommen werden mussten. Die Geräuschkulisse war einiges schwieriger festzuhalten, da immer wieder Leute vorbeispaziert und -gefahren sind, deren Schritte ich nicht auf den Aufnahmen haben wollte. Gleichzeitig waren auch sehr viele Hundebesitzer unterwegs, deren beste Freunde man noch aus einigen Metern Entfernung hören konnte. Allein für die Audio-Aufnahmen musste ich in diesem Fall über einen halben Tag investieren.
Eine denkbare Alternative zu einer solchen Aufnahme wäre ein fiktives (zum Beispiel gemaltes) Bild, dessen Geräuschkulisse man von verschiedenen Orten zusammenschneiden könnte. Mit der richtigen Ausrüstung wäre es auch denkbar, statt einem “Stand”-Panoramabild ein Video zu erstellen.
Das Bild
Die aufgenommenen Bilder werden in den Microsoft Image Composite Editor (ICE) oder in ein anderes Programm zur Erstellung von Panoramabildern eingelesen.[1] Im Anschluss an den Rechenvorgang speichern wir das Panoramabild.[2] Das Bild kann entweder direkt im ICE oder im Nachhinein in Photoshop oder einem anderen Programm zugeschnitten werden.
Das Panoramabild soll auf der rechten und linken Seite einen fliessenden Übergang haben. Dafür erstellen wir jeweils ein Bild vom linken und eines vom rechten Ausschnitt.[3] Diese beiden Bilder werden wieder in den ICE geladen.[4] Auch dieses Bild speichern wir unter einem eigenen Namen ab.[5]
Jetzt haben wir alles das wir benötigen, um das “rotierfähige” Panoramabild abzuschliessen. Der Rest ist Handarbeit. Wir öffnen dazu Photoshop oder ein anderes Bildbearbeitungsprogramm. Zuerst wird das Panoramabild rechts und links bis zum gleichen Punkt angeschnitten. Hier wird dann der hoffentlich ansehnliche Übergang entstehen.
Als nächstes fügen wir das eben erstellte Übergangsbild jeweils links und rechts im Bild ein.[6] Die beiden Bilder müssen jetzt in der Höhe, der Breite (ziehen) und dem Winkel (drehen) so angepasst werden, bis sie möglichst gut über das Panoramabild passen.[7] Am besten verringert man für die darüber gelegten Bilder die Deckkraft. Vergiss nicht, die Transparenz nach getaner Arbeit wieder zurückzustellen. Wenn das geschafft ist, können wir anfangen, die beiden Biler von innen her mit dem Radiergummi auszuwischen, bis die Übergänge der Bilder nicht mehr, beziehungsweise fast nicht mehr zu sehen sind.[8] Zum Schluss muss das Bilder wieder von oben und unten angeschnitten werden, um die allfälligen schwarzen Ränder zu beseitigen. Wenn alles geklappt hat, sollten wir jetzt unser Panoramabild für die Verwendung in der rotierbaren Geräuschkulisse fertiggestellt haben.
Das dürfen Profis natürlich auch alles von Hand machen.
Der Ton
Dieser Teil ist sehr individuell und hängt stark von den verfügbaren Materialien ab. Ich möchte hier nicht nur auf meine Lösung eingehen, sondern auch mögliche Alternativen aufzeigen.
Die Sound-Aufnahmen erfolgten mit einem Stereomikrofon, dessen Aufnahmewinkel 90° beträgt. Dabei habe ich jeweils vier Aufnahmen gemacht, einmal Richtung See, einmal Richtung Gleis und zweimal in Richtung der dazwischenliegenden Rasenflächen. Alternativ kann natürlich auch ein anderes Mikrofon verwendet werden. Es ist auch möglich, die Geräuschkulisse mit einem Monomikrofon einzufangen. Dann müsste man allerdings den Mix der einzelnen Sehrichtungen entsprechend anpassen. Idealerweise hat man vier Mono-Mikrofone zur Verfügung, die jeweils in eine der vier Richtungen zeigen. So könnte man aus den jeweils gegenüberliegenden Aufnahmen ein Stereo-Bild erstellen und auf allen Aufnahmen wäre die gleiche Zeitsequenz zu hören. Alternativ können auch acht, zwölf oder sechzehn Aufnahmen gemacht werden, die dann aber mit entsprechendem Aufwand geschnitten werden müssen. Die Mikrofone könnten auch versetzt werden, z.B. in jede Richtung 100 Meter weg vom Standpunkt. Welchen Effekt hätte dies auf die Geräuschkulisse? Hier darf auf alle Fälle experimentiert werden.
Meine Versuchsanordnung sah wie folgt aus:
Je nach Mikrofon und Anzahl der Aufnahmen muss man jetzt die Geräuschkulissen für die einzelnen Sehrichtungen abmischen. In meinem Fall gab es vier verschiedene Sounds, wobei jeweils die Aufnahme in die Sehrichtung in der Mitte des Panning-Spektrums liegt, die jeweils links und rechts davon befindlichen Sounds bei -100 beziehungsweise 100 und der Sound, der im Rücken liegt ebenfalls in der Mitte, allerdings mit vertauschtem Stereobild. Der Aufnahme in die Sehrichtung habe ich im Lautstärke-Mix den höchsten Wert gegeben und der Aufnahme in die Gegenrichtung den kleinsten Wert, also am leisesten. Das entspricht zwar nicht der Realität, allerdings ist das – vielleicht abgsehen von Hall-Einstellungen – die einzige Möglichkeit durch einen Stereosound ein Surroundsound zu simulieren.
Die nachfolgende Tabelle zeigt den Mix der vier Sehrichtungen.
Der Code
Kommen wir nun zum letzten Teil für unsere Geräuschkulisse, dem HTML-, CSS- und Javascript-Code.
Sehen wir uns zunächst die HTML Objekte für das Bild an:
<div id = “container”>
<img class = “img” src=”fullpan.jpg” alt=””>
<img class = “img” src=”fullpan.jpg” alt=””>
</div>
Wir legen im <body>-Tag einen Container an. Darin befindet sich dann das Bild. Da wir später mit Javascript das Bild endlos rotieren wollen, setzen wir das Bild gleich zweimal hintereinander.
Betrachten wir nun das dazugehörige CSS:
body {
overflow: hidden;
}
#container {
position: absolute;
height: 105%;
left: 0px;
top: 0px;
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;}
.img {
position: relative;
left: 0px;
top: 0px;
height: 100%;
border: none;}
Im <body>-Tag soll ein Überlaufen unterbunden werden. Der Container allerdings soll auf der x-Achse scrollbar sein. Die Position des Containers ist absolut und hat eine feste Höhe und Breite von 100%. Die Höhe habe ich bewusst ein wenig erhöht, damit die – meiner Meinung nach unansehnliche – Scrollleiste im Überlauf des <body>-Tags verschwindet. Die Anweisung “white-space: nowrap” trägt dazu bei, dass die beiden im HTML-Code gesetzten Bilder nebeneinander erscheinen.
Die Bilder selbst haben, damit sie wirklich nebeneinander gezeigt werden, eine relative Position. Deshalb muss hier auch keine Breite, sondern nur die Höhe von 100% angegeben werden.
Als nächstes binden wir den Ton ein. Dazu brauchen wir <audio>-Tags, und zwar für jedes Audio einen:
<audio id = “180deg” autoplay loop>
<source src=”180deg.ogg” type=”audio/ogg” />
<source src=”180deg.mp3″ type=”audio/mpeg” /></audio>
<audio id = “m90deg” autoplay loop>
<source src=”-90deg.ogg” type=”audio/ogg” />
<source src=”-90deg.mp3″ type=”audio/mpeg” /></audio>
<audio id = “0deg” autoplay loop>
<source src=”0deg.ogg” type=”audio/ogg” />
<source src=”0deg.mp3″ type=”audio/mpeg” /></audio>
<audio id = “90deg” autoplay loop>
<source src=”90deg.ogg” type=”audio/ogg” />
<source src=”90deg.mp3″ type=”audio/mpeg” /></audio>
Diese Tags setzen wir im <body>-Tag vor dem Container, damit sie vom Bild versteckt werden. Wir geben ihnen die Eigenschaften “autoplay” für ein automatisches Abspielen und “loop” für die Wiederholung. Als Quellen sollte für eine möglichst grosse Kompatibilität beide möglichen Audio-Formate verwenden.
Zum Schluss kommt noch ein eher komplizierter Block Javascript. Ich habe hier jQuery gewählt, möglich ist aber auch normales Javascript. jQuery muss allerdings zuerst an der üblichen, bekannten Stelle eingebunden werden.
jQuery(document).ready(function(){
$(‘#container’).focus();
$(‘#0deg’).attr(‘volume’,1-($(‘#container’).scrollLeft()/($(‘.img’).width()/4)));
$(‘#90deg’).attr(‘volume’,$(‘#container’).scrollLeft()/($(‘.img’).width()/4));
$(‘#180deg’).attr(‘volume’,0);
$(‘#m90deg’).attr(‘volume’,0);$(‘#container’).scroll(function () {
if ($(‘#container’).scrollLeft() == 0 ) {
$(‘#container’).scrollLeft($(‘.img’).width());
}
else if ($(‘#container’).scrollLeft() < ($(‘.img’).width() / 4) ) {
$(‘#0deg’).attr(‘volume’,1-($(‘#container’).scrollLeft()/($(‘.img’).width()/4)));
$(‘#90deg’).attr(‘volume’,$(‘#container’).scrollLeft()/($(‘.img’).width()/4));
$(‘#180deg’).attr(‘volume’,0);
$(‘#m90deg’).attr(‘volume’,0);}
else if ($(‘#container’).scrollLeft() >= $(‘.img’).width() / 4 && $(‘#container’).scrollLeft() < ($(‘.img’).width() / 4)*2) {
$(‘#90deg’).attr(‘volume’,1-(($(‘#container’).scrollLeft()-($(‘.img’).width() / 4))/($(‘.img’).width()/4)));
$(‘#180deg’).attr(‘volume’,($(‘#container’).scrollLeft()-($(‘.img’).width() / 4))/($(‘.img’).width()/4));
$(‘#0deg’).attr(‘volume’,0);
$(‘#m90deg’).attr(‘volume’,0);}
else if ($(‘#container’).scrollLeft() >= (($(‘.img’).width() / 4)*2) && $(‘#container’).scrollLeft() < (($(‘.img’).width() / 4)*3) ) {
$(‘#180deg’).attr(‘volume’,1-(($(‘#container’).scrollLeft()-($(‘.img’).width() / 4)*2)/($(‘.img’).width()/4)));
$(‘#m90deg’).attr(‘volume’,($(‘#container’).scrollLeft()-($(‘.img’).width() / 4)*2)/($(‘.img’).width()/4));
$(‘#0deg’).attr(‘volume’,0);
$(‘#90deg’).attr(‘volume’,0);}
else if ($(‘#container’).scrollLeft() >= (($(‘.img’).width() / 4)*3) && $(‘#container’).scrollLeft() <= ($(‘.img’).width() ) ) {
$(‘#m90deg’).attr(‘volume’,1-(($(‘#container’).scrollLeft()-($(‘.img’).width() / 4)*3)/($(‘.img’).width()/5)));
$(‘#0deg’).attr(‘volume’,($(‘#container’).scrollLeft()-($(‘.img’).width() / 4)*3)/($(‘.img’).width()/5));
$(‘#180deg’).attr(‘volume’,0);
$(‘#90deg’).attr(‘volume’,0);}
else if ($(‘#container’).scrollLeft() > ($(‘.img’).width())) {
$(‘#container’).scrollLeft($(‘#container’).scrollLeft()-$(‘.img’).width());
}
});
})
Zu Beginn wird hier der Fokus auf den Container gesetzt. Das bedeutet, dass wir direkt von Anfang an mit den Pfeiltasten das Bild steuern können und nicht zuerst die zu scrollende Fläche auswählen müssen.
Danach kommt schon die Lautstärke der Audiodateien, wie sie beim Aufrufen der Seite sein sollten. Hier wird jeweils die Bildbreite durch vier (für vier Audioquellen) gerechnet. Dann teilt man die aktuelle Scrollposition durch dieses Ergebnis und man bekommt der Prozentsatz der Lautstärke des Audiofiles. Das gleiche gillt natürlich für das nächste Audiofile, allerdings muss man dort beachten, dass es umgekehrte Prozentsätze sein sollten, darum ziehen wir das Ganze von 1 ab. Die anderen beiden Soundquellen sind still. Man befindet sich also immer zwischen zwei Soundquellen, die nebeneinander stehen.
Nun wird jedes Mal wenn der Benutzer scrollt, überprüft, wo sich dieser gerade befindet und welche Soundquellen gerade wie laut eingeschaltet werden sollen.
Hat man die gesamte Bildbreite gescrollt, fängt das Scrolling wieder von vorne an. Scrollt man jetzt wieder zurück, springt der Scrollbalken wieder zum Ende des (ersten) Bildes. Das zweite Bild wird somit nie ganz gezeigt, sondern nur der erste Ausschnitt. So hat der Benutzer das Gefühl, man könne sich um 360° drehen.
Und hier geht’s zum Ergebnis.