HTML5环形音乐播放器

浏览数：28 / 时间：2015年06月09日

通过 HTML5，音乐在网络上东山再起。添加音频文件就像插入图像那样简单，并且用户能在浏览器外播放音乐，从而实现惊人的音乐体验。<audio> 标签的推出使您不再需要外部音乐播放器，在网站上实现真正的声音融合。
随着 HTML5 的出现，发生了一些重大变化，特别是在音乐和音频方面。开发人员不再要求 web 冲浪者使用 Adobe Flash、Apple QuickTime 或 Microsoft Windows 媒体播放器等特殊的播放器。这意味着用户不必担心是否有最新的兼容插件（或任何播放器插件）。他们只需打开自己喜欢的浏览器并聆听能发出声音的任何内容，如音乐、有声读物、FX 声音效果或朋友和家人录制的消息。

好吧，直接看代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5环形音乐播放器</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div style="text-align:center;clear:both">
</div>
  <div id="container">
	<label class="to-back-label" for="to-back"><i class="fa fa-bars fa-lg"></i></label><!-- 歌曲播放列表按钮 -->
	<input type="checkbox" id="to-back">
	<canvas id="progress" width="320" height="320"></canvas><!-- 进度条 -->
	<div id="player">
		<audio id="audio" controls>
			<source src="爱的就是你.mp3" type="audio/mpeg" codecs="mp3"></source>		
		</audio>
		<img src="album_cover.jpg"><!-- 专辑封面 -->
		<label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg"></i></label>
		<input type="checkbox" id="to-lyrics"><!-- 歌词切换 -->
		<div class="cover">
			<div class="controls">
				<button id="backward" title="播放模式"><i class="fa fa-retweet fa-lg"></i></button>
				<button id="backward" title="后退"><i class="fa fa-backward fa-2x"></i></button>			
				<!-- 暂停 -->
				<button id="play-pause" title="暂停" onclick="togglePlayPause()"><i class="fa fa-play fa-3x"></i></button>
				<!-- 前进 -->
				<button id="forward" title="前进"><i class="fa fa-forward fa-2x"></i></button>
				<!-- 循环播放 -->
				<button id="backward" title="循环播放"><i class="fa fa-random fa-lg"></i></button>
				<!-- 音量控制 -->
				<input id="volume" name="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />
			</div>
			<div class="info">
				<p class="song"><a href="#" target="_blank">爱的就是你</a></p>
				<p class="author"><a href="#" target="_blank">王力宏</a></p>
			</div>
			<div class="lyrics">
				<p>爱的就是你</p>
				<p>演唱：王力宏</p>
				<p></p> 
				<p>失去才会懂得珍惜</p>
				<p>但我珍惜你</p>
				<p>伤越痛就是爱越深</p>
				<p>我不相信</p>
				<p>你和我同时停止呼吸</p>
				<p>每一次我们靠近</p>
				<p>你让我忘了困惑</p>
				<p>忘了所有烦心</p>
				<p>我把你紧紧拥入怀里</p>
				<p>捧你在我手心</p>
				<p>谁叫我真的爱的就是你</p>
				<p>在爱的纯净世界</p>
				<p>你就是我唯一</p>
				<p>永远永远不要怀疑</p>
				<p>我把你当作我的空气</p>
				<p>如此形影不离</p>
				<p>我大声说我爱的就是你</p>
				<p>在爱的幸福国度</p>
				<p>你就是我唯一</p>
				<p>我唯一爱的就是你</p>
				<p>我真的爱的就是你</p>
				<p></p>
				<p>失去才会懂得珍惜</p>
				<p>但我珍惜你</p>
				<p>伤越痛就是爱越深</p>
				<p>我不相信</p>
				<p>你和我同时停止呼吸</p>
				<p>每一次我们靠近</p>
				<p>你让我忘了困惑</p>
				<p>忘了所有烦心 OH</p>
				<p>我把你紧紧拥入怀里</p>
				<p>捧你在我手心</p>
				<p>谁叫我真的爱的就是你</p>
				<p>在爱的纯净世界</p>
				<p>你就是我唯一</p>
				<p>永远永远不要怀疑</p>
				<p>我把你当作我的空气</p>
				<p>如此形影不离</p>
				<p>我大声说我爱的就是你</p>
				<p>在爱的就幸福国度</p>
				<p>你就是我唯一</p>
				<p>我唯一爱的就是你</p>
				<p>我真的爱的就是你</p>
				<p>就是你 YEYE</p>
				<p>就是你</p>
				<p>就是你 YEYE</p>
				<p>唯一爱的就是你</p>
				<p></p>
				<p>我把你紧紧拥入怀里</p>
				<p>捧你在我手心</p>
				<p>谁叫我真的爱的就是你</p>
				<p>在爱的纯净世界</p>
				<p>你就是我唯一</p>
				<p>永远永远不要怀疑</p>
				<p>我把你当作我的空气</p>
				<p>如此形影不离</p>
				<p>我大声说我爱的就是你</p>
				<p>在爱的就幸福国度</p>
				<p>你就是我唯一</p>
				<p>我唯一爱的就是你</p>
				<p>我真的爱的就是你</p>
				<p>我唯一爱的就是你</p>
				<p>我真的爱的就是你</p>
			</div><!-- 歌词 -->
			<p class="scroll">向下滚动</p>
		</div>
	</div><!-- #播放列表 -->
	<div id="flip-back">
		<ul class="playlist">
			<h3>专辑列表</h3>
			<li><a href="#">1. 习大大爱着彭麻麻</a></li>
			<li><a href="#">2. 一路上有你</a></li>
			<li><a href="#" style="color:#26C5CB;"><i class="fa fa-play" style="margin-right:4px;"></i> 3. 爱的就是你</a></li><!-- 正在播放列表 -->
			<li><a href="#">4. 老公赚钱老婆花</a></li>
			<li><a href="#">5. 北京北京</a></li>
			<li><a href="#">6. 小苹果</a></li>
			<li><a href="#">7. 好男人都死哪去了</a></li>
			<li><a href="#">8. 你是我的眼</a></li>
			<li><a href="#">9. 朋友</a></li>
			<li><a href="#">10. 吻别</a></li>
		</ul>
	</div>
