Modificar Reproductor creado con html y JS.

DockPro Seguir

Alfa
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
22 May 2018
Mensajes
25
Hola buenas a todos, alguien me podria ayudar he montado un pequeño reproductor en html y js, la verdad no tengo mucho conocimiento y pues me gustaria modificarlo para darle una mejora estetica, que me recomiendan el codigo lo encontre por internet y ya esta funsionando.

Este es el actual reproductor:

1.PNG

Y quisiera dejarlo asi.

2.PNG
 

DockPro

Alfa
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
22 May 2018
Mensajes
25
Ups perdon... este es el codigo del primer reproductor.

HTML:
<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>
 

Charlie Araiza

Épsilon
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
18 Dic 2012
Mensajes
930
Remplaza donde dice "var Spectrum..." con esto:

HTML:
var Spectrum = WaveSurfer.create({
                container: '#audio-spectrum',
                progressColor: "#03a9f4",
                waveColor: "gray"
            });

Y para modificar el color del fondo, agrega en el html
HTML:
<style>
#audio-spectrum canvas{
    background-color: black;
}
</style>
 

DockPro

Alfa
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
22 May 2018
Mensajes
25
Muchas gracias me ha funcionado, lo único que quisiera es tener un solo botón para PLAY y PAUSE, y del lado izquierdo, prácticamente el mismo diseño de la imagen. Podría pagar algunos dólares, se los agradecería.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba