技術(shù)點(diǎn)：ES6+Webpack+HTML5 Audio+Sass

這里，我們將一步步的學(xué)到如何從零去實(shí)現(xiàn)一個(gè)H5音樂(lè)播放器。

首先來(lái)看一下最終的實(shí)現(xiàn)效果：Demo鏈接
界面：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 

 

接下來(lái)就步入正題：

  1. 要做一個(gè)音樂(lè)播放器就要非常了解在Web中音頻播放的方式，通常都采用HTML5的audio標(biāo)簽
    關(guān)于audio標(biāo)簽，它有大量的屬性、方法和事件，在這里我就做一個(gè)大致的介紹。

    屬性：
    src：必需，音頻來(lái)源；
    controls：常見，設(shè)置后顯示瀏覽器默認(rèn)的audio控制面板，不設(shè)置默認(rèn)隱藏audio標(biāo)簽；
    autoplay：常見，設(shè)置后自動(dòng)播放音頻（移動(dòng)端不支持）；
    loop：常見，設(shè)置后音頻將循環(huán)播放；
    preload：常見，設(shè)置音頻預(yù)加載（移動(dòng)端不支持）；
    volume：少見，設(shè)置或返回音頻大小，值為0-1之間的一個(gè)浮點(diǎn)數(shù)（移動(dòng)端不支持）；
    muted：少見，設(shè)置或返回靜音狀態(tài)；
    duration：少見，返回音頻時(shí)長(zhǎng)；
    currentTime：少見，設(shè)置或返回當(dāng)前播放時(shí)間；
    paused：少見，返回當(dāng)前播放狀態(tài)，是否暫停；
    buffered：少見，一個(gè)TimeRanges對(duì)象，包含