</div>
<!-- 如有不懂，请加qq群：135430763共同学习！ -->
<!-- 另一篇播放器地址：http://blog.csdn.net/xmtblog/article/details/32957663 -->
<script src="js/index.js"></script>
</body>
</html>

var audio = document.getElementById('audio');
var progress = document.getElementById('progress');
var playpause = document.getElementById("play-pause");
var volume = document.getElementById("volume");
audio.controls = false;
audio.addEventListener('timeupdate', function() {
  	updateProgress();
}, false);
/**
 * 暂停播放
 */
function togglePlayPause() {
   if (audio.paused || audio.ended) {
      playpause.title = "Pause";
      playpause.innerHTML = '<i class="fa fa-pause fa-3x"></i>';
      audio.play();
   } else {
      playpause.title = "Play";
      playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
      audio.pause();
   }
}
/**
 * 设置音量
 */
function setVolume() {
   audio.volume = volume.value;
}
/**
 * 更新进度
 */
function updateProgress() {
	var percent = Math.floor((100 / audio.duration) * audio.currentTime);
	progress.value = percent;
	var canvas = document.getElementById('progress');
	var context = canvas.getContext('2d');
	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = 150;
	var circ = Math.PI * 2;
	var quart = Math.PI / 2;
	var cpercent = percent / 100; 
	context.beginPath();
	context.arc(centerX, centerY, radius, 0, ((circ) * cpercent), false);
	context.lineWidth = 10;
	context.strokeStyle = '#26C5CB';
	context.stroke();
	if (audio.ended) resetPlayer();
}
function resetPlayer() {
	  audio.currentTime = 0; context.clearRect(0,0,canvas.width,canvas.height);
  playpause.title = "Play";
	  playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
}

/* Font Awesome */
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/* Roboto Condensed */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300);

