<div>
<!-- Crear un div donde se mostrará el reproductor -->
<div id="audio-spectrum"></div>
<!-- Crear botones de acciones -->
<input type="button" id="btn-play" value="Reproducir" disabled="disabled"/>
<input type="button" id="btn-pause" value="Pausar" disabled="disabled"/>
<input type="button" id="btn-stop" value="Detener" disabled="disabled" />
<!-- Cargar el script de wavesurfer en este caso desde un CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>
<script>
// Guardar los 3 botones en algun objeto
var buttons = {
play: document.getElementById("btn-play"),
pause: document.getElementById("btn-pause"),
stop: document.getElementById("btn-stop")
};
// Crea una instancia de wave surfer con su configuración
var Spectrum = WaveSurfer.create({
container: '#audio-spectrum',
progressColor: "#03a9f4"
});
// Manipular boton de reproducir
buttons.play.addEventListener("click", function(){
Spectrum.play();
// Activar/Desactivar respectivamente botones
buttons.stop.disabled = false;
buttons.pause.disabled = false;
buttons.play.disabled = true;
}, false);
// Manipular boton de pausa
buttons.pause.addEventListener("click", function(){
Spectrum.pause();
// Activar/Desactivar respectivamente botones
buttons.pause.disabled = true;
buttons.play.disabled = false;
}, false);
// Manipular boton de detener
buttons.stop.addEventListener("click", function(){
Spectrum.stop();
// Activar/Desactivar respectivamente botones
buttons.pause.disabled = true;
buttons.play.disabled = false;
buttons.stop.disabled = true;
}, false);
// Agregar un event listener para activar el boton de reproducir una vez que el audio este cargado
Spectrum.on('ready', function () {
buttons.play.disabled = false;
});
// Si quieres un modo responsivo (cuando el usuario redimensiona la ventana)
// las ondas serán igualmente reproducibles
window.addEventListener("resize", function(){
// Obten el progreso de acuerdo a la posición del cursor
var currentProgress = Spectrum.getCurrentTime() / Spectrum.getDuration();
// Resetear gráfica
Spectrum.empty();
Spectrum.drawBuffer();
// Colocar posición original
Spectrum.seekTo(currentProgress);
// Activar/Desactivar respectivamente botones
buttons.pause.disabled = true;
buttons.play.disabled = false;
buttons.stop.disabled = false;
}, false);
// Cargar el archivo de audio desde tu dominio
Spectrum.load('https://eqmusical.com/foro/deadmau5%20-%20Drama%20Free%20(feat.%20Lights)%20(Original%20Mix).mp3');
</script>
</div>