Yahoo! User Interface Blog (YUIBlog)

Verbesserung der YUI-basierten Anwendungen mit Audio

Sound ist einer der wichtigsten Sinne und ein großer Teil des täglichen Lebens, und doch ist weitgehend auf dem Netz ignoriert. Web-Entwickler wissen, dass, wenn es um HTML geht, wird das Audiosignal nicht so einfach auf eine Website hinzufügen, wie es sein sollte. Warum ist das so? Im Folgenden sind einige Gedanken über die historischen Probleme beim Einbetten von Sound, ein paar Ideen und einige Demos der Einbettung und Kontrolle der Ton von Javascript mit YUI.

Demos

Wenn Sie wie ich sind, sind Sie wahrscheinlich zu wollen some fun stuff siehe up-front, weil das Lesen ist Arbeit, und Arbeit ist langweilig! ;) Fühlen Sie sich frei, um mit den ersten Demos spielen und dann lesen Sie weiter für die Details.

• Demo 1 (praktische): Wiedergabe von MP3 Inline-Links
• Demo 2 (fun): A Noisy DOM

Eine kurze Geschichte von HTML und "Multimedia"

Das Web ist ziemlich gut visuelle Präsentation. Es ist leicht zu entwerfen, erstellen und einbinden Bilder, Texte und Links in HTML-Dokumenten. Von den Medien-Formate nativ unterstützt heute in HTML 4, Audio und Video - oder besser gesagt, <audio> und <video> - sind auffällig fehlt.

HTML 5 soll Audio-und Video-Einbettung näher zu bringen, die Einfachheit der <img /> in nicht allzu ferner Zukunft. In der Zwischenzeit müssen wir auf kreative Arbeit Resort-Workarounds zu erhalten, HTML-5-wie Audio / Video-Funktionalität über das gesamte Spektrum der heute gängigen HTML 4-Browsern unterstützt.

Die (HTML 4) Problem beim Einbetten von Audio

Für Audio auf Websites heute, Entwickler häufig eine Liste von HTML-Links direkt auf MP3-Dateien. Diese Methode ist einfach, allgemein verständlich und lösbaren von Suchmaschinen, sondern sorgt für eine verwirrend und unzusammenhängend Browsen by default.

Benutzer sind in der Regel mit der rechten Maustaste dazu aufgefordert werden, "Ziel speichern unter" und schließlich öffnen Sie die Datei vom Desktop aus, oder klicken Sie auf den Link und haben ihre Browser herunterladen und öffnen Sie die MP3-Datei. Die regelmäßigen "Klick" öffnet in der Regel in eine neue Seite mit dem eingebetteten Player gestartet oder eine externe Anwendung wie QuickTime oder Windows Media Player.

Nicht nur die "nackten" MP3-Links zusätzliche Arbeit und verwirrend für den Benutzer des Browsers ein Verfahren zur Behandlung von ihnen ist eine Ablenkung und nimmt sie weg von den Erfahrungen Ihrer Website.

Mit <object> / <embed> ist ein weiterer allgemeiner Weise direkt einbinden MP3-oder andere Inhalte, aber auch hier leidet das Problem der Inkonsistenz, die Entwickler nicht wissen, was in diesem Bereich der Web-Seite zeigen, da kann der Benutzer auf haben zahlreiche Anwendungen, die Last, um den Dateityp verarbeiten - kann in diesem Fall wahrscheinlich die gleiche QuickTime oder Windows Media Player, die direkte Downloads handhaben wäre würde gezeigt werden, in Ihre Seite ein. Auch nicht eine große Lösung.

Flash-Widgets sind manchmal als eine Lösung für die Einbettung von MP3-Inhalten verwendet, sondern die UI und Felle sind in der Regel 100% Flash-basierte als HTML-und CSS-basiert und daher sind schwieriger für die meisten Web-Entwickler anpassen, um. HTML 5 sollten diese Normen zu ändern-basierte, CSS-Skins und skriptfähig Audio / Video-Elemente.

In der Zwischenzeit können einige kreative Lösungen verwendet werden, um mehr zu bekommen "Web-Entwickler-freundliche" Widgets für Audio.

Making MP3-Links "Just Work": YUI + SoundManager 2

Um "progressiv-enhanced" Links zu MP3s, die im Spiel-Platz wird, wenn geklickt wird, muss etwas abzufangen des Browsers normalen Download-Aktion und anschließend die Anfrage bearbeiten kann, durch die Kombination von Javascript und Flash für das Be-Griff und Abspielen von MP3-Inhalten, dies kann sehr effektiv getan.

