今天我們看的是一個使用純HTML+CSS+JS實現音樂播放器的例子，效果還是很贊的：?codePen地址

HTML部分

首先我們要思考一下，一個播放器主要包含哪些元素。首先要有播放的進度信息，還有播放/暫停或者上一首下一首等必要的按鈕，同時還要顯示一些當前播放的音樂名稱等信息。播放多首歌曲時，要顯示播放列表。。。因此，從語義上可以構造出基本的HTML結構：

// 背景區塊，用于顯示當前播放音樂的圖片 <div class='background' id='background'></div>// 播放器區塊 <div id='player'><audio id='mytrack' src=''></audio>//頂部區域，只顯示一幅畫<div id='artwork'></div>// 播放列表<div id='tracks'><div trackartist='Tobu & Syndec' trackname='Dusk' trackartwork='01.jpg'></div><div trackartist='Disfigure' trackname='Blank' trackartwork='02.jpg'></div><div trackartist='Alan Walker' trackname='Fade' trackartwork='03.jpg'></div></div>//播放器的UI部分<div id='ui'>//播放器已播放時間和總的時間<div id="time"><span id='elapsedtime'>00:00</span><span id='totaltime'>00:00</span></div>//進度條<div id='progressbar'><div><span id='pointer'></span></div></div>// 播放器控件<div id='controls'><button id='prev' class='control'></button><button id='play' class='control'></button><button id='stop' class='control'></button><button id='next' class='control'></button></div></div> </div>

CSS部分

接下來看css部分。首先將player區塊進行了居中，并添加了背景和陰影：

#playerwidth: 300pxposition: absoluteleft: 50%top: 50%box-shadow: 0px 5px 10px #000background-color: $color4transform: translate(-50%, -50%)-o-transform: translate(-50%, -50%)-moz-transform: translate(-50%, -50%)-webkit-transform: translate(-50%, -50%)

對于頂部的圖像區塊，設置充滿寬度，并設置圖像水平和垂直方向都居中，當圖像切換時，增加了1s的過渡效果。

#artworkwidth: 100%height: 0padding-bottom: 100%display: blockposition: relativeoverflow: hiddenbackground-image: url("../artworks/01.jpg")background-repeat: no-repeatbackground-size: coverbackground-position: center centertransition: background 1s ease 0s-o-transition: background 1s ease 0s-moz-transition: background 1s ease 0s-webkit-transition: background 1s ease 0s

這里將height設置為0，然后padding-bottom設置為100%(相對與父元素的寬度)，由于它的寬和父元素的寬相同，結果就是將它的寬和高設成相同，即300px * 300px。

播放列表區塊首先是一個列表，因此我們直觀地想到了用ul/li來實現，但是這里用的是將父元素設置display：table，然后每項的圖片和名字設置為display: table-cell的形式:

#trackswidth: 100%display: blockoverflow: hiddenbackground-color: #fffdivwidth: 100%display: tablebackground-color: #ffftransition: all 0.5s ease 0s-o-transition: all 0.5s ease 0s-moz-transition: all 0.5s ease 0s-webkit-transition: all 0.5s ease 0scursor: pointerspanmargin-right: 10pxdisplay: table-cellpadding: 0px 10pxheight: 50pxline-height: 50pxfont-size: 1.2emcolor: #aaaartworktext-align: centerdisplay: table-cellwidth: 50pxbackground-repeat: no-repeatbackground-size: coverbackground-position: center center

UI區塊是重點，主要包括時間、進度條和控件三個部分。時間按理來說在布局上比較簡單，但這里它又用到了我們想不到的display:list-item來實現（相當于ul，其實我覺得這里沒有寫這些），然后又用了css3中的first-of-type偽類用來匹配該類型的第一個元素等。

進度條主要是通過將div的寬度逐漸增大并進行過渡。還有一個pointer，通過將它的背景設置為發亮，表明當前播放的位置。

#progressbarwidth: 100%display: blockoverflow: hiddenheight: $progressHeightbackground-color: $color4 - 10cursor: pointerdivwidth: 0%height: $progressHeightdisplay: blockfloat: leftbackground-color: $color3 - 40transition: width 0.1s ease 0s-o-transition: width 0.1s ease 0s-moz-transition: width 0.1s ease 0s-webkit-transition: width 0.1s ease 0s#pointerwidth: 4pxheight: $progressHeightdisplay: blockfloat: rightbackground-color: $color3transform: translate(100%,0)

最后是控件部分。每個控件的寬度設為25%向左浮動，并再次用到了display:list-item

.controlwidth: 25%height: 50pxfloat: leftdisplay: list-itemlist-style: nonebackground-repeat: no-repeatbackground-color: transparentbackground-size: 20pxbackground-position: center centertransition: background 0.1s ease 0s-o-transition: background 0.1s ease 0s-moz-transition: background 0.1s ease 0s-webkit-transition: background 0.1s ease 0s&:hovercursor: pointer

JS部分

最后我們要看的是交互部分。交互主要包括：

換歌：在列表中高亮當前播放的歌曲，切換背景圖片，播放

播放：播放聲音，調整進度條，顯示正確的按鈕背景

上一條/下一條：=換歌，但還要考慮到第一首和最后一首的特殊情況

暫停/恢復：暫停/恢復音頻的播放，顯示正確的按鈕背景

進度條點擊：更新當前播放的時間點

總之，包含的有：currentAudio, isPlaying, audioPosition這幾個狀態信息。

比如點擊了下一首，它會做這么幾個交互上的改變：

按鈕背景有一個狀態按下的效果

停止當前歌曲的播放

重置進度條的位置

歌曲列表當前項顯示有更新

頂部的封面有更新

如果當前isPlaying為true，則播放歌曲，更新進度條

// 1if(this.classList[0] !== "shadow"){for(var x = 0; x < audioControls.children.length; x++){audioControls.children[x].classList.remove("shadow");}this.classList.add("shadow");}// 2audio.currentTime = 0;clearInterval(timer);// 3 updateProgressBarPosition()// 4 updateActiveTrack(currentTrack);// 5 changeBackgroundImage(artwork, artworkSrc);// 6 audio.play();audioState = "play";changeBackgroundImage(play, iconsFolder + "pause.png");// Update the timetimer = setInterval(function(){updateTime();},100);

?

轉載于:https://www.cnblogs.com/cubika/p/4440159.html

總結

以上是生活随笔為你收集整理的每天看一片代码系列（三）：codepen上一个音乐播放器的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。