Projektbericht - Schulen

Projektarbeit zum Lehrgang
"Learning & Teaching New Media"
Die Gitarre
Verwendung von Sounddateien im Web
Frühjahr 2002
Erich Grasegger
Die Gitarre – Verwendung von Sounddateien im Web
Inhalt
Einleitung ................................................................................................................... 3
Projektidee ................................................................................................................. 3
Zielsetzung: ...................................................................................................................................... 4
Projektplanung .......................................................................................................... 4
Arbeitschritte .................................................................................................................................... 5
Vorarbeiten ....................................................................................................................................... 5
Textrecherche .......................................................................................................................... 5
Fotos ........................................................................................................................................ 5
Musikaufnahmen ...................................................................................................................... 7
Beschreibung des Produkts ..................................................................................... 9
Mindestanforderungen zum Betrachten der Site: ............................................................................ 9
Auflösung: 1024x768 ............................................................................................................... 9
Internet Browser ....................................................................................................................... 9
Aufbau der WebSite ......................................................................................................................... 9
Verwendung von Sounddateien ............................................................................. 11
Hyperlinks zu MP3-Dateien:........................................................................................................... 11
Aufruf von Sounddateien über JavaScript ..................................................................................... 12
Sounds über Flash-Filme abspielen............................................................................................... 12
Nachladen von Sounds in Flash .................................................................................................... 13
Sounds über Javascript kombiniert mit Flash einbinden................................................................ 14
Schlussbemerkungen ............................................................................................. 15
Anhang ..................................................................................................................... 16
Literatur .......................................................................................................................................... 16
Unterstützende Personen .............................................................................................................. 16
E. Grasegger, 2002
Seite 2
Die Gitarre – Verwendung von Sounddateien im Web
Einleitung
Dieses Projekt entstand im Rahmen des Lehrgangs „Learning &Teaching New
Media“ an der Donau-Universität Krems (2000 –2002).
Zur Person
Die Lehramtsprüfung für Hauptschulen legte ich 1985 ab.
Seit 1987 unterrichte ich in der Musikhauptschule 1 Neuhofen an der Krems die
Fächer Mathematik, Informatik, Musikerziehung und Instrumentalunterricht Gitarre.
Nach der Lehramtsprüfung für Informatik (1989) übernahm ich das Kustodiat und die
Netzwerkadministration.
Zusätzlich bin ich seit 1992 als Referent für EDV-Grundlagen, Textverarbeitung und
Tabellenkalkulation in der Volkshochschule O.Ö. tätig.
Projektidee
Die Idee, eine WebSite über die Gitarre zu gestalten, kam im Laufe von erfolglosen
Recherchen über Internetseiten, die nicht nur Textinhalte sondern auch brauchbare
Musikbeispiele beinhalten.
Im Internet findet man eher Informationsseiten, die manchmal mit Bildern oder MIDISounds versehen sind. MIDI-Dateien sind sehr von der Qualität der Soundkarten
abhängig und erreichen bei einigen Instrumentierungen nicht einmal annähernd
einen akzeptablen Level.
Für Musik gibt es einige interessante Software über Komponisten, Lexika und
Lernspiele auf CD-ROM.
Speziell für Instrumentenkunde wurde an der Pädagogischen Akademie der Diözese
Linz das Lernspiel „Multimedia-Musikinstrumente“ (Fertigstellung 2001) entwickelt,
bei dem ich für den inhaltlichen Teil über Zupfinstrumente verantwortlich war. Im
E. Grasegger, 2002
Seite 3
Die Gitarre – Verwendung von Sounddateien im Web
Verlauf dieser Arbeit entstanden viele Fotos und es wurden zur klanglichen
Unterstützung Musikbeispiele aufgenommen.
Zielsetzung:

Informationsweb mit Bild und Sound

Zielgruppe: musikinteressierte Schüler

leicht verständliche, kurze Texte

zur jeweiligen Seite passende Hörbeispiele

Fotos von Musikinstrumenten bzw. Instrumententeilen

Vermeidung von Scrollbalken

keine optische Überflutung

