Modificar Reproductor creado con html y JS. Modificar Reproductor creado con html y JS.


Mostrando resultados del 1 al 5 de 5
  1. #1
    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:

    Modificar Reproductor creado con html y JS.-1.png

    Y quisiera dejarlo asi.

    Modificar Reproductor creado con html y JS.-2.png

  2. #2
    Registro
    18-diciembre-2012
    Ubicación
    Ciudad de México
    Edad
    26
    Mensajes
    897
    Pues al menos pon el código...
    Citar Citar  

  3. #3
    Ups perdon... este es el codigo del primer reproductor.

    Código 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>
    Citar Citar  

  4. #4
    Registro
    18-diciembre-2012
    Ubicación
    Ciudad de México
    Edad
    26
    Mensajes
    897
    Remplaza donde dice "var Spectrum..." con esto:

    Código HTML:
    var Spectrum = WaveSurfer.create({
                    container: '#audio-spectrum',
                    progressColor: "#03a9f4",
                    waveColor: "gray"
                });
    Y para modificar el color del fondo, agrega en el html
    Código HTML:
    <style>
    #audio-spectrum canvas{
        background-color: black;
    }
    </style>
    Citar Citar  

  5. #5
    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.
    Citar Citar  



Temas similares

  1. Crear theme o modificar uno ya creado
    Buenas a todos, hace poco que me he iniciado con wordpress y tengo dudas acerca de como se suele trabajar, o como lo haceis la mayoría. Vengo de...
    Respuestas: 4
    Último mensaje: 22-sep-2014
  2. ¿Hay un reproductor html 5?
    Alguien sabe el codigo para poner un reproductor con autoplay para un sitio web? es asi igualito como esta pagina: Rocket Game | Primer...
    Respuestas: 5
    Último mensaje: 14-jul-2014
  3. Reproductor en HTML
    ACLARACION: Si esto no va aqui porfavor moverlo Bueno estoy haciendo una pagina de unos amigos cantantes y quiero poner un reproductor en HTML,...
    Respuestas: 2
    Último mensaje: 12-mar-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •