Palabras Clave:

Escucha, conecta y comparte: Cómo integrar un reproductor MP3 en las Entradas de Blogger


Mendoza Salazar, A. A.
Sección:
Mujer joven con auriculares sentada en una banca de parque usando una laptop. De la pantalla emergen íconos de música, emojis y notas musicales coloridas, representando una experiencia auditiva interactiva. Texto en pantalla: “Reproductor de Audio | Blog | Manual Blogger”.

Resumen

Este manual proporciona una guía técnica para insertar un reproductor de audio MP3 interactivo en la plataforma de Blogger, utilizando HTML, CSS y JavaScript. La propuesta responde a la creciente demanda de contenido transmedia y accesible, permitiendo que los lectores también puedan escuchar el contenido sin necesidad de permanecer frente a una pantalla.

La estructura del reproductor incluye carátula visual, controles personalizados y una barra de progreso adaptable a dispositivos móviles. Además, se detalla la personalización del estilo mediante reglas CSS y la interactividad funcional a través de JavaScript. Esta integración no solo mejora la experiencia del usuario, sino que también amplía el alcance comunicativo del blog, adaptándose a las tendencias de consumo digital actuales.

Reproductor de audio con caratula y controles para el audio
Resultado del reproductor de audio

Introducción

En el mundo digital de hoy, donde todo va a mil por hora, ¿te has dado cuenta de que la gente busca cosas que no solo vean, sino que también puedan "vivir"? Pues, justo ahí entra la magia de poner un reproductor de audio en tu blog. No es solo un botoncito más; es como abrirle la puerta a tus lectores para que se sientan realmente en casa.

Tus artículos, que ya son geniales, ¡ahora pueden ser escuchados! Piensa en la gente que va manejando, haciendo ejercicio, o simplemente relajándose en casa. Con el audio, les das la libertad de 'consumir' tu contenido sin tener que estar pegados a la pantalla. Es una forma súper efectiva de llegar a más gente y de crear una conexión mucho más directa.

Estructura técnica del reproductor: Código base y personalización

Antes de iniciar coloca este código de Google Fonts después de  <head>  Entra a Tema, Personalizar, Edición HTML. Presiona Ctrl + F, busca <head>

<link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' rel='stylesheet'/>

Dentro de una Entrada/Post incrusta el código de la Tabla 1 en la Vista HTML de tu post.

Tabla 1
Código HTML5

<div class="audio-player">
  <div class="cover-container">
    <img id="audioCover" src="URL de la Imagen" alt="Carátula del Podcast" />
    <button id="coverPlayBtn" class="cover-play-button">
      <span class="material-symbols-outlined">play_arrow</span>
    </button>
  </div>
  <audio id="audio" preload="metadata">
    <source src="URL en MP3" type="audio/mpeg" />
    Tu navegador no soporta el elemento de audio.
  </audio>
  <div class="controls">
    <div class="control-buttons-row">
      <button id="restartBtn"><span class="material-symbols-outlined">restart_alt</span></button>
      <button id="rewindBtn"><span class="material-symbols-outlined">replay_10</span></button>
      <button id="playPauseBtn"><span class="material-symbols-outlined">play_arrow</span></button>
      <button id="forwardBtn"><span class="material-symbols-outlined">forward_10</span></button>
      <button id="fullscreenBtn"><span class="material-symbols-outlined">fullscreen</span></button>
    </div>
    <div class="progress-and-time">
      <progress id="progressBar" value="0" max="100"></progress>
      <span id="barra-time"><span id="currentTime">0:00</span> / <span id="duration">0:00</span></span>
    </div>
  </div>
</div>

Nota. Este código es la estructura fundamental para un reproductor de audio con una interfaz de usuario rica, que, al ser complementado con CSS (para darle estilo y que se vea atractivo) y JavaScript (para darle la funcionalidad interactiva a los botones y la barra de progreso).

Después del código de la Tabla 1 dentro de la misma entrada, coloca abajo el siguiente JavaScript de la Tabla 2.

