Inizio Blog User Interface (YUIBlog)

YUI-based Applications Migliorare Con Audio

Il suono è uno dei sensi più importanti e una parte importante della vita quotidiana, e tuttavia è in gran parte ignorato sul web. Gli sviluppatori Web sanno che quando si tratta di HTML, l'audio non è così facile per aggiungere ad un sito web come dovrebbe essere. Perché è così? Di seguito sono riportate alcune riflessioni sui problemi storici con il suono di incorporamento, alcune idee e alcune demo di inserimento e controllo del suono da Javascript con YUI.

Demos

Se siete come me, siete probabilmente vogliono vedere alcune cose divertenti up-front perché la lettura è il lavoro, il lavoro è noioso! ;) Sentitevi liberi di giocare con la demo e poi continua a leggere per i dettagli.

• Demo 1 (pratica): Ascolta MP3 Links Inline
• Demo 2 (divertimento): A DOM Noisy

Una breve storia del linguaggio HTML e "Multimedia"

Il web è abbastanza bravo a presentazione visiva. E 'facile da creare, progettare e incorporare immagini, testo e collegamenti nei documenti HTML. Dei formati multimediali supportati in modo nativo oggi in HTML 4, audio e video - o meglio, <audio> e <video> - sono vistosamente mancanti.

HTML 5 dovrebbe portare audio e video incorporamento più vicino alla semplicità di <img /> in un futuro non troppo lontano. Nel frattempo, dobbiamo ricorrere a creative work-around per ottenere HTML-5-simile audio / video attraverso la funzione gamma di browser più comuni di oggi HTML 4-portante.

L'(HTML 4) Problema Con Audio Embedding

Per l'audio oggi sul web siti, spesso gli sviluppatori di visualizzare un elenco di link HTML direttamente in file MP3. Questo metodo è semplice, universalmente comprensibile e indicizzabili dai motori di ricerca, ma rende l'esperienza di navigazione confuso e incoerente per impostazione predefinita.

Gli utenti sono in genere viene richiesto di fare clic destro, "salva come" e, infine, aprire il file dal proprio desktop, oppure fare clic sul link e di scaricare il loro browser e aprire il file MP3. Il regolare "click" si apre in genere in una nuova pagina con il lettore incorporato o lancia un'applicazione esterna, come QuickTime o Windows Media Player.

Non solo sono "nudi" link MP3 lavoro supplementare e confusione per l'utente, il metodo del browser del trattamento, è una distrazione e li porta lontano dalla esperienza del tuo sito.

Using <object> / embed è un altro modo generico di incorporare direttamente contenuti MP3 o altro, ma soffre ancora del problema di incoerenza, lo sviluppatore non si sa cosa può mostrare in che area della pagina web, dato l'utente potrebbe Per qualsiasi serie di applicazioni che possono caricare al fine di gestire quel tipo di file - in questo caso, probabilmente lo stesso QuickTime o Windows Media Player, che avrebbe gestito i download diretti sarebbe mostrato in-posto nella vostra pagina. Ancora una volta, non è una grande soluzione.

Widget di Flash sono a volte utilizzati come una soluzione per incorporare contenuti MP3, ma l'interfaccia utente e le pelli tendono ad essere al 100% basata su Flash, piuttosto che HTML e CSS-based, e quindi sono più difficili per la maggior parte degli sviluppatori web da personalizzare. HTML 5 dovrebbe cambiare questo con audio basati su standard, CSS e script-skinnable / elementi video.

Nel frattempo, alcune soluzioni creative possono essere utilizzati per ottenere più "web developer-friendly" widgets per l'audio.

Fare MP3 Links "funziona": YUI + SoundManager 2

Per avere "progressivamente potenziato" link a file MP3 che giocheranno sul posto quando si fa clic, qualcosa deve intercettare un'azione normale download del browser e successivamente gestire la richiesta; combinando Javascript e Flash per gestire il caricamento e la riproduzione di file MP3, questo può essere fatto in modo molto efficace.

