Come aggiungere suoni a una pagina Web HTML5

HTML5 semplifica l'aggiunta di audio e musica alle tue pagine web con l'elemento. In effetti, la cosa più difficile da fare è creare le molteplici fonti di cui hai bisogno per assicurarti che i tuoi file audio siano riprodotti sulla più ampia varietà di browser.

Il vantaggio dell'utilizzo di HTML5 è che puoi incorporare il suono semplicemente utilizzando un paio di tag. I browser, quindi, riproducono il suono proprio come se visualizzassero un'immagine quando ne usi uno

IMG elemento.

Come aggiungere suoni a una pagina Web HTML5

Avrai bisogno di un editor HTML, un file audio (preferibilmente in formato MP3) e un convertitore di file audio.

1. Innanzitutto, hai bisogno di un file audio. È meglio registrare il file come MP3 (

   .mp3) in quanto ha un'elevata qualità del suono ed è supportato dalla maggior parte dei browser (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ e Safari 5+).

2. Converti il ​​tuo file in formato Vorbis (

   .ogg) per aggiungere il supporto per Firefox 3.6+ e Opera 10.5+. È possibile utilizzare un convertitore come quello trovato su Vorbis.com. Puoi anche convertire il tuo MP3 in un formato di file WAV (

   .wav) per ottenere supporto per Firefox e Opera. Ti consiglio di postare il tuo file in tutti e tre i tipi, solo per sicurezza, ma la maggior parte di cui hai bisogno sono MP3 e un altro tipo.

3. Carica tutti i file audio sul tuo server web e prendi nota della directory in cui li hai archiviati. È una buona idea metterli in una sottodirectory solo per i file audio, come la maggior parte dei designer salva le immagini in un

   immagini directory.

4. Aggiungi il

   AUDIO elemento del file HTML in cui si desidera visualizzare i controlli del file audio.

5. Posto

   FONTE elementi per ogni file audio che carichi all'interno di

   AUDIO elemento:

6. 1. Qualsiasi HTML all'interno di

      AUDIO l'elemento sarà usato come fallback per i browser che non supportano il

      AUDIO elemento. Quindi aggiungi un po 'di HTML. Il modo più semplice è aggiungere HTML per consentire loro di scaricare il file, ma è anche possibile utilizzare i metodi di incorporamento HTML 4.01 per riprodurre il suono. Ecco una semplice soluzione:

      Il tuo browser non supporta la riproduzione audio, scarica il file: MP3,

   2. Vorbis, WAV

7. L'ultima cosa che devi fare è chiudere il tuo elemento AUDIO:

   1. Quando hai finito, il tuo codice HTML dovrebbe assomigliare a questo:

   4. Il tuo browser non supporta la riproduzione audio, scarica il file:

   5. MP3,

   6. Vorbis,

   7. WAV

Suggerimenti aggiuntivi

• Assicurati di utilizzare il doctype HTML5 () in modo che il tuo codice HTML venga convalidato
• Controlla gli attributi disponibili per l'elemento per vedere quali altre opzioni puoi aggiungere al tuo elemento.
• Tieni presente che abbiamo impostato l'HTML per includere i controlli per impostazione predefinita e che la riproduzione automatica è disattivata. Ovviamente puoi cambiarlo, ma ricorda che molte persone trovano il suono che si avvia automaticamente / che non riescono a controllare per essere fastidioso nella migliore delle ipotesi e spesso abbandonano la pagina quando ciò accade.