Usar html y js para lograr una reproducción simple de música web

sección html

<div id="bmusic">
		<img id="logo" src="music/logo.jpg" width=100px height=100px > 
		<audio id="music" src="music/天长.mp3" ></audio>
		<p id="player">
		<img id="play" src="icon/play.png" width=24px height=24px>
		<img id="stop" src="icon/stop.png" width=24px height=24px>	
		<img id="next" src="icon/next.png" width=24px height=24px>
		<img id="queue" src="icon/queue.png" width=24px height=24px></p>
		<h3 id="mname"> </h3>//显示音乐名称
	</div>

js parte

var play=document.getElementById("play");
var music=document.getElementById("music");
var stop=document.getElementById("stop");	
var next=document.getElementById("next");
var queue=document.getElementById("queue");
var mname=document.getElementById("mname");
var pause;
var musics=["天长.mp3","红昭愿.mp3","冬日.mp3"];
var musicindex=0;
play.onclick=playbtn;
stop.onclick=stopbtn;
next.onclick=nextbtn;

function playbtn(){
	 music.play();
	 play.src="icon/pause.png"	
	 mname.innerHTML=musics[musicindex];
	 play.setAttribute("id","pause");	 
	 pause=document.getElementById("pause");
	 pause.onclick=pausebtn;
	
}


function pausebtn(){
	music.pause();
	pause.src="icon/play.png";
	pause.setAttribute("id","play");
	play.onclick=playbtn;
	
}

function stopbtn(){
	 music.load();	
	 pause.src="icon/play.png";
}

function nextbtn(){	
	if(musicindex>=musics.length-1){
		musicindex=-1;
	}
	musicindex++;
	
	music.src="music/"+musics[musicindex];
	playbtn();
	mname.innerHTML=musics[musicindex];
	
}

parte css

#bmusic{
	  margin: 20px;
      width: 300px;
      height: 450px;
      background-color:white;
      box-shadow: 0 0 5px gray;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: space-between;
	}
	#logo{
		width: 180px;
        height: 180px;
        border-radius: 100px;
		margin-left:auto;
		margin-right:auto;
		margin-top:50px;
	}
	#player{
		margin-left:auto;
		margin-right:auto;
		margin-bottom:70px;
	}
	#play{
		padding:5px 5px 5px 5px;
	}
	#stop{
		
			padding:5px 5px 5px 5px;
	}
	#next{
			padding:5px 5px 5px 5px;
	}
	#queue{
			padding:5px 5px 5px 5px;
	}
	#pause{
			padding:5px 5px 5px 5px;
	}

El siguiente paso para darse cuenta de la pantalla letras función funciones y rotación de imagen
Logros Exposición:
http://175.24.69.245/jjy/jjy.html