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