Interface utilisateur Blog Yahoo! (YUIBlog)

YUI à base Amélioration des applications avec audio

Le son est l'un des sens importants et une grande partie de la vie quotidienne, et qui est pourtant largement ignorée sur le web. Les développeurs Web sais que quand il s'agit de HTML, audio n'est pas aussi facile d'ajouter à un site web comme il se doit. Pourquoi est-ce? Voici quelques réflexions sur les problèmes historiques avec son enrobage, quelques idées et quelques démos de son intégration et le contrôle de Javascript avec YUI.

Demos

Si vous êtes comme moi, vous êtes probablement désireux de voir des choses amusantes à l'avance car la lecture est un travail, et le travail est ennuyeux! ;) N'hésitez pas à jouer avec les premières démos, puis lisez la suite pour les détails.

• Démonstration 1 (pratique): Lecture de fichiers MP3 en ligne Liens
• Demo 2 (amusant): A Noisy DOM

Une brève histoire du HTML et "Multimédia"

Le web est très bon lors de la présentation visuelle. Il est facile de créer, concevoir et intégrer des images, du texte et des liens dans les documents HTML. Parmi les formats de médias supportés nativement aujourd'hui dans le HTML 4, audio et vidéo - ou plutôt, <audio> et <video> - sont manifestement absents.

HTML 5 devrait apporter audio et vidéo intégration plus étroite à la simplicité de /> <img dans un avenir pas si lointain. Dans l'intervalle, nous devons recourir à des créatifs de contournement pour obtenir HTML-5-comme la fonctionnalité audio / vidéo toute la gamme des navigateurs d'aujourd'hui HTML 4-commune à l'appui.

Le problème (HTML 4) Avec Enrobage Audio

Pour l'audio sur les sites Internet d'aujourd'hui, les développeurs font souvent preuve d'une liste de liens HTML directement dans des fichiers MP3. Cette méthode est simple, universellement compris et indexables par les moteurs de recherche, mais permet une expérience de navigation confus et contradictoire par défaut.

Les utilisateurs sont généralement invité à un clic droit, "enregistrer sous" et enfin ouvrir le fichier à partir de leur bureau, ou cliquez sur le lien et télécharger le navigateur et ouvrez le fichier MP3. Le réguliers "clic" ouvre généralement dans une nouvelle page avec le lecteur intégré ou le lancement d'une application externe comme QuickTime ou Windows Media Player.

Non seulement "nu" liens MP3 travail supplémentaire et source de confusion pour l'utilisateur, la méthode du navigateur de les traiter est une distraction et les éloigne de l'expérience de votre site.

Utilisation <object> / embed est un autre moyen générique de contenu MP3 ou d'autres directement intégrer, mais souffre encore du problème de l'incohérence, le développeur ne sais pas ce que peut voir dans cette zone de la page Web, étant donné que l'utilisateur pourrait Pour toute gamme d'applications qui peuvent charger pour gérer ce type de fichier - dans ce cas, probablement le même QuickTime ou Windows Media Player qui gérer les téléchargements directs serait représenté en place dans votre page. Encore une fois, pas une bonne solution.

widgets Flash sont parfois utilisés comme une solution pour intégrer du contenu MP3, mais l'interface utilisateur et les peaux ont tendance à être 100% à base de Flash plutôt que HTML et CSS et sont donc plus difficile pour la plupart des développeurs web à personnaliser. HTML 5 devrait changer cela avec audio basés sur les standards, CSS-skinnable et scriptable / éléments vidéo.

Dans l'intervalle, des solutions créatives peuvent être utilisées pour obtenir plus de "développeur web-friendly" widgets pour l'audio.

Faire MP3 Liens "tout simplement": YUI + SoundManager 2

Pour avoir "progressivement amélioré par" des liens vers des fichiers MP3 qui joueront en place lorsque vous cliquez dessus, quelque chose doit intercepter l'action du navigateur téléchargement normal et ensuite traiter la demande; en combinant le Javascript et Flash pour gérer le chargement et la lecture des fichiers MP3, ce qui peut être très efficaces.

