¡Claro! Aquí te dejo un ejemplo de cómo crear un reproductor mp3 dinámico utilizando HTML, CSS y JavaScript.
HTML:
Insertar CODE, HTML o PHP:
<div class="container">
<h2>Reproductor MP3 Dinámico</h2>
<audio id="audio" src="audio.mp3"></audio>
<div class="controls">
<button id="playBtn"><i class="fa fa-play"></i></button>
<button id="pauseBtn"><i class="fa fa-pause"></i></button>
<button id="stopBtn"><i class="fa fa-stop"></i></button>
<input id="volumeCtrl" type="range" min="0" max="100" value="50" />
</div>
</div>
CSS:
Insertar CODE, HTML o PHP:
.container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.controls button {
background-color: #346BE2;
color: #fff;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
}
.controls button:hover {
background-color: #254c89;
}
.controls input[type="range"] {
margin-top: 30px;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 10px;
background-color: #ddd;
outline: none;
border-radius: 5px;
}
.controls input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #346BE2;
border-radius: 50%;
cursor: pointer;
}
.controls input[type="range"]:active::-webkit-slider-thumb,
.controls input[type="range"]:focus::-webkit-slider-thumb {
background-color: #254c89;
}
JavaScript:
```
const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const volumeCtrl = document.getElementById('volumeCtrl');
// Event listener para el botón Play
playBtn.addEventListener('click', () => {
audio.play();
});
// Event listener para el botón Pause