See the upper right corner for the effect: Display page: http://xyy9.gitee.io/roll/

Move the mouse to expand the song list and song cover information

By default, select the first song, click the disc to play, and the picture below will switch to the corresponding picture. When playing, the disc will rotate, the stylus will not move, and click the song name to replay.
The source code is as follows:

html

<!--==========Ebony disc rotation=========-->
	<div id="songstatus">
	    <div id="songstatus_pic" onclick="control(songNum)">
	        <img src="img/music_disc.png" id="status_pic"><!--Vinyl record-->
	        <img src="img/discpointer.png" id="discpointer_pic"><!--Pointer-->
	    </div>
		<div id="songslist">
			<li id="songName1" style="margin-top: 20px;">
				<span onclick="start(1)">I'm in love</span>
				<audio src="music/I'm%20in%20love.mp3" preload loop id="music1" class="music"></audio>
			</li>
			<li id="songName2">
				<span onclick="start(2)">Spirited away</span>
				<audio src="music/Spirited away.mp3" preload loop id="music2" class="music"></audio>
			</li>
			<li id="songName3">
				<span onclick="start(3)">Residual phase</span>
				<audio src="music/Residual phase.mp3" preload loop id="music3" class="music"></audio>
			</li>
			
			<div id="playStatus">
				<img src="img/songCover0.png" id="songCover">
			</div>
		</div>
	</div>

music_disc.css

#songstatus{
    width: 200px;
    height: 80px;
    position: fixed;
    right: 0px;
    top: 0px;
    padding-top: 5px;
    z-index: 1000;
	transition: 0.5s;
}

#status_pic{
    width: 80px;
    height: 80px;
    position: fixed;
    right: 50px;
    top: 5px;
    border-radius:100%;
	transition: 0.5s;
    z-index: 1;
}

#discpointer_pic{
    width: 50px;
    height: 40px;
    position: fixed;
    right: 75px;
    top: 5px;
	transition: 0.5s;
    z-index: 1;
}

#songstatus:hover{
	background-color: white;
}
#songstatus:hover #status_pic{
    width: 100px;
    height: 100px;
}
#songstatus:hover #discpointer_pic{
    width: 80px;
    height: 70px;
}
#songstatus:hover #playStatus{
	display: block;
}

#songstatus:hover #songslist{
	width: 200px;
	opacity: 1;
}

#songslist{
	background-color: white;
    width: 0px;
    height: 100%;
    position: fixed;
    right: 0px;
    top: 85px;
	opacity: 0;
	transition: 0.5s;
}

#songslist li{
	line-height: 50px;
	text-align: center;
}

#songslist li span{
	font-size: 20px;
	color: black;
}

#songName1{
	border-right:5px solid orangered;
	font-weight:bold;
	background-color: #F7F7F7;
}

#playStatus{
	width: 200px;
	height: 100px;
	right: 0px;
	bottom: 0px;
	position: fixed;
	display: none;
}

#songCover{
    width: 150px;
    height: 150px;
    right: 25px;
    bottom: 50px;
    position: fixed;
	box-shadow: 5px 5px 5px 5px #E5DFD3;
}

musicPlayer.js

var rotateVal = 0; 
var InterVal; 
var isplay = 0;
var songNum = 1;

function control(num) {
	var audio = document.getElementById('music'+num); 
	if(audio!==null){ 
		if(audio.paused){ 
			audio.play();
			rotate();
		}else{
			audio.pause();
			clearInterval(InterVal);
		}
	} 
}

function rotate () {
	InterVal = setInterval(function () {
		var img = document.getElementById('status_pic');
		rotateVal += 7;
		img.style.transform = 'rotate(' + rotateVal + 'deg)';
		img.style.transition = '0.1s linear';
	}, 100)
}


function start(num){
	var max = 3;
	var audio;
	var name;
	songNum = num;
	
	for(var i=1;i<=max;i++){
		audio = document.getElementById('music'+i);
		audio.currentTime = 0;
		audio.pause();
		name = document.getElementById('songName'+i);
		name.style.borderRight = '0px solid orangered';
		name.style.fontWeight = 'normal';
		name.style.backgroundColor = 'white';
		if(i == num){
			audio.play();
			name.style.borderRight = '5px solid orangered';
			name.style.fontWeight = 'bold';
			name.style.backgroundColor = '#F7F7F7';
			document.getElementById('songCover').src = 'img/songCover'+num+'.png';
		}
		
	}
	
	clearInterval(InterVal);
	rotate();

}

Source code: https://gitee.com/xyy9/roll
Photo:
Disc
https://gitee.com/xyy9/roll/blob/master/img/music_disc.png
Stylus
https://gitee.com/xyy9/roll/blob/master/img/discpointer.png