HTML5环形音乐播放器
yg3n
9年前
通过 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; } } 
来自：http://blog.csdn.net/xmtblog/article/details/43700505