Yahoo! Interfaz de usuario de blog (YUIBlog)

Mejora de YUI aplicaciones basadas en con audio

El sonido es uno de los sentidos más importantes y una parte importante de la vida cotidiana, y sin embargo, es ignorado en gran medida en la web. Los desarrolladores web saben que cuando se trata de HTML, el audio no es tan fácil de añadir a un sitio web, como debe ser. ¿Por qué es eso? Las siguientes son algunas reflexiones sobre los problemas históricos con el sonido que encaja, algunas ideas y algunos demos de integración y control de sonido desde el Javascript con YUI.

Demos

Si eres como yo, es probable que quieran ver algo divertido por adelantado ya que la lectura es un trabajo, y el trabajo es aburrido! ;) No dude en jugar con las demos y luego sigue leyendo para conocer los detalles.

• Demo 1 (práctico): Escuchar MP3 Enlaces en línea
• Demo 2 (diversión): Un ruidoso DOM

Una breve historia de HTML y "Multimedia"

La web es bastante bueno en la presentación visual. Es fácil de crear, diseñar e integrar imágenes, texto y enlaces en documentos HTML. De los formatos de medios compatibles de forma nativa hoy en HTML 4, audio y video - o más bien, <audio> y <video> - son notoriamente ausente.

HTML 5 debe traer de audio y vídeo incrustar más cerca de la simplicidad de <img /> en un futuro no muy lejano. Mientras tanto, tenemos que recurrir a la creatividad rodeos hasta llegar HTML-5-como audio / vídeo a través de la funcionalidad de la gama de navegadores más habituales de hoy en día HTML 4 de apoyo.

El problema (HTML 4) Con incrustación de audio

Para el audio en la web hoy en día los sitios, los desarrolladores suelen mostrar una lista de enlaces HTML directamente en archivos MP3. Este método es simple, universalmente entendida e indexados por los motores de búsqueda, pero es una experiencia de navegación confusa e inconsistente de forma predeterminada.

Los usuarios son por lo general le pide que haga clic derecho, "guardar como" y, finalmente, abrir el archivo desde su escritorio, o haga clic en el enlace y tener el navegador descargue y abra el archivo MP3. El regulares "clic" generalmente se abre en una nueva página con el reproductor incrustado o lanza una aplicación externa como QuickTime o Windows Media Player.

No sólo se "desnuda" enlaces MP3 trabajo extra y confuso para el usuario, el método del navegador de manejo de ellos es una distracción y se los lleva de la experiencia de su sitio.

Usando <object> / <embed> es otra forma genérica para integrar el contenido directamente de MP3 u otro, pero una vez más sufre el problema de la inconsistencia, el desarrollador no se sabe lo que puede mostrar en esa zona de la página web, dado que el usuario puede tiene gran variedad de aplicaciones que puede cargar para manejar ese tipo de archivo - en este caso, probablemente el mismo QuickTime o Windows Media Player, que se ocuparía de descargas directas que se muestra en el lugar de tu página. Una vez más, no es una gran solución.

reproductores Flash se utiliza a veces como una solución para incrustar el contenido de MP3, pero la interfaz de usuario y pieles tienden a ser 100% basado en Flash en lugar de HTML y CSS basado en y por lo tanto son más difíciles para la mayoría de los desarrolladores web para personalizar. HTML 5 debe cambiar esto con audio basado en estándares, CSS personalizable y secuencias de comandos o elementos de vídeo.

Mientras tanto, algunas soluciones creativas se pueden utilizar para conseguir más "amigable para desarrolladores web," reproductores de audio.

Hacer MP3 Enlaces "sólo trabajo": YUI + SoundManager 2

Para que "progresivamente mejorada" enlaces a archivos MP3 que se reproducirá en el lugar cuando se hace clic, algo que debe interceptar la acción del navegador descarga normal y, posteriormente, gestionar la solicitud, mediante la combinación de JavaScript y Flash para manejar la carga y reproducción de archivos MP3, esto puede hacerse de manera muy eficaz.

