原生小程序 開發音樂播放器：
首先上效果圖、源碼：
組件框架 ，這里說下思路:
組件1：
swiper 組件 和 include 標簽 這個輪播組件 都很熟悉吧 也沒什么好說的啊 ，但這個項目中我們用來實現滑動他實現切換導航這個功能：
所以這里的知識點主要3個：
1. 輪播圖組件 swiper 中的 current屬性 可以設置顯示的頁面 參數為下標【0開始】
2.輪播圖組件 swiper 中的 bindchange動作 這個動作如果輪播變換（切換） 那么導航條的背景顏色 和 字體顏色也就跟着變了
3.include 標簽 ，這個標簽相當於把一整個xxx.wxml 引入了進來 ，就簡單的引入了進來，所以我們可以在其他單獨頁面上寫三個導航項的內容
組件2：
scroll-view 組件 這個組件就是我們常見的那個滑塊容器 ，不夠的話 他會自己往下拓展的：
所以 這個組件往y延伸千萬要注意這一點 即設置固定高度問題。
還有一點 ：如果你想把這個組件的滾輪條去掉也是可以的 即：
這個組件API詳看： 這個組件還有很多動作事件等你自己去發現。。。。
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
組件3：
音樂滑塊條實現： slider 組件 ，這玩意主要實現在下圖：
所以這個組件 主要記住這幾個就夠用的了.
功能實現
先介紹 媒體播放API 以前的是標簽 但是現在改革了 變成了 JS代碼：
所以就是那個 wx.createInnerAudioContext()
以上就是音樂API
這里注意幾點： 第一就是 千萬要等他（播放）了 才能獲取到音頻的信息，，，，獲取信息的話首先得賦值src給音頻對象。
所以這里的思路就是 index 是曲目下標 然后獲取信息 然后設置src 給 音頻對象
2.播放音樂功能實現：
其實也和很簡單 首先播放起來 然后設置狀態為running 【為什么設置狀態running 因為后面配合動畫轉動【Css基礎好的就懂了】】
3.暫停播放
這個不多說 自己看
4.下一首音樂 實現
5.獲取音樂的時長
邏輯就是 首先獲取這個音樂的當前播放位置[單位 S] 和 總時長[單位 S] ，然后呢就是直接把這新建一個formathTime 轉換一下成 “分：秒”，最后 的percent 呢 就是當前播放秒 / 總長度秒 * 100 就得到了當前播放的百分比 邏輯很簡單哈。表示的話 直接顯示 轉換后的 currentTime 和 play.duration 即可。
6. 點擊到導航欄切換 和 滑動swiper 切換導航欄
視圖：
邏輯：
7.播放的時候 專輯圖片 旋轉
CSS如下： 【動畫】
其實也就是這幾個功能了，，，注意點也有：
1. 主義this 穿透 ，這個this穿透JS開發經常發生 其實就是說 this 指向的是誰【調用者】你要很清楚！
2. 初始化要設置一下東西，例：
完.
沒講很全 主要是邏輯和組件的運用思維 希望各位朋友能學到多少 ，，，，emmm 謝謝大家閱讀！