In una ricerca personale per ottenere il controllo audio cross-browser per un gioco DHTML nel 2002, ho sviluppato un audio JS + Flash API denominata SoundManager. Avendo dato che si è evoluto per includere il video, SoundManager 2 implementa ed estende Flash nativo suono API e lo espone a JavaScript. Il risultato è cross-browser/platform sceneggiato funzionalità audio che possono contribuire a colmare il divario per il suono JS-driven fino HTML 5 è ampiamente supportato.

Unendo SoundManager 2 con YUI DOM e di eventi utilità, avete una soluzione efficace per l'integrazione e il controllo audio che può degradare graziosamente a un download browser o player incorporato.

Esempio pratico: riproducibili MP3 Links

La demo di seguito viene utilizzato YUI e SoundManager 2 a migliorare i collegamenti MP3, rendendole in linea giocabile. YUI utilità evento intercettare i clic sui link che punta al file MP3 e quindi utilizzare l'API SoundManager di caricare e riprodurre l'URL pertinenti prima di ritornare "false", e impedendo al browser di caricare il link. scatti successivi si alternerà play / pausa di stato.

In caso di Javascript / Flash non sono presenti o se qualcosa va storto il resto, il browser semplicemente cadere attraverso e caricare il collegamento MP3 come al solito.

• Demo 1 (pratica): Ascolta MP3 Links Inline

Aggiunta di audio Per l'interfaccia utente

animazione basato su Javascript, effetti di transizione e di movimento aggiungere fluidità al web design interfaccia e stanno diventando sempre più comune. Elegantemente audio-applicati possono completare e migliorare ulteriormente l'interfaccia utente, rendendo l'esperienza più significativa.

In alcune applicazioni, il suono in forma di feedback interfaccia utente può essere opportuno e utile per l'esperienza dell'utente. Gli effetti sonori sono comuni per i siti basati su Flash e giochi web-based, e in audio gaming desktop di solito è una parte fondamentale di raccontare la storia.

.. Ma non strafare

E 'importante sapere quando fermarsi. Richiamo animato "in costruzione". GIF? Come circa il tag blink? Marquee testo? Alcune cose sono più lasciati soli. Non tutte le pagine HTML bisogno di muoversi, blink, scivolo, flash e rumoroso essere allo stesso tempo, anche "divertente" è meglio applicata con moderazione. Fastidioso gli utenti con musica auto-riproduzione o rumore può rapidamente portare all'abbandono del tuo sito.

Non vi è probabilmente una buona ragione che la norma gli elementi HTML come controlli di modulo e simili, non hanno effetti sonori o notifiche ad essi associati. Forse "il silenzio è d'oro" ed è meglio che il web sia un luogo tranquillo per impostazione predefinita, in modo da non essere fastidioso e distrarre.

Come una notevole eccezione alla "silenziosa web" tema, Internet Explorer di solito fa un suono "click" quando la navigazione di pagina si verifica, presumibilmente per notificare all'utente che il ricorso è stato avviato. Questo è diventato più sordina negli ultimi tempi, ma è ancora presente e ancora sembra infastidire alcuni utenti a questo giorno.

Esempio "Fun": A DOM Noisy

Nonostante gli argomenti per il silenzio, il seguente è un esempio di ciò che potrebbe essere come avere "rumorosa" elementi dei moduli, pulsanti ed elementi DOM che forniscono feedback acustici, come sono in uso. La novità è sicuramente quello di portare fuori in fretta, ma aggiunge un elemento di divertimento infantile per l'interfaccia utente.

• Demo 2 (divertimento): A DOM Noisy

Uno sguardo al futuro: HTML 5

Native <audio> e supporto <video> vorrà dire che sarà molto più facile da inserire e controllare più formati multimediali all'interno del browser senza dipendere da plugin di terze parti. Inoltre, una vasta API JavaScript dovrebbe incoraggiare gli sviluppatori di creare esperienze sempre più innovative.

Trova conversazioni: bloglines | technorati

Condividi e ampliare: Bookmark con del.icio.us | digg it! | reddit!