HTML音乐播放器插件编写

效果见右上角：展示页面：http://xyy9.gitee.io/roll/

鼠标移入可展开歌单和歌曲封面信息

默认选中第一首，点击碟片进行播放，底下图片切换至对应图片，播放时，碟片进行旋转，唱针不动，点击歌曲名字进行重播。
源码如下：

html

<!--==========黑胶碟片旋转=========-->
	<div id="songstatus">
	    <div id="songstatus_pic" onclick="control(songNum)">
	        <img src="img/music_disc.png" id="status_pic"><!--黑胶唱片-->
	        <img src="img/discpointer.png" id="discpointer_pic"><!--指针-->
	    </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)">千与千寻</span>
				<audio src="music/千与千寻.mp3" preload loop id="music2" class="music"></audio>
			</li>
			<li id="songName3">
				<span onclick="start(3)">余生相</span>
				<audio src="music/余生相.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();

}

网站源码：https://gitee.com/xyy9/roll
图片：
碟片
https://gitee.com/xyy9/roll/blob/master/img/music_disc.png
唱针
https://gitee.com/xyy9/roll/blob/master/img/discpointer.png