標籤：html5音頻 html5 音樂播放器 audio video
通過 HTML5，音樂在網路上東山再起。添加音頻檔案就像插入映像那樣簡單，並且使用者能在瀏覽器外播放音樂，從而實現驚人的音樂體驗。<audio> 標籤的推出使您不再需要外部音樂播放器，在網站上實現真正的聲音融合。好吧，直接看代碼：
<!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環形音樂播放器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
