{"id":55,"date":"2024-01-09T11:09:47","date_gmt":"2024-01-09T10:09:47","guid":{"rendered":"https:\/\/so-xarxa.recursos.uoc.edu\/?page_id=55"},"modified":"2024-03-19T13:56:46","modified_gmt":"2024-03-19T12:56:46","slug":"1-2-avances-y-posibilidades-con-html","status":"publish","type":"page","link":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/1-2-avances-y-posibilidades-con-html\/","title":{"rendered":"1.2. Avances y posibilidades con HTML"},"content":{"rendered":"

Con la utilizaci\u00f3n creciente de HTML5, el contenido multimedia, incluido el audio, se ha vuelto m\u00e1s accesible y com\u00fan en todos los navegadores modernos. A diferencia de las pr\u00e1cticas anteriores, que a menudo requer\u00edan el uso de plugins o tecnolog\u00edas propietarias, HTML5 introduce la etiqueta <audio><\/code> como un est\u00e1ndar nativo para la reproducci\u00f3n de audio en l\u00ednea. Esto permite incrustar f\u00e1cilmente elementos de audio en las p\u00e1ginas web sin depender de soluciones externas.<\/p>\n

El elemento <audio><\/code> se utiliza para incrustar sonido en p\u00e1ginas web. Puede contener una o m\u00e1s fuentes de audio y el navegador escoger\u00e1 la primera que est\u00e9 soportada. El texto que se escriba entre <audio><\/code> y <\/audio><\/code> solo aparecer\u00e1 en los navegadores que no soporten este elemento. El atributo controls<\/code> mostrar\u00e1 los controles predeterminados del navegador para controlar la reproducci\u00f3n, el volumen, la posici\u00f3n de reproducci\u00f3n as\u00ed como pausarla y reanudarla.<\/p>\n

La etiqueta <source><\/code> nos permite especificar los ficheros de audio en este caso y sus formatos que pueden ser OGG, MP3 o WAV.<\/p>\n

<audio controls>\r\n  <source src=\"sound.ogg\" type=\"audio\/ogg\">\r\n  <source src=\"sound.mp3\" type=\"audio\/mpeg\">\r\n  <source src=\"sound.wav\" type=\"audio\/wav\">\r\n  Your browser does not support the audio tag.:\r\n<\/audio>\r\n<\/pre>\n
Dependiendo del navegador se mostrar\u00e1 algo como:<\/p>\n
\"\"
Figura 1.1. Reproductor en el navegador.
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Si solo se dispone de una fuente de audio y no se quiere mostrar el mensaje para navegadores no soportados se puede simplificar como sigue con el atributo src<\/code>:<\/p>\n
<audio src=\"sound.mp3\" controls><\/audio><\/pre>\n
Otros atributos disponibles son:<\/p>\n
    \n
  • autoplay<\/code>. Si se utiliza, el navegador comenzar\u00e1 a reproducir autom\u00e1ticamente el audio tan pronto como le sea posible sin necesidad de descargarlo totalmente. Habitualmente la reproducci\u00f3n autom\u00e1tica es una experiencia desagradable para muchos usuarios por lo que debe evitarse siempre que sea posible.<\/li>\n
  • controlslist<\/code> Se utiliza para aplicar algunas restricciones a los controles por defecto del navegador. Los valores permitidos son nodownload<\/code>, nofullscreen<\/code> y noremoteplayback<\/code>.<\/li>\n<\/ul>\n
    Un ejemplo ser\u00eda:<\/p>\n
    <audio src=\"sound.mp3\" controls  Controlslist=\"nodownload\">\r\n<\/audio>\r\n<\/pre>\n
      \n
    • crossorigin<\/code>. Indica si se debe utilizar CORS para recuperar el archivo de audio relacionado. Los valores permitidos son anonymous<\/code> y use-credentials<\/code>.<\/li>\n
    • disableremoteplayback<\/code>. Deshabilita la capacidad de reproducci\u00f3n remota en dispositivos conectados mediante cable como HDMI, DVI, etc., o inal\u00e1mbricas como Miracast, Chromecast DLNA, AirPlay, etc.<\/li>\n
    • loop<\/code>. Reiniciar\u00e1 la reproducci\u00f3n desde el principio al llegar al final del audio.<\/li>\n
    • muted<\/code>. Indica si el audio se silenciar\u00e1 inicialmente.<\/li>\n
    • preload<\/code>, indica al navegador qu\u00e9 es lo que debe precargar. Los valores pueden ser:\n
        \n
      • none<\/code>: para no precargar el audio.<\/li>\n
      • metadata<\/code>: para precargar solo los metadatos del audio.<\/li>\n
      • auto<\/code>: con esta opci\u00f3n se descargar\u00e1 el archivo de audio completo. Se asume esta opci\u00f3n sino se especifica ning\u00fan valor.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
         <\/p>\n","protected":false},"excerpt":{"rendered":"
        Con la utilizaci\u00f3n creciente de HTML5, el contenido multimedia, incluido el audio, se ha vuelto m\u00e1s accesible y com\u00fan en todos los navegadores modernos. A diferencia de las pr\u00e1cticas anteriores, que a menudo requer\u00edan el uso de plugins o tecnolog\u00edas propietarias, HTML5 introduce la etiqueta <audio> como un est\u00e1ndar nativo para la reproducci\u00f3n de audio […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/55"}],"collection":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":11,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":722,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/55\/revisions\/722"}],"wp:attachment":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}