HTML5環形音樂播放器

業餘草發表於2015-02-10

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

好了，看看效果：

如有不懂，請加qq群：135430763共同學習！

HTML5 實現的音樂播放器分享
2019-05-11
HTML播放器
音樂播放器
2017-12-14
播放器
vue音樂播放器
2018-07-02
Vue播放器
TurnTable for Mac音樂播放器
2020-11-05
Mac播放器
Listen 1音樂播放器
2022-10-25
播放器
H5音樂播放器
2019-04-11
H5播放器
TurnTable for Mac(iTunes音樂播放器)
2021-10-21
Mac播放器
Mac音樂播放器——TurnTable for Mac
2020-10-15
Mac播放器
vue2.0音樂播放器
2017-03-08
Vue播放器
微信小程式：音樂播放器
2017-01-24
微信小程式播放器
音樂播放器的開發
2017-12-19
播放器
千千音樂 for Mac(原百度音樂播放器)
2020-12-29
Mac播放器
優質音樂播放器：TurnTable for Mac
2020-08-21
播放器Mac
MacYouTube音樂播放器——Muse for Mac
2020-05-27
Mac播放器
無損音樂播放器Audirvana for mac
2020-12-19
播放器Mac
Clementine for Mac - 現代音樂播放器
2021-11-12
Mac播放器
音樂播放器：Swinsian for Mac
2024-01-12
播放器Mac
mac音樂播放器：Decibel for Mac
2024-01-31
Mac播放器
react實戰-線上音樂播放器
2018-02-02
React播放器
簡單音樂播放器----java （美。。。。）
2015-06-18
播放器Java
Android開源線上音樂播放器——波尼音樂
2019-01-10
Android播放器
jQuery案例-網頁音樂播放器01
2020-10-24
jQuery網頁播放器
YouTube音樂播放器：Tuner for YouTube music Mac
2023-12-24
播放器Mac
Colibri for mac(無損音樂播放器)
2022-06-16
Mac播放器
Swinsian for Mac(mac音樂播放器)
2023-02-10
Mac播放器
移動端自制音樂播放器--React
2018-01-05
播放器React
[微信音訊播放器] html5 audio 製作的微信播放器
2016-07-30
音訊播放器HTML
Android開源音樂播放器之播放器基本功能
2019-01-10
Android播放器
win10 groove音樂播放器如何使用_win10系統groove音樂播放器使用操作方法
2020-05-15
Win10播放器
7款很棒的 HTML5 視訊播放器
2014-06-19
HTML播放器
Sunflower音樂播放器知識點（一）
2019-03-25
播放器
如何使用 pyqt 實現 Groove 音樂播放器
2022-04-23
QT播放器
Spotify for Mac海內外流行音樂播放器
2020-12-02
Mac播放器
Python實現多功能音樂播放器
2022-03-08
Python播放器
高階音樂播放器：Swinsian for Mac
2023-02-10
播放器Mac
15款最好的網站音樂播放器
2013-08-04
網站播放器
音樂播放器的實現(簡易版)
2013-09-18
播放器
Android開源音樂播放器之高仿雲音樂黑膠唱片
2019-01-10
Android播放器

HTML5環形音樂播放器

相關文章