Tabla 2
Código JavaScript

<script>
  const audio = document.getElementById('audio');
  const playPauseBtn = document.getElementById('playPauseBtn');
  const progressBar = document.getElementById('progressBar');
  const currentTimeSpan = document.getElementById('currentTime');
  const durationSpan = document.getElementById('duration');
  const fullscreenBtn = document.getElementById('fullscreenBtn');
  const audioPlayer = document.querySelector('.audio-player');
  const coverPlayBtn = document.getElementById('coverPlayBtn'); // Botón de play en la carátula

  // Constantes para los botones de navegación
  const restartBtn = document.getElementById('restartBtn');
  const rewindBtn = document.getElementById('rewindBtn');
  const forwardBtn = document.getElementById('forwardBtn');
  const endBtn = document.getElementById('endBtn'); // Asegúrese de que este botón exista en su HTML si lo usa

  // Referencia al span del icono dentro del botón de play/pause y el de la carátula
  const playPauseIcon = playPauseBtn.querySelector('.material-symbols-outlined');
  const fullscreenIcon = fullscreenBtn.querySelector('.material-symbols-outlined');
  const coverPlayIcon = coverPlayBtn.querySelector('.material-symbols-outlined'); // Nuevo: Icono del botón de play en la carátula

  function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  }

  function updatePlayerUI() {
    // Cambiar el icono del botón de reproducir/pausar principal
    playPauseIcon.textContent = audio.paused ? 'play_arrow' : 'pause';
    // Cambiar el icono del botón de reproducir/pausar en la carátula
    coverPlayIcon.textContent = audio.paused ? 'play_arrow' : 'pause';

    if (audio.duration) {
      progressBar.value = (audio.currentTime / audio.duration) * 100;
    } else {
      progressBar.value = 0;
    }
    currentTimeSpan.textContent = formatTime(audio.currentTime);
  }

  // Función para alternar la reproducción
  function togglePlayPause() {
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
    updatePlayerUI();
  }

  // Evento para el botón de reproducir/pausar principal
  playPauseBtn.addEventListener('click', togglePlayPause);

  // Nuevo: Evento para el botón de reproducir/pausar en la carátula
  coverPlayBtn.addEventListener('click', togglePlayPause);

  // Eventos del audio
  audio.addEventListener('play', updatePlayerUI);
  audio.addEventListener('pause', updatePlayerUI);
  audio.addEventListener('ended', updatePlayerUI);
  audio.addEventListener('timeupdate', updatePlayerUI);

  // Cuando se cargan los metadatos del audio (duración)
  audio.addEventListener('loadedmetadata', () => {
    durationSpan.textContent = formatTime(audio.duration);
    progressBar.max = 100;
    updatePlayerUI();
  });

  // Permite al usuario hacer clic en la barra de progreso para saltar en el audio
  progressBar.addEventListener('click', (e) => {
    if (!audio.duration) return;
    const rect = progressBar.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const progressBarWidth = rect.width;
    const seekTime = (clickX / progressBarWidth) * audio.duration;
    audio.currentTime = seekTime;
  });

  // Lógica para el botón de pantalla completa
  fullscreenBtn.addEventListener('click', () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      if (audioPlayer.requestFullscreen) {
        audioPlayer.requestFullscreen();
      } else if (audioPlayer.mozRequestFullScreen) { /* Firefox */
        audioPlayer.mozRequestFullScreen();
      } else if (audioPlayer.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        audioPlayer.webkitRequestFullscreen();
      } else if (audioPlayer.msRequestFullscreen) { /* IE/Edge */
        audioPlayer.msRequestFullscreen();
      }
    }
  });

  // Escuchar el evento de cambio de pantalla completa para actualizar la UI
  document.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
      audioPlayer.classList.add('fullscreen');
      fullscreenIcon.textContent = 'fullscreen_exit'; // Cambiar icono a "salir"
    } else {
      audioPlayer.classList.remove('fullscreen');
      fullscreenIcon.textContent = 'fullscreen'; // Cambiar icono a "entrar"
    }
  });

  document.addEventListener('mozfullscreenchange', () => {
    if (document.mozFullScreenElement) {
        audioPlayer.classList.add('fullscreen');
        fullscreenIcon.textContent = 'fullscreen_exit';
    } else {
        audioPlayer.classList.remove('fullscreen');
        fullscreenIcon.textContent = 'fullscreen';
    }
  });

  document.addEventListener('webkitfullscreenchange', () => {
    if (document.webkitFullscreenElement) {
        audioPlayer.classList.add('fullscreen');
        fullscreenIcon.textContent = 'fullscreen_exit';
    } else {
        audioPlayer.classList.remove('fullscreen');
        fullscreenIcon.textContent = 'fullscreen';
    }
  });

  document.addEventListener('msfullscreenchange', () => {
    if (document.msFullscreenElement) {
        audioPlayer.classList.add('fullscreen');
        fullscreenIcon.textContent = 'fullscreen_exit';
    } else {
        audioPlayer.classList.remove('fullscreen');
        fullscreenIcon.textContent = 'fullscreen';
    }
  });

  // Lógica para los nuevos botones de navegación
  restartBtn.addEventListener('click', () => {
    audio.currentTime = 0;
    updatePlayerUI();
  });

  rewindBtn.addEventListener('click', () => {
    audio.currentTime = Math.max(0, audio.currentTime - 10);
    updatePlayerUI();
  });

  forwardBtn.addEventListener('click', () => {
    audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
    updatePlayerUI();
  });

  // Compruebe si endBtn existe antes de añadir el event listener
  if (endBtn) {
    endBtn.addEventListener('click', () => {
      audio.currentTime = audio.duration;
      updatePlayerUI();
      audio.pause();
    });
  }


  // Establece el estado inicial del reproductor al cargar la página
  updatePlayerUI();
</script>

Nota. Este JavaScript es el motor que transforma su reproductor de audio HTML de una estructura estática a una herramienta interactiva y dinámica.

En esta parte es donde le podemos dar nuestro toque personal. Entra a Tema, Personalizar, Edición HTML. Presiona Ctrl + F, busca  ]]></b:skin>  y pegalo antes de ]]></b:skin>

Tabla 3
Estilos CSS

/* Estilos CSS para el Reproductor de audio en Blogger */

.audio-player {
  max-width: 350px;
  margin: 20px auto;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.audio-player .cover-container { /* Nuevo contenedor para la imagen y el botón */
  position: relative; /* Para posicionar el botón de play sobre la carátula */
  width: 100%;
  max-width: 300px;
  margin-bottom: 15px;
  display: flex; /* Para centrar la imagen dentro del contenedor */
  justify-content: center;
  align-items: center;
}

.audio-player #audioCover {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  display: block; /* Asegura que la imagen sea un bloque */
}

.audio-player .cover-play-button { /* Estilos para el nuevo botón de play en la carátula */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
  border: none;
  border-radius: 50%; /* Botón redondo */
  padding: 15px; /* Tamaño del botón */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.audio-player .cover-play-button .material-symbols-outlined {
  font-size: 48px; /* Tamaño del icono */
  color: #fff;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

.audio-player .cover-play-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1); /* Ligero agrandamiento al pasar el ratón */
}

.audio-player audio {
  width: 100%;
  margin-bottom: 15px;
  outline: none;
  display: none;
}

.audio-player .controls {
  display: flex;
  flex-direction: column; /* Cambiado a columna por defecto para apilar los grupos */
  align-items: center;
  gap: 10px; /* Espacio entre los grupos (botones, progreso, fullscreen) */
  width: 100%;
  padding-bottom: 5px;
}

/* Estilos para el contenedor de botones de control */

.control-buttons-row {
  display: flex;
  flex-direction: row; /* Siempre horizontal para los botones dentro de este grupo */
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center; /* Asegura que los ítems dentro de esta fila se alineen al centro */
  width: 100%; /* Ocupa todo el ancho disponible */
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 5px;
  order: 1; /* Los botones van primero en el apilamiento vertical */
}

/* Estilos para el contenedor de la barra de progreso y tiempos */

.progress-and-time {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-grow: 1;
  width: 100%; /* Ocupa todo el ancho disponible */
  order: 2; /* La barra de progreso y tiempos van segundos */
}

.audio-player button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.audio-player button .material-symbols-outlined {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
  font-size: 20px;
  color: #fff;
}

.audio-player button:hover {
  background-color: #0056b3;
}

.audio-player progress {
  flex-grow: 1;
  height: 8px;
  border-radius: 5px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #e0e0e0;
  cursor: pointer;
  min-width: 80px;
}

.audio-player progress::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius: 5px;
}

.audio-player progress::-webkit-progress-value {
  background-color: #007bff;
  border-radius: 5px;
}

.audio-player progress::-moz-progress-bar {
  background-color: #007bff;
  border-radius: 5px;
}

.audio-player #currentTime,
.audio-player #duration, .audio-player #barra-time {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Estilos para el botón de pantalla completa (ordenado explícitamente) */

.audio-player .controls #fullscreenBtn {
    order: 3; /* El botón de fullscreen va después de la barra de progreso en desktop */
}

/* Estilos base para el modo de pantalla completa (móviles por defecto) */

.audio-player.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0;
  z-index: 9999;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.audio-player.fullscreen .cover-container { /* Ajuste para la carátula en fullscreen */
  max-width: 90%;
  object-fit: contain;
  margin-top: auto;
  margin-bottom: auto;
}

.audio-player.fullscreen #audioCover {
  max-width: 100%;
  height: auto;
}

.audio-player.fullscreen .cover-play-button { /* Ajuste para el botón de play en fullscreen */
  padding: 20px;
}

.audio-player.fullscreen .cover-play-button .material-symbols-outlined {
  font-size: 60px;
}

.audio-player.fullscreen .controls {
  flex-direction: column;
  gap: 20px;
  width: 90%;
  max-width: 900px;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 30px;
  margin-bottom: auto;
}

/* REORGANIZACIÓN DE ELEMENTOS EN FULLSCREEN */

.audio-player.fullscreen .control-buttons-row {
  order: 1;
  gap: 20px;
  width: 100%;
  justify-content: center;
  align-items: center; /* Aseguramos que los botones estén centrados en su fila */
}

.audio-player.fullscreen .progress-and-time {
  order: 2;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}

.audio-player.fullscreen #progressBar {
  order: 1;
  width: 100%;
  height: 15px;
}

.audio-player.fullscreen .progress-and-time #currentTime,
.audio-player.fullscreen .progress-and-time #duration,
.audio-player.fullscreen .progress-and-time #barra-time{
  order: 2;
  font-size: 20px;
  color: #ccc;
}

.audio-player.fullscreen button {
  padding: 15px 20px;
  font-size: 24px;
  min-width: 80px;
}

.audio-player.fullscreen button .material-symbols-outlined {
  font-size: 48px;
  font-variation-settings: 'opsz' 48;
}

.audio-player.fullscreen #currentTime,
.audio-player.fullscreen #duration {
  font-size: 20px;
  color: #ccc;
}

/* IMPORTANTE: Ajustes para el botón de fullscreen en el modo fullscreen */

.audio-player.fullscreen .controls #fullscreenBtn {
    order: unset; /* Reinicia el orden si antes tenía uno específico en este contexto */
    align-self: auto; /* Permite que el elemento se alinee con los demás ítems Flexbox */
    margin-top: 0; /* Elimina cualquier margen superior que lo empuje hacia abajo */
    margin-left: 3px; /* Agrega un poco de margen para separarlo de los otros botones */
}