/* Basic */
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; min-height: 100%; background: #EEE; font-family: 'Roboto Condensed', sans-serif; font-weight: 300; }
a { color: #FFF; text-decoration: none; }
a:hover { color: #26C5CB; }
p { margin: 0; }
.credits { position: absolute; left: 20px; bottom: 20px; color: #ccc; font-size: 14px; }
.credits a  { color: #26C5CB; }

/* Centering */
#container, #progress, #player, #flip-back, .cover, .playlist {
	  position: absolute;
	  margin: auto;
	  top: 0;
	  left: 0;
	  right: 0;
  	bottom: 0;
}

#container {
	  width: 320px;
	  height: 320px;
  perspective: 550px;
	  -webkit-perspective: 550px;
  transform-style: preserve-3d;
	  -webkit-transform-style: preserve-3d;
}

#player {
  	width: 300px;
	  height: 300px;
	  background: #fff;
  	border-radius: 50%;
	  overflow: hidden;
	  box-shadow: 2px 2px 20px 0 rgba(0,0,0,.3);
	  z-index: 300;
}

#progress {
	  width: 320px;
	  height: 320px;
	  z-index: 200;
  transform: rotate(147deg);
	  -webkit-transform: rotate(147deg);
  filter: blur(1px);
	  -webkit-filter: blur(1px);
	  transition: all .5s ease-in-out;
	  -webkit-transition: all .5s ease-in-out;
}

#flip-back {
	  width: 300px;
	  height: 300px;
	  background: #4D4D4D;
	  border: 4px solid #AEAEAE;
	  border-radius: 50%;
	  overflow: hidden;
	  box-shadow: inset 0 -10px 10px -5px rgba(0,0,0,.3), 2px 2px 20px 0 rgba(0,0,0,.3); /* inner + outer */
  transform: rotateY(-180deg);
	  -webkit-transform: rotateY(-180deg);
}

/* Album Cover */
img {
  	width: 100%;
	  height: 100%;
	  background: #fff;
	  opacity: .75;
	  transition: .3s all ease-in-out;
  -webkit-transition: .3s all ease-in-out;
}

/* Fade */
#container:hover .cover,
#container:hover .to-lyrics-label,
#container:hover .to-back-label {
	  opacity: .9;
}

.cover,
.to-lyrics-label,
.to-back-label {
	  opacity: .3;
	  transition: all .3s ease-in-out;
	  -webkit-transition: all .3s ease-in-out;
}

/* Player Buttons */
.controls {
	  position: relative;
	  width: 100%;
	  color: #fff;
	  text-align: center;
}

button {
	  margin: 10px;
	  color: #fff;
	  background: transparent;
	  border: 0;
	  outline: 0;
	  cursor: pointer;
	  text-align: center;
	  text-shadow: 1px 1px 3px #000;
	  transition: all .3s ease-in-out;
	  -webkit-transition: all .3s ease-in-out;
}

button:hover {
	  color: #26C5CB;
}

#play-pause {
	  width: 46px;
	  height: 46px;
	  transition: all .5s ease-in-out;
	  -webkit-transition: all .5s ease-in-out;
	}

/* Song Info */
.info {
  	position: relative;
	  margin-top: 28px;
	  bottom: 10px;
	  color: #fff;
	  text-align: center;
	  text-shadow: 1px 1px 3px #000;
}

.song {
	  font-size: 18px;
}

.author {
	  font-size: 14px;
	  margin-bottom: -8px;
}

/* ... */
.song,
.author,
.playlist a {
	  white-space: nowrap; 
	  overflow: hidden;
	  text-overflow: ellipsis;
}

/* Volume */
input[type='range'] {
	  display: block;
	  margin: 14px auto;
	  width: 80px;
  height: 2px; 
	  outline: 0;
	  cursor: pointer;
	  box-shadow: 1px 1px 3px 0 #000;
	  -webkit-appearance: none !important;
}

input[type='range']::-webkit-slider-thumb {
  background: #AEAEAE;
  height: 6px;
  width: 6px;
	  border-radius: 50%;
  transition: .1s all linear;
	  -webkit-transition: .1s all linear;
  -webkit-appearance: none !important;
}

input[type='range']:hover::-webkit-slider-thumb {
  	background: #26C5CB;
	  -webkit-transform:scale(2);
}

/* Checkboxes */
input[type=checkbox] {
  	position: absolute;
	  top: -9999px;
	  left: -9999px;
}

label {
	  text-shadow: 1px 1px 3px #000;
}

