Yahoo! User Interface Blog (YUIBlog)

Verbesserung der YUI-basierte Anwendungen mit Audio

Der Klang ist einer der wichtigsten Sinne und ein großer Teil des täglichen Lebens, und doch ist weitgehend auf das Internet ignoriert. Web-Entwickler wissen, dass, wenn es um HTML geht, Audio ist nicht so leicht zu einer Website hinzufügen, wie es sein sollte. Woran liegt das? Im Folgenden werden einige Gedanken über die historischen Probleme mit Einbettung Sound, ein paar Ideen und einige Demos der Einbettung und Steuerung Sound von Javascript mit YUI.

Demos

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

• Demo 1 (praktische): Play mp3-Links Inline
• Demo 2 (Spaß): Eine laute DOM

Eine kurze Geschichte von HTML und "Multimedia"

Das Web ist ziemlich gut visuelle Präsentation. Es ist leicht zu erstellen, Design und betten 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 auffallend fehlt.

HTML 5 soll zu bringen Audio-und Video-Einbettung näher an die Einfachheit <img /> in der nicht allzu fernen Zukunft. In der Zwischenzeit haben wir uns auf kreative Workarounds Rückgriff auf HTML-5-wie Audio / Video-Funktionalität über das gesamte Spektrum der heute üblichen HTML 4-unterstützende Browser zu bekommen.

Die (HTML 4) Problem mit Embedding Audio

Für Audio auf Websites heute, Entwickler häufig eine Liste von HTML-Links direkt auf MP3-Dateien. Diese Methode ist einfach und universell verstanden und Wendeplatten von Suchmaschinen, sondern sorgt für eine verwirrende und inkonsistente Surferlebnis standardmäßig.

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

Nicht nur die "nackten" MP3 Links zusätzliche Arbeit und verwirrend für den Benutzer, wird der Browser die Methode der Umgang mit ihnen eine Ablenkung und bringt sie weg von den Erfahrungen Ihrer Website.

Mit <object> / <embed> ist ein weiterer allgemeiner Weise die direkte Einbettung 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 der Benutzer könnte haben Palette von Anwendungen, die Last, um diesen Dateityp umgehen kann - in diesem Fall würde wahrscheinlich den gleichen QuickTime oder Windows Media Player, die direkten Downloads behandeln würde an Ort und Stelle in Ihrer Seite angezeigt werden. Auch nicht eine große Lösung.

Flash-Widgets werden manchmal als eine Lösung für die Einbettung von MP3-Inhalten verwendet, aber die UI und Felle neigen zu 100% Flash-basierte als HTML-und CSS-basierte und somit schwieriger für die meisten Web-Entwickler anpassen. HTML 5 soll dies mit auf Standards basierenden, CSS-Design anpassbares und skriptfähige Audio / Video-Elemente ändern.

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

Erstellen von MP3-Links "einfach funktionieren": YUI + SoundManager 2

Um "progressiv-enhanced" Links zu MP3s, die in-place, wenn darauf geklickt, was muss der Browser die normale Download-Aktion abfangen und anschließend die Anforderung verarbeiten spielen wird; durch die Kombination von Javascript und Flash, um die Be-Griff und das Abspielen von MP3-Inhalten, kann dies sehr effektiv durchgeführt werden.

In einem persönlichen Suche nach Cross-Browser-Audio-Steuerung für einen DHTML-Spiel im Jahr 2002 erhalten, entwickelte ich ein JS + Flash-Audio-API namens SoundManager. Nachdem seit entwickelt, um Video enthalten, SoundManager 2 implementiert und erweitert die native Flash-Sound-API und setzt ihn, Javascript. Das Ergebnis ist cross-browser/platform scripted Audio-Funktionen, die helfen, die Lücke für JS-driven Sound, bis HTML 5 ist breit abgestützt Brücke kann.

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

Praktisches Beispiel: Spielbar mp3-Links

Die folgenden Demo benutzt YUI und SoundManager 2 bis MP3 Links zu erhöhen, so dass sie spielbar inline. YUI-Event Utilities abzufangen Klicks auf Links, die auf MP3-Dateien und verwenden Sie dann die SoundManager API zu laden und zu spielen die entsprechende URL, bevor er "falsch" und verhindern, dass der Browser beim Laden der Link. Nachfolgende Klicks wechseln Play / Pause-Zustand.

Für den Fall, Javascript / Flash nicht vorhanden sind oder wenn etwas anderes schief geht, wird der Browser einfach fallen durch und laden Sie die MP3 Link as usual.

• Demo 1 (praktische): Play mp3-Links Inline

Hinzufügen von Audio To Your UI

Javascript-basierte Animation, Übergangs-und Motion-Effekte hinzufügen Fluidität Web-Interface-Design und sind immer an der Tagesordnung. Clever-Anwendung Audio ergänzen und weitere Verbesserung der Benutzeroberfläche, was die Erfahrung sinnvoller.

In bestimmten Anwendungen kann Klang in Form von UI Feedback angemessen und hilfreich für den Anwender. Die Soundeffekte sind für Flash-basierte Websites und Web-basierte Spiele gemeinsam und in Desktop-Gaming-Audio ist in der Regel ein wesentlicher Bestandteil des Erzählens.

.. Aber nicht über-Do It

Es ist wichtig zu wissen, wann man aufhören muss. Recall animierte "under construction". GIFs? Wie wäre es mit dem blink-Tag? Marquee Text? Manche Dinge lassen sich am besten in Ruhe gelassen. Nicht jeder HTML-Seite muss, blink, Rutsche, flash bewegen und laut sein gleichzeitig, auch "Spaß" ist am besten in Maßen angewendet. Lästige Ihre Benutzer mit Auto-Wiedergabe von Musik oder Lärm kann schnell zu Verzicht auf Ihrer Website führen.

Es gibt wohl gute Gründe, die Standard-HTML-Elemente wie Formular-Steuerelemente und dergleichen haben keine Soundeffekte oder Benachrichtigungen mit ihnen verbunden sind. Vielleicht "Schweigen ist Gold" und es ist am besten, dass das Web ein ruhiger Ort standardmäßig werden, damit sie nicht lästig sein und ablenkend.

Als eine bemerkenswerte Ausnahme von der "stillen web" Thema, Internet Explorer in der Regel macht ein "Klick" ertönt, wenn Seitennavigation auftritt, vermutlich, um den Benutzer, dass eine Aktion gestartet wurde benachrichtigt. Dies hat sich gedämpfter in der letzten Zeit, ist aber noch vorhanden und scheint immer noch einige User bis zum heutigen Tag ärgern.

"Fun" Beispiel: Eine laute DOM

Trotz der Argumente für das Schweigen, wird das folgende Beispiel zeigt, wie es aussehen könnte, um "laut" Formular-Elemente, Buttons und DOM-Elemente, die akustische Rückmeldung geben, wie sie benutzt werden können. Die Neuheit ist sicherlich zu tragen schnell ab, aber es ist ein Element der kindlichen Spaß an der Benutzeroberfläche hinzuzufügen.

• Demo 2 (Spaß): Eine laute DOM

Looking Forward: HTML 5

Einheimische <audio> und <video> Unterstützung bedeutet, es wird viel einfacher einbetten und steuern mehr Medien-Formate im Browser, ohne auf Drittanbieter-Plugins. Darüber hinaus sollte eine umfangreiche Javascript API Entwickler zu ermutigen, immer-innovative Erfahrungen zu schaffen.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!