今天我們要使用ivx制作一個音樂播放器滨达，功能包括控制音樂的播放、暫停陨献，能夠通過點擊或者拖拽調(diào)節(jié)音樂的播放進度盒犹，下面說一下具體的實現(xiàn)方法。

一.demo布局

首先看一下demo的結構眨业，橫幅下兩個文本組件用于展示音樂信息急膀，其余內(nèi)容放置在畫布中，布局上可以分為一個播放/暫停模塊和一個進度條模塊龄捡，分別放置在兩個對象組中卓嫂，另外還有一些變量、動作組和觸發(fā)器聘殖。

二.音樂組件

既然是音樂播放器晨雳，自然就需要添加一個音樂組件啦。在素材資源地址里上傳我們的音樂素材奸腺，這里注意一下如果音頻素材比較大的話不建議開啟預加載模式餐禁。

三.播放/暫停模塊

我們先來看比較簡單的播放/暫停模塊，這一對象組下只有一個圖片序列組件洋机。顧名思義，這個組件可以包含多張圖片從而實現(xiàn)動態(tài)展示的效果洋魂，我們今天是用它做一個暫停和播放的圖標變化器绷旗，所以點擊它的圖片列表添加兩張圖標圖片。

然后是圖片序列的點擊事件副砍，我們用一個布爾值變量“播放/暫拖沃”來儲存播放器處于什么狀態(tài)（false為暫停狀態(tài)，true為播放狀態(tài)）豁翎，并以此判斷此時點擊圖片序列應該執(zhí)行什么樣的操作（要注意圖片序列組件更像是一個相框角骤，我們可以變換相框的內(nèi)容，但是無法給里面每個圖片添加一個事件心剥，接收到點擊事件的是圖片序列這個相框）邦尊。

初始時刻，播放器處于暫停狀態(tài)优烧，所以我們要設置“播放/暫筒踝幔”的初始值為false，圖片序列的第一張圖片是播放圖標ode圖片畦娄。然后每當點擊圖片序列時又沾，先判斷“播放/暫捅滓牵”的值，如果為false則說明音樂處于暫停狀態(tài)杖刷，執(zhí)行播放音樂的動作組（將圖片序列跳轉(zhuǎn)到暫停圖標圖片励饵，播放音樂組件），并將“播放/暫突迹”置為true役听；如果為true則說明音樂處于播放狀態(tài)，執(zhí)行暫停音樂的動作組（將圖片序列跳轉(zhuǎn)到播放圖標圖片不瓶，然后暫停音樂組件）禾嫉，并將“播放/暫停”置為false蚊丐。

四.進度條模塊

進度條模塊中熙参，兩個文本組件負責展示音樂的已播放時長和總時長，對應的有兩個數(shù)值變量用于儲存這兩個值麦备。Demo里總時長是個定值孽椰，而播放時長是隨著音樂播放進度不斷改變的，改變的情況有三種凛篙，音樂正常播放黍匾，點擊進度條，拖動進度條呛梆。

進度條部分锐涯，底條矩形用于展示沒有播放到的進度條區(qū)域，是白色的填物；進度條矩形用于展示已播放的進度條區(qū)域纹腌，是灰色的，兩者寬高和位置坐標都是相同的滞磺。我們再在它們的上面添加一個遮罩矩形升薯，使遮罩矩形的左端與它們對齊并將進度條矩形的遮罩對象選為遮罩矩形，這樣我們可以通過改變遮罩矩形的寬度來讓整個進度條部分前面顯示進度條矩形而后面是底條矩形（遮罩矩形范圍內(nèi)可以看到進度條矩形击困，范圍之外只能看到底條矩形）涎劈。之后就是添加一個進度點橢圓擬組建了，顯然進度點橢圓的X坐標阅茶，遮罩矩形的寬度和已播放時長是要保持一致的蛛枚。

接下來就是事件的設置了，也就是之前提到的三種音樂播放狀態(tài)改變的情況脸哀。

1.音樂正常播放

