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.
NECESITO REALMENTE INCLUIR UNA CANCIÓN CON ESTE CÓDIGO YA CREÁDO. AGRADEZCO SUS CONSEJOS