En una búsqueda personal para obtener el control de audio multi-navegador para un juego de DHTML en 2002, he desarrollado un sistema de audio JS + Flash API denominada SoundManager. Después de haber evolucionado para incluir el vídeo, SoundManager dos instrumentos y se extiende sonido nativo de la API de Flash y lo expone a Javascript. El resultado es cross-browser/platform guión funcionalidad de audio que puede ayudar a cerrar la brecha para un sonido JS impulsado hasta el HTML 5 con un amplio apoyo.

Mediante la combinación de SoundManager 2 con YUI DOM y eventos públicos, que tienen una solución eficaz para la integración y el control de audio que pueden degradar con gracia a una descarga del navegador o el reproductor incrustado.

Ejemplo práctico: Jugable MP3 Enlaces

La demostración siguiente se utiliza YUI y SoundManager 2 a reforzar los vínculos MP3, haciéndolos jugar en línea. servicios públicos de YUI caso interceptar los clics en los enlaces que apuntan a los archivos MP3 y luego utilizar la API de SoundManager para cargar y reproducir la dirección correspondiente antes de volver "falsa", y evitar que el navegador carga el enlace. clics subsiguientes alternar reproducción / estado de pausa.

En el caso de Javascript / Flash no está presente o si algo más va mal, el navegador simplemente se caen a través de la carga y el enlace MP3 como de costumbre.

• Demo 1 (práctico): Escuchar MP3 Enlaces en línea

Agregando audio a tu interfaz de usuario

animación basado en Javascript, efectos de transición y el movimiento añadir fluidez para diseñar la interfaz web y se están volviendo más comunes. de audio con elegancia-aplicada puede complementar y mejorar aún más la interfaz de usuario, haciendo la experiencia más significativa.

En algunas aplicaciones, el sonido en forma de comentarios de interfaz de usuario puede ser apropiado y útil para la experiencia del usuario. Los efectos de sonido son comunes para los sitios basados en Flash y los juegos basados en la web, y en el sonido de los juegos de escritorio suele ser una parte fundamental de contar la historia.

.. Pero no sobre-Do It

Es importante saber cuándo parar. Recordemos animada "en construcción". GIF? ¿Qué hay de la etiqueta blink? Marquesina de texto? Algunas cosas es mejor dejarlas solas. No todas las páginas HTML necesita moverse, parpadear, diapositivas, flash y mucho ruido, al mismo tiempo, e incluso "divertido" se aplica mejor en la moderación. Molesta a los usuarios con música auto-reproducción o el ruido puede conducir rápidamente al abandono de su sitio.

Probablemente hay una buena razón de que los elementos estándar de HTML como controles de formulario y similares no tienen efectos de sonido o notificaciones relacionadas con ellos. Tal vez "el silencio es oro" y lo mejor es que la web sea un lugar tranquilo por defecto, para no ser molesto y perturbador.

Como una notable excepción a la "Web silenciosa" el tema, Internet Explorer suele hacer un "clic" cuando la navegación de página se produce, presumiblemente para notificar al usuario que una acción se ha iniciado. Esto se ha convertido más moderada en los últimos tiempos, pero todavía está presente y todavía parece molestar a algunos usuarios de este día.

"Diversión" Ejemplo: Un ruidoso DOM

A pesar de los argumentos para el silencio, el siguiente es un ejemplo de lo que podría ser como tener "mucho ruido" elementos de formulario, botones y elementos DOM que proporcionan retroalimentación acústica, ya que están siendo usados. La novedad es, sin duda a desaparecer rápidamente, pero añade un elemento de diversión infantil de la interfaz de usuario.

• Demo 2 (diversión): Un ruidoso DOM

Mirando hacia el futuro: HTML 5

Nativo <audio> y apoyo <video> significa que será mucho más fácil de integrar y controlar con más formatos de medios dentro del navegador sin tener que depender de plugins de terceros. Además, una extensa API Javascript debe animar a los desarrolladores crear experiencias cada vez más innovadoras.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg él! | reddit!