前面我們點擊圖片序列的事件里是讓音樂組件播放和暫停坤候，這里我們也給音樂組件本身添加了事件，可以看到音樂播放時也會同時讓觸發(fā)器播放企蹭，音樂暫停也會讓觸發(fā)器暫停白筹，當音樂播放結束則是執(zhí)行一些將組件和變量重置為初始狀態(tài)的動作智末。

觸發(fā)器的屬性欄設置了時間間隔1s，就是說音樂播放后以秒為單位徒河。在觸發(fā)器的事件中系馆，先是將數(shù)值變量“已播放時長”加1，然后因為“已播放時長”存儲的是秒數(shù)顽照，我們需要將它轉(zhuǎn)化為“04:28”這樣形式由蘑，所以運行一個函數(shù)組件根據(jù)“已播放時長”算出對應結果，賦值到文本組件“開始時間”顯示出來代兵。最后調(diào)整進度條的狀態(tài)尼酿，即改變進度點橢圓的X坐標和遮罩矩形的寬度，按照已播放時長占總時長的比例可以很容易算出植影。

2.點擊進度條

在對象組的點擊事件里裳擎，對象組會返回給我們點擊位置的XY坐標，我們首先要判斷點擊位置是否在進度條范圍內(nèi)思币，如果在鹿响，則將觸發(fā)器暫停，布爾值變量“進度點可用”置為false谷饿，然后調(diào)整進度點橢圓X坐標惶我、遮罩矩形寬度、“已播放時長”的值博投，再將觸發(fā)器重置绸贡，音樂暫停跳至調(diào)整后的位置，重新設置開始時間毅哗，播放音樂听怕，最后將“進度點可用”置為true。

這里“進度點可用”是用來判斷進度點橢圓是否可以拖動的一個參數(shù)黎做，將它置為false叉跛，則在系統(tǒng)進行操作過程中我們不能拖動進度點橢圓松忍。Math.floor()是一個函數(shù)方法蒸殿，括號內(nèi)需要填入一個數(shù)值，它的返回結果是小于等于該值的數(shù)中最大的整數(shù)鸣峭，比如Math.floor( 8.6 )的結果是8宏所，Math.floor( 5 )的結果是5。

3.拖動進度條

這里我們設置進度點橢圓組件的允許拖動屬性為左右摊溶，這樣我們點住它就可以將它左右移動了爬骤。

在橢圓組件的手指移動事件中，需要先判斷“進度點可用”是否為true莫换，只有為true時才執(zhí)行暫停觸發(fā)器的動作霞玄，并將“進度的可用”置為false骤铃。在這個事件中我們同樣可以收到對象組返回的XY坐標，為了防止用戶把進度點移動到進度條范圍之外坷剧，我們做一個邊界處理惰爬，即保證進度點的X坐標范圍始終在70-290之內(nèi)，最后因為用戶此時只是拖動進度點但還沒有確定從哪里開始播放所以我們只是調(diào)整進度條的狀態(tài)和開始時間的值與進度點保持一致惫企。

對音樂的播放進度的改變是放在手指離開的事件內(nèi)撕瞧，當手指離開時，我們依舊是先判斷松開時進度點橢圓的X坐標是否在進度條范圍內(nèi)狞尔，如果不是則置為邊界值丛版，然后將“進度點可用”置為true，重設已播放時長和開始時間偏序，調(diào)整音樂的播放進度繼續(xù)播放页畦。（音樂組件的跳至動作中填入的是 “已播放時長”||1，表示如果前面是空值則跳轉(zhuǎn)到第1s）

總結

這個demo因為組件和事件比較多會略微復雜一點禽车，首先要注意的就是邊界的處理寇漫，無論是點擊還是拖動中都需要我們劃定一個明確的范圍。還有就是我們用一個變量表示一個組件的狀態(tài)是通過數(shù)據(jù)綁定和事件的條件判定（畫布里不能使用數(shù)據(jù)綁定）殉摔，要設計好它們之間的聯(lián)系州胳，同時明確操作的對象以及順序。