酷播亮新聞
新的一年到來了，給大家分享一個仿網易云播放器製作案例（帶聲音且可切換歌曲）。 希望大家能夠享受音樂帶來的快樂，同時消除工作緊張、減輕生活壓力，帶著美好心情進入2019年的生活。
演示地址
- 點擊播放按鈕，可播放、暫停歌曲；
- 點擊前進按鈕/後台按鈕，可切換歌曲；
- 切換歌曲時，當前是播放狀態，則切換歌曲的時候也是播放狀態；
- 切換歌曲時，當前是暫停狀態，則切換歌曲的時候是暫停狀態；
- 歌曲切換的時候，頂部歌曲名稱及演唱者會相應變化；
- 歌曲播放過程中，歌曲會顯示實時的播放進度。
溫馨提示：此演示案例帶有聲音，工作期間請帶上耳機，以免造成不必要的影響。
原理分析
- 通過播放/暫停按鈕控制循環動態面板是否循環；
- 通過上一首、下一首按鈕控制切換歌曲；
- 通過循環動態面板控制歌曲播放進度，歌曲旋轉播放動效；
- 通過文本元件預存歌曲播放時長（以秒為單位）；
- 通過內聯框架加載真實歌曲；
- 用熱區控制用於表示播放進度圓球移動邊界。
元件準備
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協議。