HTML and CSS Reference
In-Depth Information
Das
audio
-Element drängelt jetzt noch ein wenig unmotiviert vor den Buttons herum
(Abbildung 4.38). Um es zu verstecken, verschieben Sie es per CSS nach links oben aus
dem Bildschirm heraus:
audio {
position: absolute;
top: -100px;
left: -1000px;
}
4
Jetzt wird es Zeit für JavaScript. Verknüpfen Sie zunächst die jQuery-Bibliothek mit
Ihrem HTML-Dokument:
<script src="jquery-1.7.1.min.js"></script>
Definieren Sie als Nächstes eine Variable, und weisen Sie ihr per jQuery-Selektor das
audio
-Element zu:
var klick = $('#audio')[0];
Nun müssen Sie nur noch dem Button beibringen, bei jedem Klick das Audioelement
zu starten. Dies geschieht mithilfe des entsprechenden EventHandlers:
$('button').on('click', function(){
klick.play();
});
Testen Sie Ihre App auf einem Smartphone. Bei jedem Antippen wird ein kleines
Geräusch gespielt, der Audioplayer agiert dabei im Hintergrund und ist für den Nut-
zer unsichtbar. Mit dieser Technik können Sie jedem beliebigen Element und Ereig-
nis einen passenden Ton zuweisen. Aber auch hier gilt: Verwenden Sie akustisches
Feedback sehr subtil. Zu viele Geräusche können schnell nerven. Probieren Sie ein
wenig mit verschiedenen Tönen herum, variieren Sie kurze, leise und angenehme
Geräusche.
Eine komplette Übersicht über die Verwendung von Audio und Video auf iOS-Gerä-
ten finden Sie in englischer Sprache auf:
http://developer.apple.com/library/safari/#
documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/
Introduction.html
Search WWH ::
Custom Search