3

Estoy trabajando con un reproductor de musica que sólo funciona gráficamente pero necesito incluirle una canción que se reproduzca automáticamente al cargar mi html.

El siguiente código gráficamente es:

     <a class="music-bg">
        <div class="lines">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
            <p> Musica </p>
      </a>

Y el CSS para darle efectos de barras de sonido ecualizador es el sig:

   /* Musica Bg */
   .music-bg {
   display: block;
   cursor: pointer;
   padding: 40px 0;
   text-align: center;
   border-top: 5px solid #fff;
   visibility: hidden;
   z-index: 10;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all 0.3s ease;
 }

  .music-bg p {
  color: #fff;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
 }

.music-bg .lines {
 display: flex;
 width: 24px;
 height: 24px;
 margin: 0 auto 10px;
 align-items: flex-end;
}

 .music-bg .lines span {
 display: inline-flex;
 margin: 0px 1px;
 width: 7px;
 height: 5px;
 background: #fff;
 }

 .audio-on .music-bg .lines span:nth-child(1) {
 -webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
 animation: musicline 2s 0.5s ease-out alternate infinite;
 }  

.audio-on .music-bg .lines span:nth-child(2) {
-webkit-animation: musicline 2s 1s ease-out alternate infinite;
 animation: musicline 2s 1s ease-out alternate infinite;
 } 

 .audio-on .music-bg .lines span:nth-child(3) {
 -webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
 animation: musicline 2s 1.5s ease-out alternate infinite;
 }

 .audio-on .music-bg .lines span:nth-child(4) {
 -webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
 animation: musicline 2s 0.25s ease-out alternate infinite;
 }

 .audio-on .music-bg .lines span:nth-child(5) {
 -webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
 animation: musicline 2s 0.75s ease-out alternate infinite;
 }

 .audio-on .music-bg .lines span:nth-child(6) {
 -webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
 animation: musicline 2s 1.25s ease-out alternate infinite;
 }

  @keyframes musicline {
0% {height: 5px;}
10% {height: 10px;}
20% {height: 5px;}
30% {height: 14px;}
40% {height: 18px;}
50% {height: 5px;}
60% {height: 16px;}
70% {height: 10px;}
80% {height: 12px;}
90% {height: 4px;}
100% {height: 18px;}

}

El código CSS sólo da el aspecto de reproducir una canción (PERO NO HAY DICHA CANCIÓN) y el usuario puede dar clic para pausar dicho efecto, como se muestra en las imágenes. introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

NECESITO REALMENTE INCLUIR UNA CANCIÓN CON ESTE CÓDIGO YA CREÁDO. AGRADEZCO SUS CONSEJOS

1

2 respuestas 2

3

Tu css esta incompleto, faltaba el @keyframes en tu css, ademas si deseas controlar música en html necesitas utilizar la etiqueta <audio> https://www.w3schools.com/html/html5_audio.asp aquí puedes aprender como se utiliza.

 @keyframes musicline {
  from {height: 3px;}
  to {height: 9px;}
}

Con el script jquery que he realizado podrás parar o activas la animación de reproducción.

$(document).ready(function () {

    var isplay = false;
	var audio = document.getElementById("musica");
    
      $(".music-bg").click(function () { 
        if(isplay){
              $(".music-bg").removeClass( "audio-on");
		      audio.pause();
              isplay = false;
        }else{
              $(".music-bg").addClass( "audio-on");
		      audio.play();
              isplay = true;
        }
      });
        
    });
	    .music-bg {
       background:#000;
       display: block;
       cursor: pointer;
       padding: 40px 0;
       text-align: center;
       border-top: 5px solid #fff;
       z-index: 10;
       -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
       -o-transition: all .3s ease;
       transition: all 0.3s ease;
     }

      .music-bg p {
      color: #fff;
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      
     }

    .music-bg .lines {
     display: flex;
     width: 24px;
     height: 24px;
     margin: 0 auto 10px;
     align-items: flex-end;
    }

     .music-bg .lines span {
     display: inline-flex;
     margin: 0px 1px;
     width: 7px;
     height: 5px;
     background: #fff;
     }

     .audio-on .lines span:nth-child(1) {
     -webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
     animation: musicline 2s 0.5s ease-out alternate infinite;
     }  

    .audio-on .lines span:nth-child(2) {
    -webkit-animation: musicline 2s 1s ease-out alternate infinite;
     animation: musicline 2s 1s ease-out alternate infinite;
     } 

     .audio-on .lines span:nth-child(3) {
     -webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
     animation: musicline 2s 1.5s ease-out alternate infinite;
     }

     .audio-on .lines span:nth-child(4) {
     -webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
     animation: musicline 2s 0.25s ease-out alternate infinite;
     }

     .audio-on .lines span:nth-child(5) {
     -webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
     animation: musicline 2s 0.75s ease-out alternate infinite;
     }

     .audio-on .lines span:nth-child(6) {
     -webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
     animation: musicline 2s 1.25s ease-out alternate infinite;
     }
     
     @keyframes musicline {
      from {height: 3px;}
      to {height: 15px;}
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="music-bg">
        <div class="lines" >
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
            <p> Musica </p>
</div>
	
<audio id="musica" src="musica.m4a" loop></audio>

Vale esta es la manera de manejar un <audio> sin usar el atributo controls, para ello utilizo los métodos play() y pause() de javascript.

la lógica del script es bastante simple. si por algún casual usas el atributo autoplay la declaración de la variable isplay debe empezar en true

2
  • Hola @Andres Dominguez Bravo , agradezco tu tiempo en tu respuesta PERO no se si me explique bien y creo que sí. La animación ya la tengo y me funciona a la perfección, las barritas del efecto suben y bajan y si doy click sobre de ellas se detienen, pero lo que quiero ES AÑADIRLE UNA CANCIÓN A ESTE EFECTO cuando recién se carga el index y que al pausar el efecto de las barras, se pause también la canción. SALUDOS Commented el 17 ene. 2020 a las 14:37
  • La etiqueta audio la uso y si funciona con una canción de fondo en mi index, pero lo que necesito es relacionar esta etiqueta con mi animación en css. Commented el 17 ene. 2020 a las 14:40
0

Me gustaría compartir lo que fue útil para mi en "La Web del Programador" donde me pudieron ayudar:

Primero Defino mi etiqueta <a class="music-bg"> que ya fue estilizada con CSS.

Despues Asingno un evento Onclick de JS llamado control y también utilizaré la etiqueta <audio> para enlazar mi canción dandole autoplay loop como propiedades:

            <a class="music-bg" onclick="control()">
                <div class="lines">
                    <!--Link de Canción-->
                    <audio src="extras/canción.mp3" autoplay loop></audio>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <p> Musica </p>
            </a>

Por ultimo Defino entre etiquetas de JS las funciones del evento llamando por su ID a mi etiqueta estilizada, por lo cual tendré que escribir una variable contador para que se pueda reproducir el audio a partir de que se carga y se presiona "n" cantidad de veces:

 <script>
        var contador=1;
        var audio=document.getElementsByTagName("audio")[0];
        audio.play();

        function control(){

            contador = contador+1
            if (contador%2==0){
                audio.pause();
            } else {
                audio.play();
            }
        }
    </script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.