Problème d'affichage d'un lecteur

Bonjour,

Je débute dans le développement web, et j'ai un problème sur l'affichage d'une barre de lecture que j'ai fait.
le lecteur est constitué d'un rectangle contenant un bouton, une barre de lecture et un curseur (playhead).
Le bouton play s'affiche bien, mais la barre de lecture (timeline) est invisible, et le curseur se trouve en haut dans le rectangle.

<style>

			/*lecteur*/
			#audioplayer{
				width: 480px;
				height: 60px;
				margin: 50px auto auto auto;
				border: solid;
			 }

			/*bouton de lecture*/
			#pButton{
			    height:60px; 
			    width: 60px;
			    border: none;
			    background-size: 50% 50%;
			    background-repeat: no-repeat;
			    background-position: center;
			    float:left;
			    outline:none;
			 }

			 .play{background: url('Images/Play.png') no-repeat;}/*image pour play*/
			 .pause{background: url('Images/Pause.png') no-repeat;}/*image pour pause*/;

			/*timeline*/;
			#timeline{
				width: 400px;
				height: 20px;
				margin-top: 20px;
				float: left;
				border-radius: 15px;
				background: rgba(0,0,0,.3);
			 }


			#playhead{
				width: 18px;
				height: 18px;
				border-radius: 50%;
				margin-top: 1px;
				background: rgba(0, 0, 0,1);
			 }

		 </style>

		<!--association des fonctions aux différents boutons et affichage-->
		<div id="audioplayer">
			<button id="pButton" class="play" onclick="play()"></button>
			<div id="timeline">
				<div id="playhead">
			</div>
			</div>
		 </div>

Ou se trouvent mes erreurs?

si vous avez besoin du reste du code je peux le poster
merci pour votre aide.
bon Week end!