Konzentration auf das Wesentliche

einfache, übersichtliche Navigation

Begriffsammlung (Glossar)
Projektplanung
Bei den ersten Überlegungen ging ich davon aus, die bereits für die CD-ROM
produzierten Fotos und Musikbeispiele zu verwenden. Ebenso sollten die
Informationstexte nicht wesentlich von der Vorgabe abweichen.
Zur Realisierung sollte verwendet werden:
Zum Erstellen der Webseiten:
Dreamweaver 4.0
Soundbearbeitung:
Steinberg WaveLab 3.0
Bildbearbeitung:
Jasc Paint Shop Pro 7.0
Später wurden Macromedia Flash 5 zum besseren Einbinden der Sounds und das
Testtool Hot Potatoes 6.0 mit einbezogen.
E. Grasegger, 2002
Seite 4
Die Gitarre – Verwendung von Sounddateien im Web
Arbeitschritte

Thema formulieren

Textrecherche

Fotos erstellen und bearbeiten

Musikbeispiele aufnehmen und bearbeiten

Fotos und Sounddateien zuordnen

WebSite erstellen

Funktionalität testen:
Webfähigkeit Browser
Downloadgeschwindigkeiten
Vorarbeiten
Textrecherche
Die Informationen über die Gitarre wurden bereits für das Projekt MultimediaMusikinstrumente gesammelt und in Textform gebracht. Dennoch mussten die
Texte verändert und an die HTML-Seiten angepasst werden.
Fotos
Die Fotos entstanden in der Zeit von 1998 bis 2000.
Alle Bilder (außer E-Gitarre) wurden mit einer Spiegelreflexkamera
aufgenommen und die Dia-Filme auf Kodak Photo-CD gespeichert. Für die
Aufnahmen der E-Gitarre stand eine Digitalkamera zur Verfügung.
Mit Paint Shop Pro wurden die Fotos bearbeitet: Ausschnitte, Bildfehler
korrigieren, Hintergrundfarben ändern, Schärfe festlegen, usw.
Da die Fotos für eine CD-Produktion bestimmt waren, mussten sie in Bitmaps
mit einer Farbauflösung von 256 Farben gebracht werden.
Für mein aktuelles Projekt ist aber das Bitmap-Format völlig ungeeignet, da
die Dateien relativ groß sind. Für das Internet bieten das GIF- und das JPEGFormat wegen der Komprimierbarkeit die idealeren Speichermöglichkeiten.
E. Grasegger, 2002
Seite 5
Die Gitarre – Verwendung von Sounddateien im Web
Das GIF-Format (Graphic Interchange Format):
Bei dieser Komprimierung kann die Anzahl der verwendeten Farben
eingestellt werden (maximal 256). Ebenso ist es möglich eine
transparente Farbe zu bestimmen (z.B. Hintergrund). Fotodarstellungen
mit 256 Farben sind aber meistens nicht ideal. Reduziert man bei der
GIF-Optimierung die Anzahl der Farben, damit die Datei noch kleiner
wird, so entstehen unschöne Farbtupfen (siehe Bilder unten).
Das GIF-Format ist am besten für Grafiken geeignet.
Das JPG-Format (=JPEG; Joint Photographics Experts Group)
Diese Komprimierung erlaubt 16 Mio. Farben, ist aber nicht verlustfrei.
Die Stärke der Komprimierung muss man bei jedem Bild neu testen.
Zuvor eindeutige Farbflächen bekommen Pixelfehler. Typisch ist
manchmal auch ein Treppeneffekt.
Dennoch ist dieses Dateiformat für Fotos besser geeignet als GIF.
bmp, 36 KB
gif, 11 KB
E. Grasegger, 2002
gif, 4 KB
Seite 6
Die Gitarre – Verwendung von Sounddateien im Web
jpg, 11 KB
jpg, 4 KB
Musikaufnahmen
Die Aufnahmen der Musikbeispiele erfolgten ebenso in den Jahren 1998 bis
2000.
Es war sehr zeitaufwändig, Musiker zu finden, Termine zu vereinbaren und in
einem geeigneten Raum die Aufnahmen durchzuführen.
Zur Ausstattung zählten:

