In this recipe, we will see how to create a simple MP3 player with the Play, Pause, Stop, Next, and Previous buttons. Here, the focus will be on how to learn the interaction between UI and the Audio Source (Script) component within a script. Furthermore, we will see how to use the Event Trigger (Script) component to call all the functions in our script. These will actually implement the logic behind the MP3 player.
using UnityEngine.UI;
statement at the beginning of the script. But before the class, we add this line: [RequireComponent(typeof(AudioSource))]
(without the semicolon at the end). In this way, we are saying that, to use this script, an Audio Source (Script) component attached to the same game object of this script is required. If it is not present, it will be added automatically.AudioSource
, where all the sounds will be reproduced. The second one is an array of AudioClip
for storing our entire playlist, and it is public, so we can set the music from the Inspector. The third one is private int
, and it stores the index of the current song. The last one is private bool
, and it stores information on whether the player has stopped the music or not. So, we can write these lines:private AudioSource audioSource; public AudioClip[] musicList; private int index=0; private bool isStopByPlayer;
Start()
function, we assign the Audio Source (Script) component that is attached to the same game object of this script to the audioSource
variable:void Start () { audioSource = GetComponent<AudioSource> (); }
Play()
function, in which we call the Play()
function on audioSource
and set the isStopByPlayer
variable to false
, since the player has just pressed play and not one of the stop buttons. So, we can write the following:public void Play(){ audioSource.Play (); isStopByPlayer = false; }
Pause()
function, in which we call the Pause()
function on audioSource
. Also, since the player has just pressed one of the stop buttons, we set the isStopByPlayer
variable to true
:public void Pause(){ audioSource.Pause (); isStopByPlayer = true; }
Stop()
function is similar to the previous one. It calls the Stop()
function on audioSource
and, since the player has just pressed one of the stop buttons, we set the isStopByPlayer
variable to true
:public void Stop(){ audioSource.Stop (); isStopByPlayer = true; }
Next()
function, we need to take care with the index of the playlist and play the next song that is on the list. If the current track is the last one, we play the first one. Therefore, we start increasing index
by 1
. Then we check whether index
has reached the last track, and if so, we change index
to 0
in order to make it point to the first track. Finally, we assign the track pointed by index
in the music list to the clip
variable of audioSource
. After that, in the final line, we call the Play()
function, which we have written before:public void next(){ index++; if (index == musicList.Length) index = 0; audioSource.clip = musicList [index]; Play (); }
previous()
function, we have to worry about the index of the playlist and reproduce the previous track of the list. Thus, if the current track is the first one, we need to play the last one. Therefore, we start decreasing index
by 1
. Then we check whether index
has reached the first track, and if so, we change index
to make it point to the last track. Finally, we assign the track pointed by index
in the music list to the clip
variable of audioSource
. And in the final line, we call the Play()
function, which we have written before:public void previous(){ index--; if (index == -1) index = musicList.Length-1; audioSource.clip = musicList [index]; Play (); }
Update()
function, we check whether the track is finished and is not stopped by the player. If so, we call the next()
function that we wrote before. It will play the next track from the music list:void Update () { if (!audioSource.isPlaying && !isStopByPlayer) next (); }
OnClick
event panel in the Inspector. Then drag MP3Panel into the object
variable.Play()
function, PauseButton with the Pause()
function, StopButton with the Stop()
function, NextButton with the next()
function, and finally PrevButton with the previous()
function.false
(not checked), and it is fine for PlayButton but not for the other two. Therefore, select StopButton and PauseButton and check the boolean to make it true
.Each button has an attached Event Trigger (Script) that will call the respective function of our script. In fact, our script contains a function for every component. This last one will control the Audio Source (Script) component to create an MP3 player.
The next section teaches us how to display the name of the song in our MP3 Player, to the player.
It would be a great improvement for the MP3 player if we displayed the name of the song that is currently being played, providing the player with more information during his experience. We can achieve this by using a Text (Script) component and modifying our script a little.
First, select MP3Panel in the Hierarchy panel. Then select UI | Text and rename it to MP3Text.
Before we modify our script, we need to add the using UnityEngine.UI;
statement at the beginning of the script. In fact, here we are going to use the Text
class.
Then, we add a new public
variable to our script:
public Text uiText;
This will store the reference to the Text (Script) component of MP3Text so that we can keep track of it.
After this, let's add these lines at the end of the Update()
function:
uiText.text = audioSource.name;
By doing this, we display the name of the song (the name of AudioClip) in the text variable of the Text (Script) component on uiText.
Finally, we can click on play to verify that everything works as expected.
Since the name of the song could be longer than the text component, ensure that MP3Text is long enough. We can stretch it with the Rect tool.
Otherwise, we can implement other solutions. Let's explore three of them. The first is the easiest, and it requires us to use the Content Size Fitter to make the text dynamically fit within MP3Text. Another solution, which is a bit more effective, is to write a script that truncates the name of the song, if it is too long. For instance, we can add ... at the end of the name. Finally, if it is important to show the entire name, we can make the name scroll gradually, by programming this behavior within our script.
3.16.79.65