Cómo crear un reproductor de MP3 en HTML

Escrito por fred larrey | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un reproductor de MP3 en HTML
Un reproductor de MP3, para tu sitio web. (Flying Colours Ltd/Photodisc/Getty Images)

Si estás creando una página web, saber cómo controlar archivos multimedia con HTML es una necesidad. Un reproductor de MP3 muy básico se puede crear usando la etiqueta HTML "embed". Con ella puedes acceder a cualquier archivo MP3 de tu disco duro o servidor. Además, esto permite que los visitantes de tu página web puedan reproducir el archivo, ajustar el volumen y saltar a cualquier parte de la canción que quieran.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Un editor de texto

Lista completaMinimizar

Instrucciones

  1. 1

    Abre tu editor de texto favorito. Cualquiera servirá.

  2. 2

    Escribe el siguiente código HTML:

    <embed src="mi_canción.mp3" width="300" height="42" ></embed>

    Asegúrate de reemplazar "mi_canción.mp3" con el archivo MP3 que deseas que se reproduzca.

  3. 3

    Dirígete a "Archivo", selecciona "Guardar como" y navega hasta al directorio donde se encuentra tu archivo MP3. En el cuadro de texto "Nombre del archivo", escribe el nombre de tu archivo con la extensión ".html" (y no ".txt" o ".doc"). Haz clic en "Guardar".

  4. 4

    Navega hasta el directorio donde guardaste el archivo ".html" y haz doble clic sobre él. Se ejecutará tu navegador predeterminado y escucharás que tu archivo comienza a reproducirse. Verás un reproductor de color gris que tiene un botón de reproducción/pausa/detención, un control deslizante de volumen y una barra de progreso que te indica en qué parte de la canción estás.

Consejos y advertencias

  • Si quieres agregar más canciones, simplemente tienes que copiar y pegar más etiquetas "" (como lo hiciste en el Paso 2), luego cambia el nombre después de "src=". Asegúrate de que todas tus canciones estén en el mismo directorio de tu archivo ".html".

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles