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í][1]][1]
[![introducir la descripción de la imagen aquí][2]][2]

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


  [1]: https://i.sstatic.net/ESTAY.jpg
  [2]: https://i.sstatic.net/LbnjE.jpg