El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Utilitzant etiquetes d'àudio

Següent ►
►

En aquest tema, aprendrem com afegir àudio a les nostres pàgines web utilitzant l'etiqueta <audio> d'HTML5. Aquesta etiqueta ens permet incrustar fitxers d'àudio de manera senzilla i efectiva, oferint controls per reproduir, pausar i ajustar el volum.

Continguts

  1. Introducció a l'etiqueta <audio>
  2. Atributs de l'etiqueta <audio>
  3. Exemples pràctics
  4. Exercicis pràctics
  5. Conclusió

Introducció a l'etiqueta <audio>

L'etiqueta <audio> es va introduir en HTML5 i permet incrustar fitxers d'àudio en una pàgina web. Aquesta etiqueta és molt útil per afegir música, efectes de so o qualsevol altre tipus d'àudio.

Sintaxi bàsica

<audio src="ruta/al/fitxer.mp3" controls>
    El teu navegador no suporta l'element d'àudio.
</audio>
  • src: Especifica la ruta del fitxer d'àudio.
  • controls: Afegeix controls de reproducció (play, pause, volum, etc.).

Atributs de l'etiqueta <audio>

L'etiqueta <audio> té diversos atributs que ens permeten personalitzar el comportament de l'àudio:

Atribut Descripció
src Especifica la ruta del fitxer d'àudio.
controls Afegeix controls de reproducció a l'àudio.
autoplay Reprodueix l'àudio automàticament quan es carrega la pàgina.
loop Reprodueix l'àudio en bucle.
muted Inicialment silencia l'àudio.
preload Indica com el navegador ha de carregar l'àudio (auto, metadata, none).

Exemple d'ús dels atributs

<audio src="ruta/al/fitxer.mp3" controls autoplay loop muted preload="auto">
    El teu navegador no suporta l'element d'àudio.
</audio>

Exemples pràctics

Exemple 1: Àudio amb controls bàsics

<audio src="audio/exemple.mp3" controls>
    El teu navegador no suporta l'element d'àudio.
</audio>

Exemple 2: Àudio amb reproducció automàtica i en bucle

<audio src="audio/exemple.mp3" controls autoplay loop>
    El teu navegador no suporta l'element d'àudio.
</audio>

Exemple 3: Àudio amb múltiples fonts

Per assegurar-nos que l'àudio es reprodueixi en tots els navegadors, podem proporcionar múltiples formats d'àudio:

<audio controls>
    <source src="audio/exemple.mp3" type="audio/mpeg">
    <source src="audio/exemple.ogg" type="audio/ogg">
    El teu navegador no suporta l'element d'àudio.
</audio>

Exercicis pràctics

Exercici 1: Afegir un fitxer d'àudio amb controls

Crea una pàgina HTML que inclogui un fitxer d'àudio amb controls de reproducció.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Àudio</title>
</head>
<body>
    <h1>Exercici d'Àudio</h1>
    <audio src="audio/exemple.mp3" controls>
        El teu navegador no suporta l'element d'àudio.
    </audio>
</body>
</html>

Exercici 2: Afegir un fitxer d'àudio amb reproducció automàtica i en bucle

Modifica l'exercici anterior per afegir reproducció automàtica i en bucle.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Àudio</title>
</head>
<body>
    <h1>Exercici d'Àudio</h1>
    <audio src="audio/exemple.mp3" controls autoplay loop>
        El teu navegador no suporta l'element d'àudio.
    </audio>
</body>
</html>

Exercici 3: Afegir múltiples fonts d'àudio

Crea una pàgina HTML que inclogui un fitxer d'àudio amb múltiples fonts per assegurar la compatibilitat amb diferents navegadors.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici d'Àudio</title>
</head>
<body>
    <h1>Exercici d'Àudio</h1>
    <audio controls>
        <source src="audio/exemple.mp3" type="audio/mpeg">
        <source src="audio/exemple.ogg" type="audio/ogg">
        El teu navegador no suporta l'element d'àudio.
    </audio>
</body>
</html>

Conclusió

En aquesta secció, hem après com utilitzar l'etiqueta <audio> per afegir fitxers d'àudio a les nostres pàgines web. Hem vist com utilitzar diferents atributs per personalitzar el comportament de l'àudio i hem practicat amb diversos exemples. Ara estem preparats per continuar amb el següent tema del curs.

Proper tema: Estructura bàsica de taules

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats