Como añadir reproductores a tú Blogger!

 HOLAA!! Quiero compartirles las maneras más fáciles de añadir un reproductor musical en tus entradas y Blog :3 

1. Mini-reproductor: 

Este mini-player solo funciona en la sección "diseño" > "Agregar un gadget" > "HTML/JavaScript" ya que la vista HTML de las entradas no pueden añadir código JavaScript. Tal vez añada versiones de este código en otros colores próximamente!! 

<style> .player-container { position: relative; width: 140px; margin: 20px auto 40px auto; } .player-character { position: absolute; bottom: -25px; right: -20px; height: 60px; z-index: 10; pointer-events: none; } #musicplayer { font-family: 'Tahoma', sans-serif; background: #fff0f7; border: 1px solid #ffb3df; width: 140px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 6px; border-radius: 8px; box-sizing: border-box; position: relative; } .track-info { background: linear-gradient(to bottom, #ffe3f2, #ffb3df); color: #50253f; padding: 4px; border-radius: 4px; } .track-name { font-weight: bold; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { font-size: 9px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .controls { display: flex; flex-direction: column; gap: 4px; } .seeking { display: flex; justify-content: space-between; align-items: center; font-size: 8px; color: #85426a; } .buttons { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 2px 0; } .buttons div { cursor: pointer; color: #e06da9; font-size: 18px; line-height: 1; } .playpause-track { font-size: 22px !important; color: #b83d7c !important; } .volume { display: flex; align-items: center; gap: 3px; font-size: 9px; justify-content: center; } .volume-icon { color: #e06da9; } input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 0; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #ffd4ee; border-radius: 2px; } input[type=range]::-webkit-slider-thumb { height: 8px; width: 8px; border-radius: 50%; background: #e06da9; -webkit-appearance: none; margin-top: -2.5px; } input[type=range]::-moz-range-track { width: 100%; height: 3px; background: #ffd4ee; border-radius: 2px; } input[type=range]::-moz-range-thumb { height: 8px; width: 8px; background: #e06da9; border: none; border-radius: 50%; } </style> <div class="player-container"> <div id="musicplayer"> <div class="track-info"> <div class="track-name">Cargando...</div> <div class="track-artist">Artista</div> </div> <div class="controls"> <div class="seeking"> <div class="current-time">00:00</div> <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()" /> <div class="total-duration">0:00</div> </div> <div class="buttons"> <div class="prev-track" onclick="prevTrack()">◀◀</div> <div class="playpause-track" onclick="playpauseTrack()">▶</div> <div class="next-track" onclick="nextTrack()">▶▶</div> </div> <div class="volume"> <div class="volume-icon">🔊</div> <input type="range" min="1" max="100" value="25" class="volume_slider" onchange="setVolume()" /> </div> </div> <audio id="music" src=""></audio> </div> <!-- Aquí añade o quita al personaje de la esquina --> <img class="player-character" src="https://64.media.tumblr.com/6ddbdfb2a6d8cafa8c66745cb66e15c0/e954e1f6a130d3cd-47/s250x400/4e53e93ad0522cf481179fd78af642c2502a9548.pnj" alt="Character" /> </div> <script> let track_name = document.querySelector(".track-name"); let track_artist = document.querySelector(".track-artist"); let playpause_btn = document.querySelector(".playpause-track"); let seek_slider = document.querySelector(".seek_slider"); let volume_slider = document.querySelector(".volume_slider"); let curr_time = document.querySelector(".current-time"); let total_duration = document.querySelector(".total-duration"); let track_index = 0; let isPlaying = false; let updateTimer; let curr_track = document.getElementById("music"); <!-- Aquí está la lista donde debes añadir las canciones de tu preferencia --> let track_list = [ { name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" }, { name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" } ]; function loadTrack(track_index) { clearInterval(updateTimer); resetValues(); curr_track.src = track_list[track_index].path; curr_track.load(); track_name.textContent = track_list[track_index].name; track_artist.textContent = track_list[track_index].artist; updateTimer = setInterval(seekUpdate, 1000); curr_track.addEventListener("ended", nextTrack); } function resetValues() { curr_time.textContent = "00:00"; total_duration.textContent = "0:00"; seek_slider.value = 0; } loadTrack(track_index); function playpauseTrack() { if (!isPlaying) playTrack(); else pauseTrack(); } function playTrack() { curr_track.play(); isPlaying = true; playpause_btn.innerHTML = '❚❚'; } function pauseTrack() { curr_track.pause(); isPlaying = false; playpause_btn.innerHTML = '▶'; } function nextTrack() { if (track_index < track_list.length - 1) track_index += 1; else track_index = 0; loadTrack(track_index); playTrack(); } function prevTrack() { if (track_index > 0) track_index -= 1; else track_index = track_list.length - 1; loadTrack(track_index); playTrack(); } function seekTo() { let seekto = curr_track.duration * (seek_slider.value / 100); curr_track.currentTime = seekto; } function setVolume() { curr_track.volume = volume_slider.value / 100; } function seekUpdate() { let seekPosition = 0; if (!isNaN(curr_track.duration)) { seekPosition = curr_track.currentTime * (100 / curr_track.duration); seek_slider.value = seekPosition; let currentMinutes = Math.floor(curr_track.currentTime / 60); let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60); let durationMinutes = Math.floor(curr_track.duration / 60); let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60); if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } curr_time.textContent = currentMinutes + ":" + currentSeconds; total_duration.textContent = durationMinutes + ":" + durationSeconds; } } </script>

Para añadir más canciones solo tienes que copiar y pegar este código "{ name: "NOMBRE DE LA CANCIÓN", artist: "AÑADE AL ARTISTA", path: "TUCANCIÓN.mp3" }" añadiendo una coma a la penúltima canción de tu lista.

2. Reproductor simple: 

Este código es ideal para añadirle audios o música a tus entradas ya que es solo HTML, puedes encontrar mp3 gratuitos archivados en https://archive.org 

<div style="position: relative; display: inline-block; padding: 0px 0px; text-align: center; margin: 0px auto; width: 50%; box-sizing: border-box;"> <audio controls style="max-width: 100%;"> <!-- Aquí añade la canción de tu preferencia (.mp3) --> <source src="https://archive.org/download/deftones-white-pony_202506/07%20Teenager.mp3" type="audio/mpeg"> </audio> <!-- Aquí puedes cambiar la imagen decorativa --> <img src="https://i.postimg.cc/rp73XtJB/Better-Image-1760986855166-Photoroom.png" style="position: absolute; bottom: 9px; right: 0px; width: 50px; height: auto; pointer-events: none;" alt="Decoración" /> </div>

Si tienes algún problema con los códigos dejamelo saber y yo podré ayudarte!! También si no encuentras alguna canción en mp3 puedes decirme el nombre y yo te doy el mp3!!! Gracias por leer