Minidisk-Rekorder und sehr gutes Mikrophon

PC mit qualitativ guter Soundkarte zum Einspielen der Sounds

Soundbearbeitungsprogramm (Sound Forge, bzw. WaveLab)
Die Musikaufnahmen wurden von der Mini-Disk über die Soundkarte im WAVFormat abgespeichert. Mit dem Soundprogramm wurden die Ausschnitte
bestimmt, die Lautstärke angepasst, das Grundrauschen beseitigt und
eventuelle Klangkorrekturen durchgeführt. Eine fertige Datei für die CDProduktion hat die Einstellung mono 16 bit mit 44kHz.
Es ist nicht ratsam über das Internet WAV-Dateien zu schicken. Ein 8 sec.
langes Soundbeispiel mono, 16 bit, 44kHz ist ca. 700 KB groß.
E. Grasegger, 2002
Seite 7
Die Gitarre – Verwendung von Sounddateien im Web
MP3 (MPEG/Audio Layer-3)
Zur Zeit ist MP3 das beste Verfahren um Sounddateien zu komprimieren.
Dieses Verfahren wurde am Fraunhofer Institut für Integrierte
Schaltungen (IIS) in Erlangen entwickelt.
Die oben angeführte Datei ist nach der Komprimierung nur noch 50 KB
groß - bei 96 kbps, mono, 44 kHz. Wie stark man komprimieren kann,
hängt nicht nur vom eigenen Empfinden ab, sondern auch von der Datei
selber. Manche Dateien lassen sich sogar bis 16 kbps mit nur leichten
Klangeinbußen transformieren (die oben angeführte Datei wäre dann nur
mehr 25 KB groß). Ein gutes Soundprogramm lässt auch
Komprimierungen mit variabler Bitrate zu. Dabei wird die Originaldatei
genau analysiert, bevor für jeden einzelnen Abschnitt die Bitrate
festgelegt wird.
WaveLab: MP3 Encodierung
Wenn man von Downloadgeschwindigkeiten abhängig ist, muss man bei
jeder einzelnen Sounddatei testen, wie stark die Komprimierungsrate
sein kann.
E. Grasegger, 2002
Seite 8
Die Gitarre – Verwendung von Sounddateien im Web
Beschreibung des Produkts
Mindestanforderungen zum Betrachten der Site:
Auflösung: 1024x768
Auf fast jeder Seite werden nicht nur Text, sondern auch Fotos und SoundLinks verwendet. Also ist eine möglichst hohe Auflösung sinnvoll (z.B.
1280x1024 Punkte), damit man nicht immer mit Scrollbalken arbeiten muss.
In den meisten Schulen gibt es zur Zeit aber kaum 19“ Monitore.
Deshalb wählte ich für die WebSite eine Auflösung von 1024x768 Punkte.
Internet Browser
IE 5.0 oder höher
Mit diesem Browser wurde die Site getestet. Bei Netscape kann es zu
Formatierungsfehlern kommen. Beide unterstützen Flash (ActiveX
Steuerelemente für Windows bzw. Flash-Plug-In für Netscape), sowie
JavaScripts.
Aufbau der WebSite
Die dreiteilige Gestaltung ermöglicht es , links die Navigation und rechts einen
Site-Titel zu verwenden. Im mittleren Frame ist fast die gesamte Höhe für die
tatsächlichen Inhalte verwendbar. Dies ist deshalb notwendig, da außer Textinfos
auch Bilder verwendet werden.
Die Aufbau der Site soll nicht verwirren. Es gibt keine animierten GIF-Bilder. Die
Anzahl der Grundfarben beschränkt sich auf drei: blau, gelb und grau als
Hintergrundfarbe. Die schwarze Schrift wird nicht als eigene Farbe empfunden.
E. Grasegger, 2002
Seite 9
Die Gitarre – Verwendung von Sounddateien im Web
Alle Hauptseiten sind durch die Navigation im linken Frame erreichbar. Hyperlinks,
die von den Hauptseiten weiterführen, können auch über das Glossar erreicht
werden. Diese Seiten sind als vertiefende Information gedacht.
Left Frame
Link: Verwendung
Hauptframe
Informationsseite
Link: Flamenco
Verwendung
Link: Glossar
Seite Glossar
Link: Flamenco
Es sind nur wenige Begriffe pro Seite verlinkt, um die Konzentration des Benutzers
auf das Wesentliche zu lenken.
E. Grasegger, 2002
Seite 10
Die Gitarre – Verwendung von Sounddateien im Web
Verwendung von Sounddateien
Hyperlinks zu MP3-Dateien:
Hyperlinks auf Sounddateien
Werden Sounddateien über normale Links aufgerufen, so erscheint zuerst die
Aufforderung die Datei vom aktuellen Ort zu öffnen bzw. herunterzuladen.
Beim Abspielen von Sounds wird er Player geöffnet
Entscheidet man sich für <öffnen>, so wird der auf dem jeweiligen Gerät installierte
Player mit der Datei geöffnet.
E. Grasegger, 2002
Seite 11
Die Gitarre – Verwendung von Sounddateien im Web
Nachteil dieses Verfahrens ist die Anzahl der Mausklicks, bis man wieder in der
Ausgangssituation ist. Wenn kein Player für MP3 installiert ist, so kann man auch die
Sounds nicht hören.
Aufruf von Sounddateien über JavaScript
<html>
<head>
<script language="javascript">
function playsound(datei){
location.href=datei;
}
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<input type="button" value="E-Gitarre" onClick="javascript:playsound('mp3/git-42.mp3')">
</P>
</body>
</html>
Bei dieser Methode wird ein Button erzeugt. Durch Klicken auf diese Schaltfläche
wird die Funktion Playsound, die im Head definiert wird, aufgerufen. Die Funktion
spielt den Sound mit dem am PC installierten Player ab.
Es gibt dieselben Nachteile wie beim direkten Link.
Vorteil: es steht eine Schaltfläche zur Verfügung.
Sounds über Flash-Filme abspielen
Eine weitere Methode, Musikbeispiele im Web zu integrieren, ist das Erstellen eines
Flash-Films.
Zum Unterschied von den vorher erwähnten Methoden wird die Musik ohne einen
sichtbaren Player gespielt.
E. Grasegger, 2002
Seite 12
Die Gitarre – Verwendung von Sounddateien im Web
Verzichtet man auf Steuerungsmöglichkeiten (play, stop, ...), so genügt es, nur die
Sounddatei abspielen zu lassen.
Der Sound fängt allerdings sofort beim Betreten der Internetseite, wenn genug Daten
geladen sind, zu spielen an. Das verwendet man nur bei Hintergrundsounds.
Einbau von Steuerungsmöglichkeiten
Sinnvoll für mein Vorhaben ist aber die Möglichkeit, den Beginn des Abspielens
durch Mausklick zu bestimmen. Dazu müssen in Flash Schaltflächen erstellt werden.
Der Film wird dadurch natürlich größer, was sich nicht positiv auf die
Downloadgeschwindigkeit auswirkt. Eine HTML-Seite wird immer mit der gesamten
Flash-Datei geladen.
Button und Sound in Flash
Nachladen von Sounds in Flash
Aufgrund dieser Erkenntnis habe ich den Soundbutton in einen eigenen Film gestellt.
Diese Datei ist ca. 0,6 KB groß (besser gesagt klein). So ist es möglich mehrere
Soundbuttons auf eine Internetseite zu stellen, ohne den Betrachter mit
unzumutbaren Wartezeiten zu konfrontieren.
Mit diesem Flash-Film wird bei Bedarf die tatsächliche Sounddatei nachgeladen.
Eine Sounddatei ist bis 65 KB groß.
E. Grasegger, 2002
Seite 13
Die Gitarre – Verwendung von Sounddateien im Web
Skript zum Laden eines Flash-Films
Sounds über Javascript kombiniert mit Flash einbinden
Bei meinen Recherchen im Internet bin ich auf diese Möglichkeit gestoßen, die ich
für folgendes Problem verwendet habe:
Bei manchen Textstellen ist es notwendig, durch Anklicken ein Musikbeispiel
abzuspielen.
Die Hyperlinks auf E, A, D, G rufen über JavaScript den Flash-Sound auf
Die Verwendung eines gewöhnlichen Hyperlinks scheidet aus oben genannten
Gründen aus. Ein Flash-Film lässt sich kaum mitten in einen Text integrieren. Es
gäbe nur mehr die Möglichkeit, den ganzen Text in einer Flash-Datei zu schreiben.
Die Folge wäre eine riesige Datei.
E. Grasegger, 2002
Seite 14
Die Gitarre – Verwendung von Sounddateien im Web
Die Lösung fand ich im Internet unter http://sonify.org/flashsound/.
Ich erstellte einen Flash-Film mit Start-Marken eines Sounds.
Die Datei wird mit JavaScript am Ende der HTML-Seite geladen und durch
Mausklick, z.B. auf den Saitennamen E, abgespielt.
<script src="../JS/flashsound.js"></script>
<script>
var mysound1 = new FlashSound( );
</script>
...
...
<a href="javascript://" onClick = "mysound1.TGotoAndPlay('/BassA','start'); return false">
...
...
<script language="JavaScript">
mysound1.embedSWF("SoundGit/gf001eb2.swf");
</script>
Mit den letzten beiden Varianten der Soundeinbindung glaube ich, gute
Möglichkeiten für mein Web gefunden zu haben.
Schlussbemerkungen
Während der Arbeit an diesem Projekt habe ich viele neue Erfahrungen gemacht.
Das Arbeiten mit einem HTML-Editor wie Frontpage oder Dreamweaver ist relativ
einfach und wahrscheinlich einigen bekannt. Ich nehme auch an, dass viele schon
mit Fotos und einem Bildbearbeitungsprogramm gearbeitet haben, mit Sounds aber
weniger. Deshalb bin ich auf diesen Punkt näher eingegangen. Die Einbindung von
Musik in ein Web war für mich eine Herausforderung, ich hatte vorher keine Ahnung
von HTML-Codes oder JavaScript.
Diese Arbeit kann im Testtool verbessert werden. Hot Potatoes bietet nur wenige
Möglichkeiten der Gestaltung. Es ist sinnvoll, für die Erstellung eines
Auswertungstests einen Programmierer hinzuzuziehen.
E. Grasegger, 2002
Seite 15
Die Gitarre – Verwendung von Sounddateien im Web
Anhang
Literatur
Musikliteratur
---
Musikinstrumente der Welt
Signa Verlag, Berlin 1997 (in
Lizenz)
Baines, Anthony
Lexikon der Musikinstrumente
Bärenreiter 1996
Michels, Ulrich
Dtv-Atlas zur Musik, Band 1
Deutscher Taschenbuchverlag,
München 1977
Pape, Winfried
Instrumentenhandbuch
Musikverlag Hans Gerig, Köln 1971
Schulz, Georg Friedrich
Alte Musikinstrumente
Schuler Verlagsgesellschaft,
München 1973
Stauder, Dr. Wilhelm
Taschenbuch der Musikinstrumente
Humboldt-Taschenbuchverlag,
1963
Valentin, Erich
Handbuch der Instrumentenkunde
Gustav Bosse Verlag, Regensburg
1954
Weissgärber, Max
Kleines Handbuch der Musik
Humboldt Verlag, Wien1948
Interessante Musiklinks:
http://www.musica.at/
http://www.musiklehre.at/musikl.htm
http://www.music-journal.com/
Internetadressen für Flash:
http://www.flashworker.de/
http://sonify.org/flashsound/
Unterstützende Personen
Wolfgang Hinteregger, Gitarre
Johann Wallisch, Akustikgitarren mit Stahlsaiten
Frank Folgmann, E-Gitarre
Horst Sonntagbauer, E-Bass
Richard Pöcksteiner, Aufnahme
E. Grasegger, 2002
Seite 16