Diferencia entre revisiones de «Audio con HTML5»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con « = Referencias = * [https://desarrolladoresweb.org/html5/etiqueta-de-audio-html5/ Audio HTML5 - desarrolladoresweb] * [https://www.tutorialrepublic.com/html-tutorial/html5-…»)
 
 
(No se muestran 5 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
 +
 +
[[File:250px-HTML5_audio_icon.png|thumb|right|100px| Icona audio HTML5]]
 +
 +
= HTML5 audio =
 +
 +
O HTML 5 proporciona un estándar que nos permite reproducir audio nunha páxina web.
 +
 +
Ata agora non había un estándar para amosar audio nunha páxina web. Hoxe en día a maior parte dos vídeos son amosados empregando plugins (como Flash), porén non todos os navegadores teñen os memos plugins.
 +
 +
HTML 5 especifica a forma de incluír audio na páxina web, coa etiqueta audio.
 +
 +
== Formatos de audio ==
 +
 +
Actualmente, a etiqueta audio soporta tres formatos de audio:
 +
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
 +
* Ogg Vorbis
 +
* MP3
 +
* WAV
 +
</div>
 +
 +
== Como funciona? ==
 +
 +
Para reproducir audio en HTML5 o único que necesitamos é:
 +
 +
<source lang="html4strict">
 +
<audio src="song.ogg" controls="controls">
 +
</audio>
 +
</source>
 +
 +
O atributo controls é para engadir os botóns de play, pause en volume.
 +
 +
Entre as etiquetas de <audio> e </audio> inseriremos a mensaxe para aqueles navegadores que non soporten o elemento video de HTML5.
 +
 +
== Exemplos ==
 +
 +
'''Exemplo 1:'''
 +
Este exemplo funcionará correctamente en Safari, Firefox, Chrome e Opera.
 +
 +
<source lang="html4strict">
 +
<audio src="song.ogg" controls="controls">
 +
O seu navegador non soporta audio en HTML 5.
 +
</audio>
 +
</source>
 +
 +
 +
'''Exemplo 2:'''
 +
O elemento audio soporta múltiples elementos orixe. O navegador empregará o primeiro deles que recoñeza da lista e comezará a reproducilo.
 +
 +
<source lang="html4strict">
 +
<audio controls="controls">
 +
  <source src="song.ogg" type="audio/ogg" />
 +
  <source src="song.mp3" type="audio/mpeg" />
 +
O seu navegador non soporta audio en HTML 5.
 +
</audio>
 +
</source>
 +
 +
== Atributos da etiqueta AUDIO: ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5" align="center"
 +
!  Atributo
 +
!  Valor
 +
!  width="100%" | Descrición
 +
|-
 +
| '''&lt;autoplay&gt;'''
 +
| autoplay
 +
| Especifica que o audio comezará automaticamente tan pronto estea dispoñible.
 +
|-
 +
| '''&lt;controls&gt;'''
 +
| controls
 +
| Especifica que se amosarán os controis do audio (play, pause, stop..).
 +
|-
 +
| '''&lt;loop&gt;'''
 +
| loop
 +
| Especifica que o audio estará sempre reproducíndose. Cando remate volverá a comezar automaticamente.
 +
|-
 +
| '''&lt;preload&gt;'''
 +
| preload
 +
| Especifica que o audio comezará a precargarse cando se cargue a páxina web. Si a opción autoplay está presente esta opción será ignorada.
 +
|-
 +
| '''&lt;src&gt;'''
 +
| ''url''
 +
| Especifica a URL do audio a reproducir.
 +
|}
  
 
= Referencias =
 
= Referencias =
 
* [https://desarrolladoresweb.org/html5/etiqueta-de-audio-html5/ Audio HTML5 - desarrolladoresweb]
 
* [https://desarrolladoresweb.org/html5/etiqueta-de-audio-html5/ Audio HTML5 - desarrolladoresweb]
 
* [https://www.tutorialrepublic.com/html-tutorial/html5-audio.php Audio HTML5 - tutorialrepublic]
 
* [https://www.tutorialrepublic.com/html-tutorial/html5-audio.php Audio HTML5 - tutorialrepublic]
−
* []
+
* [https://www.w3schools.com/tags/ref_av_dom.asp Referencia audio/video HTML5 - w3schools]
 +
* [https://manuais.iessanclemente.net/index.php/HTML5#HTML5_audio Manuais IES San Clemente]
 +
* [https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content Video e audio en HTML5 - MDN]
 +
* [https://www.tutorialstonight.com/html/html-audio HTML5 audio - tutorialstonight]

Revisión actual del 01:24 29 ago 2022

Icona audio HTML5

HTML5 audio

O HTML 5 proporciona un estándar que nos permite reproducir audio nunha páxina web.

Ata agora non había un estándar para amosar audio nunha páxina web. Hoxe en día a maior parte dos vídeos son amosados empregando plugins (como Flash), porén non todos os navegadores teñen os memos plugins.

HTML 5 especifica a forma de incluír audio na páxina web, coa etiqueta audio.

Formatos de audio

Actualmente, a etiqueta audio soporta tres formatos de audio:

  • Ogg Vorbis
  • MP3
  • WAV

Como funciona?

Para reproducir audio en HTML5 o único que necesitamos é: 

<audio src="song.ogg" controls="controls">
</audio>

O atributo controls é para engadir os botóns de play, pause en volume.

Entre as etiquetas de <audio> e </audio> inseriremos a mensaxe para aqueles navegadores que non soporten o elemento video de HTML5.

Exemplos

Exemplo 1: Este exemplo funcionará correctamente en Safari, Firefox, Chrome e Opera. 

<audio src="song.ogg" controls="controls">
O seu navegador non soporta audio en HTML 5.
</audio>


Exemplo 2: O elemento audio soporta múltiples elementos orixe. O navegador empregará o primeiro deles que recoñeza da lista e comezará a reproducilo. 

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
O seu navegador non soporta audio en HTML 5.
</audio>

Atributos da etiqueta AUDIO:

Atributo Valor Descrición
<autoplay> autoplay Especifica que o audio comezará automaticamente tan pronto estea dispoñible.
<controls> controls Especifica que se amosarán os controis do audio (play, pause, stop..).
<loop> loop Especifica que o audio estará sempre reproducíndose. Cando remate volverá a comezar automaticamente.
<preload> preload Especifica que o audio comezará a precargarse cando se cargue a páxina web. Si a opción autoplay está presente esta opción será ignorada.
<src> url Especifica a URL do audio a reproducir.

Referencias

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Audio_con_HTML5&oldid=19491»