SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
var img = document.getElementById("images");
			var playBtn = document.getElementById("playBtn");
			var audio = document.createElement("audio");
			audio.src = "http://demo.lanrenzhijia.com/2014/music0917/images/i1.mp3"
			playBtn.addEventListener("click",toggle);
			//切换函数
			function toggle(){
				//若状态为暂停，则播放，否则暂停，并切换按钮
				if(img.style.animationPlayState == "paused" || !img.style.animationPlayState){
					img.style.animationPlayState = "running";
					playBtn.className = playBtn.className.replace(" fa-play"," fa-pause");
					playBtn.title = playBtn.title.replace('播放','暂停');
					audio.play();
				}else{
					pauseMusic()
				}
			}
			//音乐暂停
			function pauseMusic(){
				img.style.animationPlayState = "paused";
					playBtn.className = playBtn.className.replace(" fa-pause"," fa-play");
					playBtn.title = playBtn.title.replace('暂停','播放');
					audio.pause();
			}
			
			var progress = document.getElementById("progress");
			var progressBar = document.getElementById("progressBar");
			//播放进度函数
			function setPercent(percentage){
				progress.style.width = percentage + "%";
			}
			//点击设置进度条位置
			progressBar.addEventListener("click",function(e){
				var nPercent =Math.round( e.offsetX / progressBar.offsetWidth * 100);
				setPercent(nPercent);
				//设置当前播放时间
				var musicDur = duration();
				var percentTime = musicDur*nPercent / 100;
				audio.currentTime = percentTime;
			})
			
			var TRYTIMES = 10;	//定义循环总次数
			var tried = 0;		//定义已经循环次数
			//定义一个函数，若获取的duration为NaN，则继续调用
			function duration(){
				tried++;
				var iDur = audio.duration;
				if(isNaN(iDur) && tried < TRYTIMES){
					setTimeout(function(){
						duration();
					},100)
				}
				return iDur;
			}
			var playTime = 0, //定义audio的当前播放时间的变量
				percent = 0; //定义百分比
			//获取audio已经播放时间函数
			function getTimes(){
				playTime = audio.currentTime;
			}
			//定义一个函数获取当前播放时间占总时间比例，不断调用
			var timing = setInterval(function(){
				getTimes();
				if(playTime != 0 && audio.duration != 0){
					percent = (playTime/(audio.duration))*100;
					setPercent(percent);
				}
			})
			//定义歌曲列表
			var songList = [
				{
					name:'你猜',
					url:'http://demo.lanrenzhijia.com/2014/music0917/images/i1.mp3'
				},{
					name:'洋葱',
					url:'http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201606/jiaoben4279/playlist/yangcong.mp3'
				},{
					name:'Sugar',
					url:'http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201606/jiaoben4279/playlist/Sugar.mp3'
				},{
					name:'SomebodyThatIUsedToKnow',
					url:'http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201511/jiaoben3813/build/music/SomebodyThatIUsedToKnow.mp3'
				}
			];
			var musicName = document.getElementById("musicName"),
				lastBtn = document.getElementById("lastBtn"),
				nextBtn = document.getElementById("nextBtn");
			//定义一个初始变量，即第几首歌
			var currentNum = 0;
			function btnColor(){
				if(currentNum < 1){
					lastBtn.style.color = "#CCCCCC";
					nextBtn.style.color = "#005AAB";
					lastBtn.title = lastBtn.title.replace('上一首','没有啦');
					nextBtn.title = '下一首';
				}else if(currentNum > songList.length-2){
					nextBtn.style.color = "#CCCCCC";
					nextBtn.title = nextBtn.title.replace('下一首','没有啦');
				}else{
					lastBtn.style.color = "#005AAB";
					nextBtn.style.color = "#005AAB";
					lastBtn.title = '上一首';
					nextBtn.title = '下一首';
				}
			}
			btnColor();
			//点击上一首按钮，切换上一首歌
			lastBtn.addEventListener("click",function(){
				if(currentNum<1){
				}else{
					currentNum --;
					turnSong()
				}
				btnColor();
			})
			//点击下一首按钮，切换到下一首歌
			nextBtn.addEventListener("click",function(){
				if(currentNum>songList.length-2){
				}else{
					currentNum ++;
					turnSong();
				}
				btnColor();
			})
			//切歌换歌名函数
			function turnSong(){
				audio.src = songList[currentNum].url;
				musicName.innerHTML = songList[currentNum].name;
				setPercent(0);
				if(img.style.animationPlayState == "paused" || !img.style.animationPlayState){
					pauseMusic()
				}else{
					playBtn.className = playBtn.className.replace(" fa-play"," fa-pause");
					audio.play();
				}
				turnNext();
			}
			turnSong();
			//自动换歌
			function turnNext(){
				getTimes();
				if(audio.currentTime >= audio.duration){
					if (currentNum == songList.length-1) {
						currentNum =0;
						turnSong();
					} else{
						currentNum++;
						turnSong();
					}
				}else{
					setTimeout(function(){
						turnNext();
					},1000)
				}
				btnColor();
			}
			turnNext();

            
<div class="wrap">
			<div class="top-box">
				<div class="img-box">
					<img src="http://yuleimg.9ku.com/Article/20170106/9505be7d2cedb0abea68860cbdff2c5f.jpg?x-oss-process=image/resize,m_lfit,w_560,limit_1/auto-orient,0" id="images"/>
				</div>
				<div class="img-cave"></div>
			</div>
			<div id="musicName"></div>
			<div class="progress-bar" id="progressBar">
				<div id="progress"></div>
			</div>
			<div class="btn-box">
				<span class="fa fa-step-backward" id="lastBtn" title="上一首"></span>
				<span class="fa fa-play" id="playBtn" title="播放"></span>
				<span class="fa fa-step-forward" id="nextBtn" title="下一首"></span>
			</div>
		</div>

            
*{margin: 0;padding: 0;}
.wrap{
	width: 100%;
	height: 100%;
}
.top-box{
	width: 200px;
	height: 200px;
	border: 1px solid #D4D4D4;
	border-bottom: none;
	margin: 10px auto 0;
	position: relative;
}
.img-box{
	width: 190px;
	height: 190px;
	margin: 5px;
	border-radius: 50%;
	overflow: hidden;
}
.img-box img{
	width: 100%;
	height: 100%;
	-webkit-animation: rotate 5s linear 0s infinite;
	-webkit-animation-play-state:paused;
}
@-webkit-keyframes rotate{
	0%{ transform: rotate(0deg);}
	100%{ transform: rotate(360deg);}
}
.img-cave{
	width: 37px;
	height: 37px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	border: 4px solid #FFFFFF;
	background-color: #CCCCCC;
	transform: translate(-50%,-50%);
}
#musicName{
	width: 200px;
	height: 20px;
	border: 1px solid #D4D4D4;
	border-top: none;
	margin: 0 auto;
	text-align: center;
	line-height: 20px;
	font-size: 15px;
	color: #005AAB;
}
.progress-bar{
	width: 200px;
	height: 5px;
	border-left: 1px solid #D4D4D4;
	border-right: 1px solid #D4D4D4;
	margin: 0 auto;
}
#progress{
	width: 0;
	height: 5px;
	background-color: #CCCCCC;
}
.btn-box{
	width: 200px;
	height: 50px;
	border: 1px solid #D4D4D4;
	margin: 0 auto;
	text-align: center;
}
.btn-box span{
	cursor: pointer;
	line-height: 50px;
	font-size: 25px;
	color: #005AAB;
}
#playBtn{
	margin: 0 40px;
}

            

                
本项目引用的自定义外部资源