Today we are going to use ivx make a music player, features include control music playback, pause, can by clicking or dragging the music playback progress adjustment, said the following about the specific implementation method. 
A .demo layout
first look at the structure of the demo, two under the banner text component for displaying music information, the rest is placed on the canvas, the layout can be divided into a play / pause module and a progress bar module, were placed in two group, objects, and there are some variables, and triggers the operation of the group. 
II. Music Components
Since it is a music player, naturally need to add a music component it. Upload our music material in the Asset address, the note here what would happen if the audio material is relatively large, then turned on is not recommended pre-load mode. 
III. Play / Pause module
Let's look at a relatively simple play / pause module, only one picture sequence component under this target group. As the name suggests, this component can contain multiple images to achieve the effect of dynamic display, and today we are using it to make a pause and play an icon of change, so click on its icon picture list to add two pictures. 
Then click on the picture sequence of events, we use a boolean variable "Play / Pause" to save the player what what state (false suspend state, true to play state), and then click on the picture to judge sequence should be executed kind of operation (pay attention to the picture sequence component is more like a photo frame, we can transform the contents of the frame, but not to the inside of each picture to add an event, click on the received sequence of events is this picture frame).
Initial moment, the player is paused, so we have to set the "Play / Pause" the initial value is false, the picture sequence of the first picture is the play icon ode picture. Then whenever Click on the image sequence, first determine the "Play / Pause" value if false then the music is paused, perform music action group (the picture sequence jumps to the pause icon pictures, play music component), and "play / pause" is set to true; if true then the music is playing, the music pauses to perform an action group (the picture sequence jumps to the picture playback icon, and then pause the music component), and "play / pause "set to false. 
IV. Progress bar module
progress bar module responsible for displaying two text components music long duration and total time has been played, the corresponding values of two variables for storing two values. Demo in the total length is a fixed value, but is a long time to play with the music playback progress changing, the situation changed in three ways, normal play music, click on the progress bar, drag the progress bar. 
Progress bar portion, a rectangular bottom bar progress bar display area is not to play, white; the progress of the rectangular region for the progress bar display has been played, gray, both the height and width are the same positional coordinates . We add above them a rectangular mask, the mask so that they are aligned with the left end of the rectangular object and the mask progress bar preferably rectangular masking rectangle, so that we can make progress by changing the width of the whole rectangle mask bar front section behind the progress bar is displayed while the rectangular bottom is a rectangular strip (rectangular mask can be seen outside the scope of the progress bar rectangular strips of rectangular range only look in the end). After that add a point ellipse fitting schedule set up, obviously the X coordinate progress point of the ellipse, the mask is a long time to maintain a consistent width of the rectangle and has been played. 
The next event is set, that is, three cases of the music player previously mentioned change.
1. normal music player
front Click on the image sequence of events is where we let the music play and pause the component, here we have to add a musical component itself an event, you can see the trigger will also allow playback music player, the music will pause let trigger pause, when the end of the music is the component and perform some variable is reset to the initial state of motion.
Trigger the property bar to set the time interval 1s, that is to say the music in seconds. In a trigger event, the first value of the variable "has been playing a long time," plus 1, and then because "long time has been played" storage is the number of seconds, we need to convert it to "04:28" This form, so run a function the component "has long play" corresponds to the calculated result, text component assigned to the "start time" is displayed. Final adjustment progress bar state, i.e., changing the X coordinate point of the ellipse and the progress of the mask width of the rectangle, the long duration of the total has been played according to the ratio of the time can be easily calculated. 
2. Click on the progress bar
in the click event object groups, the target group will be returned to us click on the XY coordinates of the location, we must first determine whether the click position within the scope of the progress bar, if so, will trigger pause, Boolean variables "progress points may be used" is set to false, then the X coordinate adjustment progress ellipse point, the mask rectangle width, "has long play" value, and then reset the flip-flop, the music pause jump position adjustment, re-set the start time , play music, and finally the "progress spot available" is set to true.
Here, "Progress points may be used" is a parameter used to determine whether progress can drag ellipse point, it is set to false, the operation of the process, we can not drag the points of an elliptic progress in the system. Math.floor () is a function of the method, a value in brackets need to fill, the result is that the largest number of less than or equal to the integer value, such as the results Math.floor (8.6) is 8, Math.floor ( 5) the result is 5. 
3. Drag progress bar
Here we set point of the elliptical component allows the progress to drag about properties, and we will live point it can be moved around it. 
In the event finger moving in an elliptical component, we need to determine the "Progress points are available," whether it is true, only to suspend the implementation of the trigger action when true and "progress available" is set to false. In addition to this event, we can also receive a set of XY coordinates of the object returned, in order to prevent the user to move point to the progress of the progress bar range, we do a boundary treatment, which is to ensure the progress of the X coordinate range of 70-290 points always within the last because the user simply drag the progress at this time point but has not yet determined where to start playing so we just adjust the progress of the state and the value of the schedule start time point consistent. 
Changes to the music player is on the schedule is within the scope of the progress bar, if it is not set to leave the boundary value in the event of a finger, when the finger left, we are still to determine the X coordinates release schedule point of the ellipse, then "progress points available" is set to true, long and reset the start time has been played, adjust the music playback progress continues to play. (Skip action filled musical component is "has been playing a long time" || 1, it said that if the front is null jump to the first 1s) 
summarizes
this demo because the components and the events will be a little bit more complicated, we must first attention is to deal with the border, either click or drag in all we need a clear delineation of the scope. There is our state is represented by a variable component through a data binding and event condition determination (painting Bridget can not use data binding), to design a good relationship between them, while clearly the object and the operation of the order.