HTML5复古风格音乐播放器代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5复古风格音乐播放器代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>html5复古风格音乐播放器代码</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<audio id="myAudio" preload="auto">
	<source src="http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3">
	<source src="http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3">
</audio>
<div id="cdPlayer">
	<div id="myConsole">曲名</div>
	<div id="CD">
		<div id="cdDisk"></div>
		<div id="cdCover"></div>
	</div>
	<div id="cdControllerArm"></div>
	<div id="playMode">
		<div id="shuffleMode" class="mode" title="随机播放"><i class="iconfontPlayMode">&#xe85e;</i>&nbsp;</div>
		<div id="listMode" class="mode" title="顺序播放"><i class="iconfontPlayMode">&#xe7ec;</i>&nbsp;</div>
		<div id="loopMode" class="mode" title="单曲循环"><i class="iconfontPlayMode">&#xe7df;</i>&nbsp;</div>
	</div>
	<div id="controllerButton">
		<div id="playBtn" class="button" title="播放"><i class="iconfont">&#xe830;</i>&nbsp;</div>
		<div id="pauseBtn" class="button" title="暂停"><i class="iconfont">&#xe81f;</i>&nbsp;</div>
		<div id="nextBtn" class="button" title="下一曲"><i class="iconfont">&#xe811;</i>&nbsp;</div>
		<div id="preBtn" class="button" title="上一曲"><i class="iconfont">&#xe826;</i>&nbsp;</div>
		<div id="stopBtn" class="button" title="停止"><i class="iconfont">&#xe875;</i>&nbsp;</div>
		<div id="muteBtn" class="button" title="静音"><i class="iconfont">&#xe8b1;</i>&nbsp;</div>
		<div id="firstBtn" class="button" title="首曲"><i class="iconfont">&#xe787;</i>&nbsp;</div>
		<div id="lastBtn" class="button" title="末曲"><i class="iconfont">&#xe7cc;</i>&nbsp;</div>
	</div>
</div>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