Dans une quête personnelle pour obtenir le contrôle multi-navigateur audio pour un jeu DHTML en 2002, j'ai développé un audio JS + Flash API appelée SoundManager. Après avoir évolué à la vidéo, SoundManager 2 met en oeuvre et étend les API native de son Flash et l'expose au Javascript. Le résultat est cross-browser/platform script des fonctionnalités audio qui peuvent aider à combler l'écart pour le son JS-entraîné jusqu'à ce que HTML 5 est largement soutenue.

En combinant SoundManager 2 avec YUI DOM et d'événements publics, vous avez une solution efficace pour l'intégration et de contrôle audio qui peuvent dégrader grâce à un navigateur ou télécharger le lecteur intégré.

Exemple pratique: Jouable MP3 Liens

La démonstration suivante utilise YUI et SoundManager 2 à renforcer les liens MP3, ce qui les rend en ligne jouable. services publics événement YUI intercepter les clics sur les liens pointant vers des fichiers MP3 et ensuite utiliser l'API SoundManager pour charger et lire l'URL pertinentes avant de retourner "false", et de prévenir le navigateur de charger le lien. Les clics suivants fera basculer play / pause.

Dans le cas où Javascript / Flash ne sont pas présents ou si quelque chose va mal ailleurs, le navigateur va tout simplement passer à travers et de la charge sur le lien MP3 comme d'habitude.

• Démonstration 1 (pratique): Lecture de fichiers MP3 en ligne Liens

Ajout d'audio à votre assurance-chômage

animation basées sur JavaScript, des effets de transition et le mouvement ajouter fluidité de concevoir l'interface web et sont de plus en plus monnaie courante. audio intelligemment appliqué peut compléter et améliorer encore l'interface utilisateur, ce qui rend l'expérience encore plus significative.

Dans certaines applications, le son sous forme de commentaires d'assurance-chômage peut être approprié et utile de l'expérience utilisateur. Les effets sonores sont communs pour les sites en flash et jeux en ligne, et en audio de jeu de bureau est généralement un élément clé de raconter l'histoire.

.. Mais pas trop-Do It

Il est important de savoir quand s'arrêter. Rappel d'animation "en construction". GIF? Qu'en est-il le mot-clé clignote? Marquee texte? Certaines choses sont mieux laisser seul. Non chaque page HTML doit bouger, clignoter, glisser, le flash et faire du bruit dans le même temps, et même «plaisir» est préférable de l'appliquer avec modération. Annoying vos utilisateurs avec la musique auto-jeu ou de bruit peut rapidement conduire à l'abandon de votre site.

Il ya probablement de bonnes raisons à cette norme éléments HTML tels que les contrôles de formulaire et autres n'ont pas d'effets sonores ou des notifications qui leur sont associés. Peut-être "le silence est d'or" et il vaut mieux que le web est un endroit calme, par défaut, afin de ne pas être ennuyeux et distrayant.

Comme une exception notable à la «toile silencieuse" thème, Internet Explorer fait habituellement un «clic» lors de la navigation de page se produit, sans doute pour informer l'utilisateur qu'une action a commencé. Cela est devenu plus discret ces derniers temps, mais est toujours présent et il semble en agacer certains utilisateurs à ce jour.

"Fun" Exemple: A Noisy DOM

Malgré les arguments pour le silence, ce qui suit est un exemple de ce qu'il pourrait être d'avoir "noisy" des éléments de formulaire, des boutons et des éléments DOM qui fournissent une rétroaction sonore comme ils sont utilisés. La nouveauté est certainement à se dissiper rapidement, mais elle ajoute un élément de plaisir enfantin de l'interface utilisateur.

• Demo 2 (amusant): A Noisy DOM

Regard sur l'avenir: HTML 5

Native <audio> et le soutien <video> signifie qu'il sera beaucoup plus facile d'intégrer et de contrôler plus de formats de médias dans le navigateur sans compter sur les plug-ins tiers. En outre, un vaste API Javascript devrait encourager les développeurs à créer des expériences de plus en plus innovantes.

Trouver des conversations: bloglines | technorati

Partager et prolonger: Ajouter aux Favoris del.icio.us | Digg it! | reddit!