新的一年到來了，給大家分享一個仿網易雲播放器制作案例（帶聲音且可切換歌曲）。希望大家能夠享受音樂帶來的快樂，同時消除工作緊張、減輕生活壓力，帶着美好心情進入2019年的生活。

演示地址

1. 點擊播放按鈕，可播放、暫停歌曲；
2. 點擊前進按鈕/後台按鈕，可切換歌曲；
3. 切換歌曲時，當前是播放狀态，則切換歌曲的時候也是播放狀态；
4. 切換歌曲時，當前是暫停狀态，則切換歌曲的時候是暫停狀态；
5. 歌曲切換的時候，頂部歌曲名稱及演唱者會相應變化；
6. 歌曲播放過程中，歌曲會顯示實時的播放進度。

溫馨提示：此演示案例帶有聲音，工作期間請帶上耳機，以免造成不必要的影響。

原理分析

1. 通過播放/暫停按鈕控制循環動态面闆是否循環；
2. 通過上一首、下一首按鈕控制切換歌曲；
3. 通過循環動态面闆控制歌曲播放進度，歌曲旋轉播放動效；
4. 通過文本元件預存歌曲播放時長（以秒為單位）；
5. 通過内聯框架加載真實歌曲；
6. 用熱區控制用于表示播放進度圓球移動邊界。

元件準備

1. 頂部元素

1.1 2個文本矩形框，分别放作者名稱和歌曲名稱

1.2 1張表示返回的圖片

1.3 1張頂部背景（配置陰影效果，體現層級關系）

2. 1張撥片圖片，用于體現歌曲播放或暫停的狀态

3. 歌曲播放動效元素

3.1 1個白色矩形框，調整圓角半徑，使之成為圓形

3.2 1個黑色矩形框，調整圓角半徑，使之成為圓形

3.3 動态面闆，設置三種狀态，分别放置三首歌曲的圖片

4. 播放進度元素

4.1 1個橢圓形元件，用于動态顯示歌曲播放進度

4.2 1個矩形，用于表示播放進度背景

4.3 兩個矩形，分别表示播放進度時間和歌曲時間

4.4 1個熱區，用于控制圓形元件的移動邊界

5. 5張圖片，分别表示歌曲循環、上一首、播放/暫停控制、下一首、更多

6. 一個内聯框架，用于實時加載歌曲

7. 1個文本元件，用于表示當前播放歌曲的時間（秒殺）

8. 動态面闆，用于控制圖片循環及播放進度動效

将内聯框架、時間舉行，循環面闆位置放在不顯眼處，重新布局元件後效果如下：

實現步驟

1. 播放按鈕設置

播放按鈕初始狀态是暫停待播放圖片，表示當前是暫停狀态；選中時，我們預置一張播放待暫停圖片，表示當前是播放狀态

選中時，啟動循環面闆，每個0.5秒變換一次狀态，同時将播放撥片旋轉到唱片上；同時判斷當前面闆的狀态，根據面闆狀态分别設置歌曲名稱、作者、歌曲時間及要播放的歌曲。

取消選中時，停止循環面闆。将播放撥片旋轉到初始位置，同時在内聯框架打開空鍊接（終止歌曲播放作用），将用于表示播放進度的圓球移到初始位置。

循環動态面闆設置事件：

播放撥片設置事件，注意錨點偏移設置：

在内聯框架打開mp3歌曲的設置，如果用本地mp3文件，注意相對路徑和絕對路徑的區别：

2. 上一首按鈕設置

點擊“上一首”按鈕時，需要先判斷歌曲狀态：

如果是播放狀态的話，需要在切換動态面闆顯示狀态後，再觸發播放按鈕的點擊事件（否則無法切換歌曲）；

如果是暫停狀态，則隻需要切換動态面闆狀态即可。

切換循環動态面闆及觸發播放按鈕重新播放的事件配置如下：

3. 下一首按鈕設置

同理，點擊“下一首”按鈕時，需要先判斷歌曲狀态：

4. 循環動态面闆事件

當播放按鈕的狀态是選中時，啟用循環動态面闆；

當循環面闆的狀态改變時，移動圓球，同時旋轉唱片，從而動态顯示歌曲播放。

用于表示播放進度的圓球移動事件如下圖設置，注意每次移動的距離根據歌曲的時間長度而變化。

移動距離計算：播放背景長度 除以 歌曲時長（需要将歌曲時長換算成秒，用time元件臨時保存）。

旋轉唱片的設置事件：

5. 圓球移動事件設置（表示播放進度）

圓球在移動時，需要設置一個邊界（放一個熱區作為邊界），當圓球接觸邊界時，觸發播放的點擊事件（也就是暫停歌曲播放）。

觸發事件設置如下：

6. 唱片狀态改變事件設置

當唱片狀态改變時，需要根據唱片當前顯示的狀态，分别設置歌曲名稱、作者、歌曲時間及要播放的歌曲。

這個步驟不能少，否則在未播放狀态下點擊“上一首”或“下一首”按鈕時，歌曲名稱等不會變化。

本文由 @十月大神 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

,