Skip to main content
se añadieron 306 caracteres en el cuerpo
Origen Enlace
   /* 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;}

}

   /* 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;
 }
   /* 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;}

}

Origen Enlace

¿Cómo Incluir audio a etiqueta estilizada de html?

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;
 }

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