/** * Created by Nandem on 2015/11/12. */
var $playBtn;
	var $pauseBtn;
	var $nextBtn;
	var $preBtn;
	var $stopBtn;
	var $muteBtn;
	var $firstBtn;
	var $lastBtn;
	var $shuffleMode;
	var $listMode;
	var $loopMode;
	var myAudio;
	var controllArm;
	var $cdCover;
	var iStartDeg;
	var iEndDeg;
	var iIncrement;
	var songsListIndex;
	//the index of song in the songslistvar playMode;
	//list shuffle loopvar shuffleIndex;
	var shuffleIndexCount;
	$().ready(function (){
	init();
	for(var i = 0;
	i < songsList.length;
	i++){
	songsList[i].musicURL = encodeURI(songsList[i].musicURL);
}
myAudio.src = decodeURI(songsList[songsListIndex].musicURL);
	/*^_^------------------some event listeners-------------------^_^*/
 myAudio.addEventListener('ended',function (){
	controllArm.style.transform="rotate(-130deg)" if(playMode == "list"){
	songsListIndex++;
	if (songsListIndex >= songsList.length + 1) songsListIndex = 0;
}
else if(playMode == "shuffle"){
	songsListIndex = shuffle();
}
else{
	songsListIndex = songsListIndex;
}
myAudio.src = decodeURI(songsList[songsListIndex].musicURL);
	myAudio.load();
	iStartDeg = -95;
	iEndDeg = -120;
	myAudio.play();
}
,false);
	myAudio.addEventListener("timeupdate",function (){
	var $myCon = $("#myConsole");
	if (!isNaN(myAudio.duration)){
	var progressValue = myAudio.currentTime/myAudio.duration;
	if(myAudio.paused) return;
	//confrim the controllerArm can be rotated immediately iStartDeg = -95 - 25 * progressValue;
	controllArm.style.transform = "rotate(" + iStartDeg +"deg)";
	$myCon.text(songsList[songsListIndex % songsList.length].title + "-" + songsList[songsListIndex % songsList.length].artist);
}
else $myCon.text("error");
}
,false);
}
);
	function initEventClick(){
	/*^_^------------------some click events-------------------^_^*/
 $playBtn.click(function (){
	iIncrement = (iStartDeg - iEndDeg);
	controllArm.style.transform="rotate(" + iStartDeg +"deg)";
	if($cdCover.hasClass("cdPause")){
	$cdCover.removeClass("cdPause");
	$cdCover.removeClass("cdStart");
}
if(!$cdCover.hasClass("cdStart")) $cdCover.addClass("cdStart");
	myAudio.play();
}
);
	$pauseBtn.click(function (){
	controllArm.style.transform="rotate(-130deg)" if(!$cdCover.hasClass("cdPause")) $cdCover.addClass("cdPause");
	myAudio.pause();
}
);
	$nextBtn.click(function (){
	changeSong("next");
}
);
	$preBtn.click(function (){
	changeSong("pre");
}
);
	$stopBtn.click(stop);
	function stop(){
	controllArm.style.transform="rotate(-130deg)" $cdCover.removeClass("cdPause");
	$cdCover.removeClass("cdStart");
	myAudio.load();
}
$muteBtn.click(function (){
	myAudio.muted = !myAudio.muted;
	if(myAudio.muted) $(this).css({
	"color":'red'}
);
	else $(this).css({
	"color":'#b1b9c6'}
);
}
);
	$firstBtn.click(function (){
	changeSong("first");
}
);
	$lastBtn.click(function (){
	changeSong("last");
}
);
	$shuffleMode.click(function (){
	playMode = "shuffle";
	$("#playMode").find("div").css({
	"color":"#b1b9c6"}
);
	$(this).css({
	"color":"#e74d3c"}
);
}
);
	$listMode.click(function (){
	playMode = "list";
	$("#playMode").find("div").css({
	"color":"#b1b9c6"}
);
	$(this).css({
	"color":"#e74d3c"}
);
}
);
	$loopMode.click(function (){
	playMode = "loop";
	$("#playMode").find("div").css({
	"color":"#b1b9c6"}
);
	$(this).css({
	"color":"#e74d3c"}
);
}
);
	/*^_^------------------some buttons' hover-------------------^_^*/
 $muteBtn.hover ( function (){
	if(!myAudio.muted) $(this).css({
	"color":'#ffffff'}
);
}
,function (){
	$(this).css({
	"color":'#b1b9c6'}
);
	if(myAudio.muted) $(this).css({
	"color":'red'}
);
}
);
}
function initComponents(){
	$playBtn = $("#playBtn");
	$pauseBtn = $("#pauseBtn");
	$nextBtn = $("#nextBtn");
	$preBtn = $("#preBtn");
	$stopBtn = $("#stopBtn");
	$muteBtn = $("#muteBtn");
	$firstBtn = $("#firstBtn");
	$lastBtn = $("#lastBtn");
	$shuffleMode = $("#shuffleMode");
	$listMode = $("#listMode");
	$loopMode = $("#loopMode");
	myAudio = $("#myAudio")[0];
	controllArm = $("#cdControllerArm")[0];
	$cdCover = $("#cdCover");
	iStartDeg = -95;
	iEndDeg = -120;
	iIncrement = 25;
	songsListIndex = 0;
	//the index of song in the songslist playMode = "list";
	//list shuffle loop $("#listMode").css({
	"color":"#e74d3c"}
);
	shuffleIndex = [];
	shuffleIndexCount = songsList.length - 1;
	initShuffleGenerator();
}
function initShuffleGenerator(){
	for(var i = 0;
	i < songsList.length;
	i++){
	shuffleIndex[i] = i;
}
}
function init(){
	initComponents();
	initEventClick();
}
/*^_^------------------some core functions-------------------^_^*/
//var shuffleIndex = [0,1,2,3,4,5,6];
	//var shuffleIndexCount = 6;
	function shuffle(){
	var tem = getRandom(shuffleIndexCount);
	var tem2 = shuffleIndex[tem];
	shuffleIndex[tem] = shuffleIndex[shuffleIndexCount];
	shuffleIndexCount--;
	if(shuffleIndexCount < 0){
	shuffleIndexCount = songsList.length;
}
return tem2;
}
function changeSong(whatDirection){
	if(myAudio.currentTime != 0){
	if(!myAudio.paused){
	if ($cdCover.hasClass("cdPause")){
	$cdCover.removeClass("cdPause");
	$cdCover.removeClass("cdStart");
}
if (!$cdCover.hasClass("cdStart")) $cdCover.addClass("cdStart");
	controllArm.style.transform = "rotate(-130deg)" if (whatDirection == "pre"){
	songsListIndex--;
	if (songsListIndex <= -1) songsListIndex = songsList.length;
}
else if (whatDirection == "next"){
	songsListIndex++;
	if (songsListIndex >= songsList.length + 1) songsListIndex = 0;
}
else if (whatDirection == "first"){
	songsListIndex = 0;
}
else if(whatDirection == "last"){
	// alert(songsList.length);
	songsListIndex = songsList.length - 1;
	// alert(songsListIndex);
}
else{
}
myAudio.src = decodeURI(songsList[songsListIndex].musicURL);
	myAudio.load();
	myAudio.play();
}
}
}
/*^_^------------------some assistant functions-------------------^_^*/
//generate randomfunction getRandom(n){
	return Math.floor(Math.random()*n+1)}