/* --- Media Query para Escritorio (min-width: 769px o más) --- */
/* Esto sobrescribe los estilos de fullscreen para pantallas más grandes, centrando todo el reproductor */

@media (min-width: 769px) {
    .audio-player.fullscreen {
        /* Centra el reproductor completo */
        display: flex;
        flex-direction: column; /* Alinea los elementos internos en columna (carátula, controles) */
        justify-content: center; /* Centra verticalmente el contenido del reproductor */
        align-items: center; /* Centra horizontalmente el contenido del reproductor */

        /* Define un tamaño máximo para el reproductor en full screen para PC */
        max-width: 80vw !important; /* Por ejemplo, 80% del ancho del viewport */
        max-height: 90vh !important; /* Por ejemplo, 90% de la altura del viewport */
        width: auto !important; /* Ajusta el ancho automáticamente */
        height: auto !important; /* Ajusta la altura automáticamente */

        /* Vuelve a centrar el bloque principal del reproductor en la pantalla */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        position: fixed; /* Asegura que se mantenga fijo y centrado */

        /* Ajustes de fondo y sombra para el reproductor centrado */
        background: #282828; /* Un color de fondo ligeramente distinto para el reproductor */
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* Sombra más pronunciada */
        border-radius: 15px; /* Bordes redondeados */
    }

    .audio-player.fullscreen .cover-container { /* Ajuste para la carátula en fullscreen */
        max-width: 350px; /* Tamaño fijo de la carátula en PC fullscreen */
        max-height: 350px;
        width: auto;
        height: auto;
        margin-top: 20px; /* Espacio superior para la carátula */
        margin-bottom: 20px; /* Espacio inferior */
        object-fit: contain; /* Asegura que la imagen se ajuste */
    }

    .audio-player.fullscreen #audioCover {
        max-width: 100%;
        height: auto;
    }

    .audio-player.fullscreen .cover-play-button { /* Ajuste para el botón de play en fullscreen */
        padding: 15px;
    }

    .audio-player.fullscreen .cover-play-button .material-symbols-outlined {
        font-size: 48px;
    }


    .audio-player.fullscreen .controls {
        flex-direction: column; /* Los controles se apilan */
        gap: 15px; /* Espacio entre los grupos de controles */
        width: 80%; /* Ancho de los controles dentro del reproductor */
        max-width: 600px; /* Ancho máximo para los controles */
        margin-top: auto; /* Empuja los controles hacia abajo si la carátula es más pequeña */
        margin-bottom: 20px; /* Espacio inferior */
    }

    .audio-player.fullscreen .control-buttons-row {
        gap: 15px; /* Espacio entre botones en PC fullscreen */
        /* Asegura que los ítems dentro de esta fila se alineen al centro */
        align-items: center;
    }

    .audio-player.fullscreen button {
        padding: 12px 18px; /* Reducir el padding de los botones un poco para PC */
        font-size: 18px;
    }

    .audio-player.fullscreen button .material-symbols-outlined {
        font-size: 36px; /* Ajustar el tamaño de los iconos para PC */
        font-variation-settings: 'opsz' 36;
    }

    .audio-player.fullscreen .progress-and-time #currentTime,
    .audio-player.fullscreen .progress-and-time #duration {
        font-size: 18px; /* Ajustar el tamaño de la fuente de los tiempos para PC */
    }

    /* Solución para el botón de fullscreen en PC fullscreen */
    .audio-player.fullscreen .controls #fullscreenBtn {
        /* Reset de propiedades que causaban desalineación */
        order: unset; /* Remueve cualquier orden específico previo */
        align-self: center; /* Alinea este ítem específicamente al centro de su línea */
        margin-top: 0; /* Asegura que no haya margen superior adicional */
        margin-left: 15px; /* Ajusta el margen para separarlo de los otros botones, si es necesario */
    }
}


/* --- MEDIA QUERIES PARA DISPOSITIVOS MÓVILES --- */

