唱片旋转播放效果

博客简介

本篇博客介绍一种较为方便的唱片旋转播放效果，我们用audio插入音频，并且在设计一个插入照片的div，当点击播放时，唱片旋转，点击暂停唱片回到原始位置，停止旋转。

效果展示

旋转唱片设计

要点如下

• 用audio插入音频
• 设置div插入照片，设置边框为圆形
• 设置CSS动画
• 设置监听，当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2

用audio插入音频

插入视频非常简单，使用audio标签即可，并且设置控件：

<audio src="Music/welcome to new work.mp3" controls="controls">Sorry your brower does not support audio</audio>

设置div插入照片，设置边框为圆形

.box1 img{
	width: 200px;
	height: 200px;
}
.box2{
	height: 200px;
	width: 500px;
	float: right;
}
.box2 h2{
	font-family: "幼圆";
}

插入图片后，整个布局就做好了：

设置CSS动画

设置CSS动画，从0~100%设置线性的变化关键帧，整个旋转唱片的设计中，关键的一步是，设置两个class属性，当播放点击时，设置div区域的class属性即可。这里我们设置animation1和animation2两个类，一个状态是infinite永动，另一个是paused停止：

.animation1{	
	width: 200px;
	height: 200px;
	border:1px solid white;
	border-radius: 100px;
	overflow: hidden;
	float: left;
	animation:frame 6s  linear paused;
}
.animation2{	
	width: 200px;
	height: 200px;
	border:1px solid white;
	border-radius: 100px;
	overflow: hidden;
	float: left;
	animation:frame 6s  linear infinite;
}

设置监听

当点击播放时，设置div的class为animation2，点击暂停设置div的class为animation2，如何判断用户是否点击了播放/暂停呢？audio给我们提供了这些事件：

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

我们这里根据play和pause事件来判断audio的播放状态，当用户点击暂停，pause返回为1，点击播放play返回为1：

（1）控制唱片的旋转

function player(audio,pic)
{
	if(audio.paused)//当前状态
	{
		pic.setAttribute("class","animation1");
	}
	else
	{
		pic.setAttribute("class","animation2");
	}
}

（2）设置监听：

function playe_Pause()
{
	if(!document.getElementsByTagName) return false;
	var audioes=document.getElementsByTagName("audio");
	var pictures=document.getElementsByTagName('article')[0].getElementsByTagName("img");
	if(!audioes||!pictures) return false;
	audioes[0].addEventListener("pause",function(){
		player(audioes[0],pictures[0].parentNode);
	});
		audioes[0].addEventListener("play",function(){
		player(audioes[0],pictures[0].parentNode);
	});	
}

这里我们为了增强函数的重用性，对函数设置了几个参数，分成了两段，完全可以写在一个函数里。

最后的效果