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

HTML部分

首先我們要思考一下，一個(gè)播放器主要包含哪些元素。首先要有播放的進(jìn)度信息，還有播放/暫?；蛘呱弦皇紫乱皇椎缺匾陌粹o，同時(shí)還要顯示一些當(dāng)前播放的音樂名稱等信息。播放多首歌曲時(shí)，要顯示播放列表。。。因此，從語義上可以構(gòu)造出基本的HTML結(jié)構(gòu)：

// 背景區(qū)塊，用于顯示當(dāng)前播放音樂的圖片 <div class='background' id='background'></div>// 播放器區(qū)塊 <div id='player'><audio id='mytrack' src=''></audio>//頂部區(qū)域，只顯示一幅畫<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'>//播放器已播放時(shí)間和總的時(shí)間<div id="time"><span id='elapsedtime'>00:00</span><span id='totaltime'>00:00</span></div>//進(jìn)度條<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區(qū)塊進(jìn)行了居中，并添加了背景和陰影：

#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%)

對(duì)于頂部的圖像區(qū)塊，設(shè)置充滿寬度，并設(shè)置圖像水平和垂直方向都居中，當(dāng)圖像切換時(shí)，增加了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設(shè)置為0，然后padding-bottom設(shè)置為100%(相對(duì)與父元素的寬度)，由于它的寬和父元素的寬相同，結(jié)果就是將它的寬和高設(shè)成相同，即300px * 300px。

播放列表區(qū)塊首先是一個(gè)列表，因此我們直觀地想到了用ul/li來實(shí)現(xiàn)，但是這里用的是將父元素設(shè)置display：table，然后每項(xiàng)的圖片和名字設(shè)置為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區(qū)塊是重點(diǎn)，主要包括時(shí)間、進(jìn)度條和控件三個(gè)部分。時(shí)間按理來說在布局上比較簡(jiǎn)單，但這里它又用到了我們想不到的display:list-item來實(shí)現(xiàn)（相當(dāng)于ul，其實(shí)我覺得這里沒有寫這些），然后又用了css3中的first-of-type偽類用來匹配該類型的第一個(gè)元素等。

進(jìn)度條主要是通過將div的寬度逐漸增大并進(jìn)行過渡。還有一個(gè)pointer，通過將它的背景設(shè)置為發(fā)亮，表明當(dāng)前播放的位置。

#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)

最后是控件部分。每個(gè)控件的寬度設(shè)為25%向左浮動(dòng)，并再次用到了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部分

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

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

播放：播放聲音，調(diào)整進(jìn)度條，顯示正確的按鈕背景

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

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

進(jìn)度條點(diǎn)擊：更新當(dāng)前播放的時(shí)間點(diǎn)

總之，包含的有：currentAudio, isPlaying, audioPosition這幾個(gè)狀態(tài)信息。

比如點(diǎn)擊了下一首，它會(huì)做這么幾個(gè)交互上的改變：

按鈕背景有一個(gè)狀態(tài)按下的效果

停止當(dāng)前歌曲的播放

重置進(jìn)度條的位置

歌曲列表當(dāng)前項(xiàng)顯示有更新

頂部的封面有更新

如果當(dāng)前isPlaying為true，則播放歌曲，更新進(jìn)度條

// 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);

?

轉(zhuǎn)載于:https://www.cnblogs.com/cubika/p/4440159.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。