/* Media Query para pantallas hasta 768px (tabletas y móviles grandes) */

@media (max-width: 768px) {
   .audio-player .controls {
     flex-direction: column;
     align-items: center;
     gap: 15px;
     overflow-x: hidden;
   }

   .control-buttons-row {
     gap: 5px; /* Aumentado el espacio entre botones para mejor interacción */
     justify-content: center;
     flex-wrap: nowrap;
     width: 100%;
     order: 1;
   }

   .progress-and-time {
     width: 100%;
     justify-content: space-between;
     flex-wrap: nowrap;
     margin-top: -5px;
     order: 2;
   }

   .audio-player .controls #fullscreenBtn {
       order: 3;
   }

   .audio-player button {
     padding: 7px 10px; /* Aumentado el padding para botones más grandes */
     min-width: 50px; /* Asegura un tamaño mínimo para los botones */
   }
   .audio-player button .material-symbols-outlined {
     font-size: 18px; /* Aumentado el tamaño del icono */
     font-variation-settings: 'opsz' 18;
   }
   .audio-player progress {
     flex-grow: 1;
     width: auto;
   }

   /* Ajustes específicos para fullscreen en pantallas pequeñas (manteniendo proporciones) */

   .audio-player.fullscreen .control-buttons-row {
     gap: 10px;
   }

   .audio-player.fullscreen button {
     padding: 10px 15px;
     min-width: 60px;
   }

   .audio-player.fullscreen button .material-symbols-outlined {
     font-size: 36px;
     font-variation-settings: 'opsz' 36;
   }

   .audio-player.fullscreen .progress-and-time #currentTime,
   .audio-player.fullscreen .progress-and-time #duration {
     font-size: 16px;
   }
}

/* Para móviles pequeños (hasta 480px) */

@media (max-width: 480px) {
   .audio-player {
     padding: 15px;
     margin-left: 10px;
     margin-right: 10px;
   }

   .audio-player #audioCover {
     max-width: 250px; /* Carátula más grande en móviles */
   }

   .audio-player .cover-play-button {
     padding: 20px; /* Botón de play de la carátula más grande */
   }

   .audio-player .cover-play-button .material-symbols-outlined {
     font-size: 52px; /* Icono de play de la carátula más grande */
   }

   .audio-player .controls {
     flex-direction: column;
     gap: 10px;
   }

   .control-buttons-row {
     gap: 8px; /* Espacio entre botones para móviles pequeños */
     justify-content: center;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding-bottom: 5px;
     order: 1;
   }

   .progress-and-time {
     width: 100%;
     justify-content: space-between;
     flex-wrap: nowrap;
     order: 2;
   }


   .audio-player .controls #fullscreenBtn {
       order: 3;
   }

  .audio-player button {
     padding: 10px 15px; /* Botones de control más grandes */
     min-width: unset;
   }

   .audio-player button .material-symbols-outlined {
     font-size: 24px; /* Iconos de botones de control más grandes */
     font-variation-settings: 'opsz' 24;
   }

   .audio-player #currentTime,
   .audio-player #duration {
     font-size: 13px; /* Tamaño de fuente para tiempos en móviles pequeños */
   }

   /* Ajustes muy específicos para fullscreen en móviles pequeños */
   .audio-player.fullscreen .control-buttons-row {
     gap: 8px;
   }
   .audio-player.fullscreen button {
     padding: 8px 12px;
     min-width: 50px;
   }
   .audio-player.fullscreen button .material-symbols-outlined {
     font-size: 30px;
     font-variation-settings: 'opsz' 30;
   }
   .audio-player.fullscreen .progress-and-time #currentTime,
   .audio-player.fullscreen .progress-and-time #duration {
     font-size: 14px;
   }
}

/* Para móviles muy pequeños (hasta 320px) */