.to-back-label:hover,
.to-lyrics-label:hover {
	  color: #26C5CB;
}
	
label:active,
label:focus {
	  top: 0;
	  opacity: 0;
}

label.to-back-label {
	  position: absolute;
	  top: 20px;
	  left: 50%;
	  width: 30px;
	  height: 30px;
	  margin-left: -15px;
	  color: #fff;
	  text-align: center;	
	  cursor: pointer;
	  z-index: 500;
}

label.to-lyrics-label {
	  position: absolute;
	  top: 276px;
	  left: 50%;
	  width: 20px;
	  height: 20px;
	  margin-left: -5px;
	  color: #fff;
	  cursor: pointer;
	  z-index: 500;
}

/* Flip Back */
#player, #flip-back {
	  backface-visibility: hidden;
	  -webkit-backface-visibility: hidden;
	  transition: transform .5s ease-in-out;
	  -webkit-transition: -webkit-transform .5s ease-in-out;
}

#to-back:checked ~ #flip-back {
	  z-index: 400;
	  transform: rotateY(0deg);
	  -webkit-transform: rotateY(0deg);
}

#to-back:checked ~ #player {
	  z-index: -1;
  transform: rotateY(180deg);
	  -webkit-transform: rotateY(180deg);
}

#to-back:checked ~ #progress {
	  opacity: 0;
  transform: rotate(0);
	  -webkit-transform: rotate(0);
}

#to-back:checked ~ #flip-back .playlist {
	  transform: translateY(0);
  -webkit-transform: translateY(0);
}

/* Lyrics */
.lyrics {
	  position: relative;
	  width: 100%;
	  height: 96px;
	  margin-top: 30px;
	  padding: 4px 24px;
	  color: #000;
	  background: rgba(255,255,255,.3);
	  font-size: 12px;
	  text-align: center;
	  overflow-y: scroll;
	  box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,.5);
  	transition: all .5s ease-in-out;
	  -webkit-transition: all .5s ease-in-out;
}

.lyrics:hover {
  	background: rgba(255,255,255,.8);
}

.lyrics::-webkit-scrollbar {
	  display: none;
}

.scroll {
	  color: #fff;
	  text-align: center;
	  font-size: 9px;
	  font-weight: bold; 
	  text-shadow: 1px 1px 3px #000;
}

.cover {
	  padding-top: 130px;
	  transition: all .5s ease-in-out;
	  -webkit-transition: all .5s ease-in-out;
}

#to-lyrics:checked ~ .cover {
	  padding-top: 40px;
}

#to-lyrics:checked ~ .cover .lyrics {
	  margin-top: 0px;
}

#to-lyrics:checked ~ .cover button {
	  margin: 4px;
}

/* Playlist */
.playlist {
  	margin-top: 20px;
	  padding: 14px 20px;
	  font-size: 12px;
	  text-align: center;
	  list-style: none;
	  overflow-y: auto;
	  z-index: 9999;
  transform: translateY(300px);
	  -webkit-transform: translateY(300px);
  transition: transform .5s ease-in-out .3s;
	  -webkit-transition: -webkit-transform .5s ease-in-out .3s;
}

.playlist h3 {
	  color: #aeaeae;
}

.playlist li {
	  display: block;
	  padding: 4px 0;
	  color: #AEAEAE;
	  cursor: pointer;
	  text-decoration: none;
}

.playlist li:hover {
	  color: #26C5CB;
}

.playlist li:nth-child(1) {
	  padding: 0 24px;
}

.playlist::-webkit-scrollbar {
	  display: none;
}

/* Media Queries */
@media all and (max-width: 768px) {
	  #container, #player { width: 150px; height: 150px;}
	  #progress { width: 160px; height: 160px; margin-top: -5px; margin-left: -5px; }
	  label, .lyrics, .scroll { display: none; }
	  .cover { padding-top: 46px; }
	  button { margin: 4px; }
	  button:first-of-type, button:last-of-type { display: none; }
	  input[type='range'] { display: block; margin-top: -76px; height: 1px; }
	  .info { margin-top: 70px; }
	  .song { font-size: 12px; }
	  .author { font-size: 10px; }
}

好了，看看效果：

技术分享