手把手帶你作一個基於react的音樂播放器

一個音樂播放器的簡單實現

基本效果圖以下：

初始狀態

播放狀態

播放結束狀態

本人最近在作admin系統，有一個需求，播放音頻，並能夠暫停，快進...，公司以前選用的是audiojs.js，一款原生的音頻播放插件，產品在ui上也選用這款的ui，固然功能也同樣咯。

因而，直接copy老項目audiojs，直接用，可是途中遇到一些問題，一是咱們新項目選用的是react,並且又配合eslint，原插件不支持es6引入，並且一堆代碼，因而開始代碼改寫成es6,並遵循eslint,代碼是改好了，能用了，可是，個人項目是表格裏動態渲染audio,並且隨着分頁，表格等操做，這些action會觸發表格update，可是，知道該插件等就知道，他是不斷建立audio，及相關dom結構，因爲這些沒有使用react的虛擬dom,性能低，且一些bug，後來，只能本身改寫成react組件類型的。

改寫audiojs插件，支持es6模塊引入的詳見github地址，未react組件化。

將audiojs組件化的詳見github地址，簡單邏輯以下。也是實現一個播放器，基本思路也以下

基本在componentDidMount週期時候，綁定音頻的事件，音頻經常使用事件有

loadedmetadata 加載音頻時候監聽的事件，會有個按鈕有加載中的狀態

canplaythrough 音頻能夠播放時候的事件，這時候能夠得到音頻的總時長等

timeupdate 音頻播放中的事件，能夠獲取當前播放時間，用於顯示一些進度條等

ended  音頻結束播放的事件 如需求有重置播放器進度，播放按鈕狀態等，能夠在此操做

音頻播放器經常使用兩個方法 播放play() 暫停pause()

用到幾個重要屬性

currentTime（獲取當前播放時間，如快進，能夠動態給該屬性賦值）

duration （音頻總時長）

重要：componentWillUnmount時候記得將事件解綁哦 

結束，有admin中須要等，或者改寫下樣式，就能夠直接使用哦