Desarrollo Web Lección 6 - Medios

En esta actividad, aprenderá cómo agregar un elemento de audio a una página.

• Continuaremos trabajando en 'media.php' y 'style.css' en Visual Studio Code. Si necesita el código hasta ahora, aquí está. No te preocupes si el tuyo es diferente.
• media.php
• style.css

• Agreguemos un reproductor de audio en la parte inferior de la página antes de la etiqueta <main> de cierre.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3"></audio>

• El código de los elementos de audio es muy similar al código de los elementos de vídeo. Aquí tenemos un reproductor de audio configurado para reproducir un archivo de audio de Paul Walker disponible en Freesound.
• Si guarda y carga el archivo ahora, no verá nada. No hay ninguna imagen asociada con el audio.
• Para ver los controles, tenemos que especificarlos.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls></audio>

• También podemos agregar autoplay, que no está permitido en algunos navegadores a menos que también se use, mutedpero eso no tiene ningún sentido.
• La otra opción que tenemos es loopreproducir el audio.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls loop></audio>

• En caso de que desee crear una página que muestre audio (vendiendo música o demostrando sus habilidades con la guitarra), apliquemos el mismo estilo básico que hemos hecho para las imágenes y el video.

audio {
  margin: 20px 20px 20px 0px;
  padding: 10px 10px 10px 0px;
}

• Personalmente, no creo que un borde agregue nada al reproductor de audio, así que lo dejé. Del mismo modo, el relleno de la izquierda arruina la alineación, así que lo configuré en 0px. Siéntete libre de modificar esto como quieras.
• En cualquier caso, en la mayoría de las páginas, es más probable que deje su <audio>etiqueta sin ningún atributo, por lo que no será visible y usará Javascript para activar el audio.

• media.php
• style.css
• resultado

Siguiente: Medios Javascript