Yahoo! Blog User Interface (YUIBlog)

YUI-se Aprimorando Aplicativos Com Áudio

O som é um dos principais sentidos e uma grande parte da vida diária, e ainda é praticamente ignorado na web. Os desenvolvedores da Web sabe que quando se trata de HTML, o áudio não é tão fácil de adicionar a um site como deve ser. Por que isso? A seguir estão algumas reflexões sobre os problemas históricos com a incorporação de som, algumas idéias e algumas demos de embutir e controlar o som do Javascript com YUI.

Demos

Se você é como eu, provavelmente você está querendo ver algumas coisas divertidas up-front porque a leitura é um trabalho, eo trabalho é chato! ;) Sinta-se livre para brincar com as primeiras demos e depois para ler sobre os detalhes.

• Demo 1 (prático): Executar MP3 Links Inline
• Demo 2 (divertido): A DOM Noisy

Uma Breve História do HTML ea "Multimedia"

A web é muito bom na apresentação visual. É fácil de criar, projetar e incorporar imagens, texto e links em documentos HTML. Dos formatos de mídia suportados nativamente hoje em HTML 4, áudio e vídeo - ou melhor, <audio> e <video> - são conspicuamente ausente.

HTML 5 deve trazer de áudio e vídeo incorporação mais perto da simplicidade de /> <img em um futuro não tão distante. Entretanto, temos que recorrer à criatividade como contorná-las para obter HTML-5-como a funcionalidade de áudio / vídeo em toda a gama de navegadores comuns, hoje, o HTML 4-sustentável.

O Problema do HTML (4) com a incorporação de áudio

Para o áudio em sites de hoje, os desenvolvedores costumam exibir uma lista de links HTML diretamente para arquivos MP3. Este método é simples e universalmente compreendidos e indexáveis pelos motores de busca, mas contribui para uma experiência de navegação confusa e inconsistente por padrão.

Usuários são geralmente solicitado a clicar com o botão direito, "salvar como" e, finalmente, abrir o arquivo do seu desktop, ou clique no link e baixar o navegador e abra o arquivo MP3. O "clique" regular normalmente abre em uma nova página com o player embutido ou lança um aplicativo externo como o QuickTime ou o Windows Media Player.

Não são apenas "naked" links MP3 trabalho extra e confuso para o usuário, o método do navegador de lidar com eles é uma distração e leva-los a partir da experiência do seu site.

Usando <object> / <embed> é uma outra maneira genérica para inserir conteúdo diretamente de MP3 ou outros, mas mais uma vez sofre com o problema de inconsistência, o desenvolvedor não sabe o que pode mostrar em que área da página web, uma vez que o usuário pode tem alguma variedade de aplicações que podem ser carregados para lidar com esse tipo de arquivo - nesse caso, provavelmente o mesmo do QuickTime ou Windows Media Player que iria lidar com downloads diretos seriam mostrados no local na sua página. Novamente, não é uma solução ótima.

Flash widgets são usados às vezes como uma solução para incorporação de conteúdo MP3, mas a interface do usuário e peles tendem a ser 100% baseada em Flash, em vez de HTML e CSS baseado e, portanto, são mais difíceis para a maioria dos desenvolvedores web para personalizar. HTML 5 deve alterar esta com áudio baseada em padrões, CSS skinnable e scripts / elementos de vídeo.

Entretanto, algumas soluções criativas podem ser usadas para obter mais "desenvolvedor web-friendly" widgets para o áudio.

Fazendo MP3 Links "Just Trabalho": SoundManager YUI + 2

Para que "progressivamente avançada" links para MP3 que jogarão no local, quando clicado, algo deve interceptar a ação do navegador download normal e, posteriormente, lidar com o pedido; combinando Javascript e Flash para lidar com o carregamento ea reprodução de conteúdo MP3, isso pode ser feito de forma muito eficaz.

Em uma busca pessoal para obter cross-browser controle de áudio para um jogo de DHTML para trás em 2002, eu desenvolvi um áudio JS + Flash API chamada SoundManager. Tendo já evoluiu para incluir vídeo, SoundManager 2 implementa e amplia nativas do Flash som API e expõe a Javascript. O resultado é cross-browser/platform roteiro funcionalidade de áudio que pode ajudar a colmatar o fosso para o som JS orientado até o HTML 5 é amplamente apoiada.

Ao combinar SoundManager 2 com YUI DOM e eventos de utilidade pública, você tem uma solução eficaz para a incorporação e controle de áudio que pode degradar graciosamente para o download do navegador ou player incorporado.

Exemplo prático: Playable MP3 Links

A demonstração a seguir usa YUI e SoundManager 2 a reforçar as ligações MP3, tornando-inline jogável. utilitários YUI evento interceptar cliques em links que apontam para arquivos MP3 e depois usar a API SoundManager para carregar e jogar o URL relevante antes de retornar "false", e impedir que o navegador carregar o link. Cliques subseqüentes irá mudar play / pause estado.

Em caso de JavaScript / Flash não estão presentes ou se alguma coisa der errado, o navegador irá simplesmente cair e carregar no link MP3, como de costume.

• Demo 1 (prático): Executar MP3 Links Inline

A adicionar UI

animação baseado em JavaScript, efeitos de transição e movimento acrescentar fluidez ao design de interface web e estão se tornando mais comuns. Inteligentemente áudio-aplicado pode complementar e reforçar ainda mais a interface do usuário, tornando a experiência mais significativa.

Em certas aplicações, o som na forma de feedback da interface do usuário pode ser adequada e útil para a experiência do usuário. Os efeitos sonoros são comuns nos sites em Flash e jogos baseados em web-based, e em áudio para jogos de mesa normalmente é uma parte fundamental de contar a história.

.. Mas não mais de fazê-lo

É importante saber quando parar. Lembre-se de animação "em construção". GIFs? Como sobre a tag blink? Marquee texto? Algumas coisas são melhores deixadas sozinhas. Nem toda página HTML precisa mover-se, piscar, slide, flash e ser ruidoso, ao mesmo tempo, mesmo o "divertimento" é melhor aplicado com moderação. Angustiante seus usuários jogar com auto-música ou ruído pode levar rapidamente ao abandono de seu site.

Não há provavelmente uma boa razão de que os elementos HTML padrão, como controles de formulário e similares não têm efeitos sonoros ou notificações a eles associados. Talvez "o silêncio é de ouro" e é melhor que a web seja um lugar tranquilo, por padrão, de modo a não ser irritante e perturbador.

Como uma notável exceção para o "silêncio web" é o tema, o Internet Explorer normalmente faz um som "click" quando a navegação de página ocorre, provavelmente para avisar ao usuário que uma ação foi iniciada. Isto tornou-se mais comedido nos últimos tempos, mas ainda está presente, e ainda parece incomodar alguns usuários para este dia.

"Fun" Exemplo: Um DOM Noisy

Apesar dos argumentos para o silêncio, o seguinte é um exemplo do que pode ser gostaria de ter "barulhento" elementos de formulário, os botões e elementos DOM que fornecem feedback audível como eles estão sendo usados. A novidade é certamente a se desgastar rapidamente, mas adiciona um elemento de diversão infantil para a interface do usuário.

• Demo 2 (divertido): A DOM Noisy

Olhando para o futuro: HTML 5

Native <audio> e apoio <video> vai significar que será muito mais fácil de inserir e controlar mais formatos de mídia dentro do navegador, sem depender de plugins de terceiros. Além disso, uma extensa API Javascript deve estimular os desenvolvedores a criar experiências cada vez mais inovadoras.

Pesquisar conversas: Bloglines | technorati

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!