首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML5环形音乐播放器

HTML5环形音乐播放器

作者头像
业余草
发布2019-01-21 15:01:24
5K0
发布2019-01-21 15:01:24
举报
文章被收录于专栏:业余草业余草

通过 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; }
}

好了,看看效果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年02月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档