As I haven't yet seen this be covered in any exampled in Construct 2, and it'd be something extremely useful, I'd like to show how you can mix Construct 2's Video and File Chooser plugins.
One thing you might want to note is that the video plugin works by URL and can play anything within it's codec range that you choose. For instance, if you choose to load up an MP4 video, that actually includes, from what I've tested, .M4V and .MP3, but surely there are more files within that codec's range, and you can always change the codec that you load from, of course.
One other thing you will want to know is that there (of course you probably already know) are lot's of different ways that you can store information in Construct 2. This will become a useful thing to note, as we will be constructing a fully modifiable music player by the end of this tutorial, with all the basic functions of a typical music player, such as the seek bar, fast forward, skip, and playlist controls.
Now, lets get started, shall we?
Setting up the Music Player!
As I said, we will be adding in lots of different controls for this music player. I will use buttons for skipping and fast forwarding, but it would probably look better if you made sprites for these controls. I'm not aiming to make it look pretty right now though, I'll get to that later.
Okay, so firstly, we add the File Chooser to the layout. After doing so, position it according to what you want the layout to look like. Then set the Accept field in it's properties to only be .MP3. This will avoid any conflicts, as we don't want the user to be able to load up an image or some other nonsense inside of the player. And lastly, change the Select value to select multiple files.
I made mine on the bottom right to make room for the rest of the things I added. I'll go into more detail on the way I set up my music player later, but I'm going to go strait to the point of actually playing the audio before things get too complicated.
So, the next thing I do is add in the video plugin and set it's initial visibility to Invisible.
I then switch the the event sheet.
In the event sheet, I add in, by default, that if the URL of the File Chooser is changed, to automatically play the song that is chosen.
This is done by making:
condition: File Chooser>On Changed
action:Video>Set Source>H.264 Source (MP4 Codec) = FileChooser.FileURLAt(0)
This should be functional to the point of testing, try it out and check the result.
Working? Hopefully we're on the same level.
Song Deets (Details)
Well, now that we're to the level of actually understanding how to play the music, let's go in to changing up the display on the layout. If you're like me, setting up your entire layout is the first thing you do, so you've probably already found out that I already did that. If you haven't, then please quickly add some things for me in your layout.
The first thing will be the text object that displays the name, which I labeled "songName". The next object to add is another text (I use Sprite Font actually) object that displays the current point in time the song is playing over the length of the song (played/duration), which I labeled "durationText".
Now we will move to the event sheet and delete the whole On Changed event, as it was merely for demonstration purposes.
The next thing we will do is add a Global Variable called "currentPlayingSong" which will store which song the user is listening to based on the listing of the File Chooser.
After we do that, we will add in an event which will be File Chooser>On Changed.
Then we will add the condition INVERTED Video>Is Playing. This way, we can check if the player is playing anything at all.
Then we add in the condition on that event: System>Compare Two Values>FileChooser.FileCount greater than 0 (if filecount > 0). This way we can check if the FileChooser has even chose a file yet.
We then add in an action: Video>Set Source>H.264 Source = FileChooser.FileURLAt(currentPlayingSong). This will make the player play the song that is supposed to be playing according to our set variable, if nothing is yet playing.
Now, lastly, we add in a event. This event will be an every tick event.
Now, add an action to this event: songName>Set Text> Text = FileChooser.FileNameAt(currentPlayingSong)
Then add another action below that: durationText>Set Text> Text = round(Video.PlaybackTime) & "/" & round(Video.Duration)
That basically sets up everything in the event sheet. Check to see if yours is identical to mine:
If they look the same, go ahead and test. It should function well.
Adding a Song Seek Functions
This part will cover all of the options for song seeking, as in fast forwarding and the play bar. The song skipping will be covered in the next section, as it relies on the playlist's functionality.
The first thing we will do is add the Slider Bar object, which I named musicTimeBar. This will act as the song seeking bar. Then we will add a button for fastforwarding, and a button for rewinding. I'll add that directly below my seek bar. I called the button fastForwardButton
Next we will move to the event sheet. There we will add the event Video>Is Playing. with that we will add the action musicTimeBar>Set Maximum> Maximum = Video.Duration. This will set the bounds for the bar so we can position the slider correctly.
Now that we have the maximum set, we will periodically set the Time Bar to the same time as the song playing. To do this we will make an Every Tick event and add the action musicTimeBar>Set Value> Value = Video.PlaybackTime.
Now that we have that set we will set the bar to be able to control the video playback time. To do this we will add the event condition musicTimeBar>On Changed then add the action Video>Set Playback Time> Time = musicTimeBar.value.
That should just about do it for the time bar, feel free to test it. :)
Next will be the fast forward button and rewind buttons. To program those in will be simple. In the event sheet add an event: fastforwardButton>On Clicked and then add the action Video>Set Playback Time> Time = video.PlaybackTime + 5. This will skip five seconds forward. You can change how much it skips by changing the 5 to something else, but this will work for now.
Do the same thing for rewindButton, except make the video playbackTime 5 less, rather than 5 more.
That will be all for now! Check the resemblance to mine and test it, it should be functioning well.
Playlists!
For this last part we will add the playlist, as in actually being able to change the song within the music player. To do this is simple. We'll start by adding a couple objects to the layout.
The first thing we will add will be a List object which will act as the playlist. In order to make it resemble mine, make sure that it's type is set to List Box. I called my list "playlist".
Lastly, add in the buttons for skipping forward (I called skipForwardButton) and backward (I called skipBackButton) inside of the playlist. These object's positions should be pretty simple to place, so just go ahead and add those in now.
Now that we have the layout objects figured out, flip over to the event sheet.
In the event sheet create the event: File Chooser>On Changed and add an action to that which will be playlist>clear. This is so all the items that were in it before are cleared out.
Then add a sub-event to the On Changed event which will be a for loop which will have a start index of 1 and an ending index of FileChooser.FileCount. This will loop through all the files that were selected by the File Chooser. I called this loop "Loop through selected songs", which you will need to know later.
After that's complete, add an action to the for loop which will be: playlist>Add Item> text = FileChooser.FileNameAt(loopIndex). This will completely set up the playlist appearance.
Now, to make the playlist actually usable create an event which will be playlist>On Double Clicked and add the action system>Set Value>currentPlayingSong = playlist.SelectedIndex then add the action: Video>Set Source> H.264 Source = FileChooser.FileURLAt(currentPlayingSong). This will change the video players source to be the same as the song you selected in the playlist.
That should be all for the playlist, now we need to program in the skipping buttons. To do this, create the event: skipForwardButton>On Clicked and add the action: System>add to>currentPlayingSong> Value = 1. Now add another action to this event which will be Video>Set Source> H.264 Source = FileChooser.FileURLAt(currentPlayingSong).
Now, do the same for the skipBackButton, except subtract 1 instead of adding.
That should be all. Compare to mine and test:
A Little More on Playback Control
I thought I should also add in controls to play and pause the music, as you might not be able to figure it out on your own depending on your skill level.
Firstly, add in two more objects to your layout for the play and pause buttons. I called mine playButton and pauseButton.
Now go into the event sheet and add the event playButton>On Clicked and add the action Video>Play.
Then add the event pauseButton>On Clicked and add the action Video>Pause.
That will be all. If you'd like me to add anything, just make some suggestions, I'm open to doing just about anything. Maybe even visualizations? ;)