In einem persönlichen Suche nach cross-browser bekommen Audio-Steuerung für einen DHTML-Spiel im Jahr 2002, entwickelte ich eine JS + Flash-Audio-API namens SoundManager. Nachdem seit entwickelt, um Video-, SoundManager 2 gehören die Umsetzung und Ausweitung Flash's native Sound-API und setzt ihn, Javascript. Das Ergebnis ist cross-browser/platform Skript Audio-Funktionalität, die dazu beitragen, die Lücke für JS-driven sound, bis HTML 5 überbrückt werden kann, wird allgemein unterstützt.

Durch die Kombination SoundManager 2 mit DOM YUI's und Event-Dienstprogramme, haben Sie eine effektive Lösung für die Einbettung und Steuerung von Audio, die anmutig abbauen können, um einen Browser herunterzuladen oder einen Player.

Praktisches Beispiel: Abspielbare MP3-Links

Das folgende Demo benutzt YUI und SoundManager 2 bis MP3-Links zu verbessern, so dass sie spielbar inline. YUI Ereignis Dienstprogramme abzufangen Klicks auf Links, die auf MP3-Dateien und verwenden Sie dann die SoundManager API zu laden und die entsprechende URL zu spielen, bevor er "falsch", und verhindert, dass der Browser beim Laden der Link. Nachfolgende Klicks spielen toggle / Pause-Zustand.

Für den Fall, Javascript / Flash nicht vorhanden sind oder wenn alles andere schief geht, wird der Browser einfach fallen durch und laden Sie die MP3-Link als üblich.

• Demo 1 (praktische): Wiedergabe von MP3 Inline-Links

Hinzufügen von Audio To Your UI

Javascript-basierte Animation, Übergänge und Effekte hinzufügen Bewegung Flüssigkeit auf dem Web-Interface-Design und sind immer üblicher. Auch Audio-elegant kann eine sinnvolle Ergänzung und weitere Verbesserung der Benutzeroberfläche, was die Erfahrung mehr sinnvoll.

Bei bestimmten Anwendungen kann der Schall in Form von UI Feedback angemessen und hilfreich für die User Experience. Sound-Effekte sind für gemeinsame Flash-basierte Websites und Web-basierte Spiele, und im Desktop-Gaming-Audio ist in der Regel ein wichtiger Teil erzählt die Geschichte.

.. But Don't Do It Over -

Es ist wichtig zu wissen, wann man aufhören muss. Erinnern Sie animierte "under construction". GIFs? Was ist mit den blink-Tag? Marquee Text? Manche Dinge lassen sich am besten in Ruhe gelassen. Nicht jeder HTML-Seite muss sich zu bewegen, blinken, Rutsche, Blitz und laut werden zur gleichen Zeit, auch "Spaß" wird am besten in Maßen angewendet. Lästige Ihre Nutzer mit Auto-Wiedergabe von Musik oder Lärm kann schnell dazu führen, dass Verzicht auf Ihrer Website.

Wahrscheinlich gibt es guten Grund, dass Standard-HTML-Elemente wie Formular-Steuerelemente und dergleichen nicht über Sound-Effekte oder Mitteilungen mit ihnen verbunden sind. Vielleicht "Schweigen ist Gold" und ist es am besten, dass das Internet ein ruhiger Ort standardmäßig werden, damit sie nicht als störend und ablenkend.

Als einer bemerkenswerten Ausnahme der "stillen web" Thema Internet Explorer macht in der Regel ein "Klick" ertönt, wenn Seiten-Navigation auftritt, vermutlich, um den Benutzer, eine Aktion begonnen hat, mitzuteilen. Dies hat sich zu gedämpfter in der letzten Zeit, aber immer noch vorhanden ist und scheint immer noch für einige Nutzer bis heute ärgern.

"Fun" Zum Beispiel: A Noisy DOM

Trotz der Argumente für die Stille, die nach einem Beispiel dafür, was es auch gefallen zu haben "lauten" Formular-Elemente, Buttons und DOM-Elemente, die akustische Rückmeldung geben, wie sie verwendet werden sind werden. Die Neuheit ist sicherlich zu tragen schnell ab, aber es hat ein Element von kindlichem Spaß an der Benutzeroberfläche hinzufügen.

• Demo 2 (fun): A Noisy DOM

Looking Forward: HTML 5

Native <audio> und <video> Unterstützung bedeutet, es wird viel leichter sein, einbinden und Medien-Formate Kontrolle im Browser, ohne auf Drittanbieter-Plugins. Darüber hinaus sollte eine umfangreiche Javascript API zu fördern Entwickler zunehmend zu schaffen innovativen Erfahrungen.

Finden Sie Gespräche: bloglines | technorati

Teilen und ausbauen: Bookmark with Yahoo! My Web | Bookmark bei del.icio.us | digg it! | Reddit!