HTML5 us permet afegir sons i música a les vostres pàgines web amb l'element. De fet, el més difícil és crear les múltiples fonts que necessiteu per assegurar-vos que els vostres fitxers de so funcionin en la més àmplia varietat de navegadors.
El benefici d'utilitzar HTML5 és que podeu incrustar el so només amb un parell d'etiquetes. Els navegadors, a continuació, reprodueixen el so com si mostressin una imatge quan utilitzeu un element IMG .
Com afegir so a una pàgina web HTML5
Necessiteu un Editor HTML , un fitxer de so (preferiblement en format MP3) i un convertidor de fitxers de so.
- En primer lloc, necessiteu un fitxer de so. És millor gravar el fitxer com a MP3 ( .mp3 ) ja que té una alta qualitat de so i és compatible amb la majoria de navegadors (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ i Safari 5+).
- Converteix el fitxer en format Vorbis ( .ogg ) per afegir Firefox 3.6 + i Opera 10.5+. Podeu utilitzar un convertidor com el que es troba a Vorbis.com. També podeu convertir el vostre MP3 a un format de fitxer WAV ( .wav ) per obtenir el suport de Firefox i Opera. Recomano publicar el fitxer en els tres tipus, només per a la seguretat, però el que més necessites són MP3 i un altre tipus.
- Carregueu tots els fitxers d'àudio al vostre servidor web i anoteu el directori al qual heu emmagatzemat. És convenient que els col·loqui en un subdirectori només per a fitxers d'àudio, com la majoria dels dissenyadors, guarden imatges en un directori d' imatges .
- Afegiu l'element AUDIO al vostre fitxer HTML on voleu que es mostrin els controls de fitxers de so.
- Col·loqueu els elements SOURCE per a cada fitxer d'àudio que carregueu a l'element AUDIO :
- Qualsevol HTML dins de l'element AUDIO s'utilitzarà com a alternativa per als navegadors que no admeten l'element AUDIO . Així que afegiu un codi HTML. La forma més senzilla és afegir HTML per permetre que descarregueu el fitxer, però també podeu utilitzar mètodes d'incrustació d'HTML 4.01 per reproduir el so. Aquí teniu un simple retrocés:
El vostre navegador no admet la reproducció d'àudio, descarregueu el fitxer:
- L'últim que heu de fer és tancar el vostre element AUDIO :
- Quan hàgiu acabat, el vostre HTML hauria de ser així:
Consells addicionals
- Assegureu-vos d'utilitzar el doctype HTML5 () perquè el vostre HTML validés
- Reviseu els atributs disponibles per a l'element per veure quines opcions podeu afegir al vostre element.
- Tingueu en compte que configurem el codi HTML per incloure controls de manera predeterminada i que la reproducció automàtica està desactivada. Podeu, per descomptat, canviar-ho, però recordeu que molta gent troba un so que comença automàticament o que no pot controlar-ho per ser molest en el millor dels casos, i sovint només sortirà de la pàgina quan això passi.