//convert float/double to percentNumber.prototype.toPercent = function(n){
	n = n || 2;
	return ( Math.round( this * Math.pow( 10,n + 2 ) ) / Math.pow( 10,n ) ).toFixed( n ) + '%';
}
;
	/*^_^-------------------------songs list--------------------------^_^*/
var songsList =[{
	"title":"行歌","artist":"陈鸿宇","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"有梦好甜蜜(口琴变奏)","artist":"渠成","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"心愿","artist":"四个女生","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"广东姑娘","artist":"五条人","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"扬州","artist":"李晋","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"小五","artist":"崔跃文","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
,{
	"title":"多兰娜","artist":"浩子","coverURL":"","musicURL":"http://dx.sc.chinaz.com/Files/DownLoad/sound1/201510/6457.mp3"}
]

CSS代码(index.css):

body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000000;}
/*动画基础*/
@keyframes myCDRotate{from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@-moz-keyframes myCDRotate /* Firefox */
{from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes myCDRotate /* Safari 和 Chrome */
{from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@-o-keyframes myCDRotate /* Opera */
{from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
@font-face{font-family:'iconfont';src:url('../fonts/iconfont.eot');/* IE9*/
 src:url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
 url('../fonts/iconfont.woff') format('woff'),/* chrome、firefox */
 url('../fonts/iconfont.ttf') format('truetype'),/* chrome、firefox、opera、Safari,Android,iOS 4.2+*/
 url('../fonts/iconfont.svg#iconfont') format('svg');/* iOS 4.1- */
}
.iconfont{font-family:"iconfont" !important;font-size:20px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
.iconfontPlayMode{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
#cdPlayer{width:500px;height:500px;position:absolute;top:50%;left:47%;margin-top:-250px;margin-left:-250px;}
#CD{width:100%;height:100%;background:url("../imgs/cdbk.png") no-repeat;background-size:cover;z-index:2000;position:absolute;}
#cdDisk{width:80%;height:80%;text-align:center;background:url("../imgs/cddisk.png") no-repeat;background-size:cover;position:absolute;top:50px;left:50px;z-index:2000;}
#cdCover{width:36%;height:36%;/*border-radius:100px;*/
 background:url("../imgs/logo.png") no-repeat;background-size:cover;position:absolute;top:50%;left:50%;margin-top:-18%;margin-left:-18%;z-index:3;transition:all 0.5s;}
.cdStart{animation:myCDRotate 5s infinite linear;}
.cdPause{/*animation:myCDRotate 1s 2 alternate;*/
 /*animation:myCDRotate 2s infinite linear;*/
 animation-play-state:paused;}
#cdControllerArm{width:20%;height:50%;/*border-radius:100px;*/
 background:url("../imgs/controllerArm.png") no-repeat;background-size:contain;position:absolute;z-index:2001;top:80px;left:-60px;-moz-transform-origin:top right;-webkit-transform-origin:top right;-o-transform-origin:top right;transition:all 0.8s;transform:rotate(-130deg);}
#controllerButton{width:125px;height:220px;position:absolute;top:312px;right:-60px;margin-top:-250px;z-index:1;}
#controllerButton .button{width:100px;height:37px;text-align:right;line-height:37px;color:#b1b9c6;font-size:20px;font-family:'华文新魏';background:url("../imgs/controllBtn.png") no-repeat;background-size:contain;margin:10px 0;cursor:pointer;}
#controllerButton .button:hover{color:#ffffff;}
#playMode{width:120px;height:30px;text-align:center;position:absolute;right:2px;bottom:20px;z-index:2001;}
#playMode .mode{width:26px;height:30px;text-align:center;line-height:30px;float:left;color:#b1b9c6;font-size:16px;margin:0 2px;padding-left:4px;cursor:pointer;}
#playMode .mode:hover{color:#e74d3c;}
#myConsole{width:500px;height:30px;font-family:'华文新魏';font-size:20px;color:#e74d3c;position:absolute;left:30px;bottom:10px;z-index:2001;}

附件:下载该文件资源,减少时间成本(增值服务)