@media (max-width: 320px) {
   .audio-player {
     padding: 10px;
   }
   .audio-player #audioCover {
     max-width: 180px; /* Carátula para móviles muy pequeños */
   }
   .audio-player .cover-play-button {
     padding: 15px; /* Botón de play de la carátula para móviles muy pequeños */
   }
   .audio-player .cover-play-button .material-symbols-outlined {
     font-size: 40px; /* Icono de play de la carátula para móviles muy pequeños */
   }
   .audio-player .controls {
     gap: 8px;
   }
   .control-buttons-row {
     gap: 5px; /* Espacio entre botones para móviles muy pequeños */
   }
   .audio-player button {
       font-size: 14px;
       padding: 8px 12px; /* Botones de control para móviles muy pequeños */
   }
   .audio-player button .material-symbols-outlined {
     font-size: 20px; /* Iconos de botones de control para móviles muy pequeños */
     font-variation-settings: 'opsz' 20;
   }
   .audio-player #currentTime,
   .audio-player #duration {
       font-size: 11px;
   }


   /* Ajustes para fullscreen en móviles muy pequeños */

   .audio-player.fullscreen button {
     padding: 6px 10px;
     min-width: 40px;
   }
   .audio-player.fullscreen button .material-symbols-outlined {
     font-size: 24px;
     font-variation-settings: 'opsz' 24;
   }
   .audio-player.fullscreen .progress-and-time #currentTime,
   .audio-player.fullscreen .progress-and-time #duration {
     font-size: 12px;
   }
}

Nota. Este código CSS no solo embellece su reproductor de audio, sino que también garantiza una experiencia de usuario fluida y consistente en una amplia gama de dispositivos.

Al dominar la presentación visual, usted refuerza la credibilidad y el atractivo de su contenido, un pilar fundamental en la comunicación persuasiva y efectiva que buscamos promover en su blog.

El diseño de este reproductor no solo busca la funcionalidad; aspira a la usabilidad y la accesibilidad. Está construido con la robusta estructura de HTML, moldeado con la flexibilidad de los estilos CSS y dotado de vida interactiva gracias al lenguaje JavaScript. Estas tres tecnologías, pilares de la web moderna, nos permiten ofrecerle una experiencia inmersiva, donde la carátula de cada episodio, los intuitivos controles de reproducción y la barra de progreso se sincronizan perfectamente para que su experiencia auditiva sea tan enriquecedora como la lectura.

Conclusión

La inclusión de un reproductor de audio en Blogger representa una estrategia eficaz de accesibilidad y expansión del contenido digital. Esta implementación permite transformar publicaciones estáticas en experiencias inmersivas, adecuadas para usuarios en movimiento o con distintas capacidades visuales. Al integrar HTML, CSS y JavaScript, se ofrece un sistema robusto, adaptable y visualmente atractivo, que mejora la percepción del contenido y refuerza la credibilidad del sitio.

Además, el diseño responsivo y la opción de pantalla completa demuestran una atención técnica al detalle, esencial en la comunicación digital contemporánea. En un entorno saturado de estímulos visuales, brindar una alternativa sonora incrementa el tiempo de permanencia, la interacción y la fidelización de audiencias. Implementar esta herramienta no solo es una decisión funcional, sino estratégica y orientada al futuro de la comunicación multiplataforma.

Licencia Creative Commons
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional. Si necesitas utilizar alguna imagen, video o audio dirígete a la información proporcionada en las referencias. Esta publicación puede o no contener material con protección de datos o derechos de autor.



Sección:
Ubicación: Tamaulipas, México

¿Cómo citar este artículo?

Mendoza Salazar, A. A. (2025, julio 30). Escucha, conecta y comparte: Cómo integrar un reproductor MP3 en las Entradas de Blogger . https://www.mendozasalazar.com/2025/07/reproductor-.html

Cita entre paréntesis: (Mendoza Salazar, 2025)

Cita narrativa: Mendoza Salazar (2025)

Labels:
Location: Tamaulipas, México

Comentarios

Publicar un comentario

No agredas a otros usuarios, no violentes ni faltes al respeto a otras personas que no conozcas.