writing a musicplay function
We want our code to run as soon as our component loads (fancy word for loads is initializes), so we can put all the code in the curly braces for init.
The first thing we need is a reference to the entity that has the sound component on it. Remember how we did this in the last project with document.querySelector? Let's do it again, using the id of the entity in our HTML with the sound component attached to it. That entity on line 78 has id="musicpanel", so here's how we do it. Inside of init, I'll put:
let audiosource = document.querySelector('#musicpanel');
I named the variable audiosource, but you can give it any name you want.
Next, we need to write a function that has the code that will run as soon as the user clicks the play button in our scene. We're going to make the function the same way we did in Project 4, but this time giving the function the name musicplay, because that's what the function will do - play our audio. You can give it any name you want. First you name the function with let, then give it the parentheses that hold function parameters (this will be empty for now), then => followed by curly brackets. I've left a blank line in the curly braces because that's where the code for the function will go. My function looks like this:
let musicplay = () => {
}
So, what's the code that will actually cause the audiosource to play the audio on its sound component, the code that we put inside our new function? I looked in the documentation for the sound component and saw that in addition to the properties you can configure, it also has methods. A method is a function that is already attached to the component that will perform some action. The names of the three methods make clear what they do: pauseSound, playSound, and stopSound.
For the first component, we're playing the audio, so the method we want to call is playSound. Here's how we can call this method on the sound component that is attached to our audiosource. This code should go inside the curly braces of your musicplay function. I'll break it down below:
audiosource.components.sound.playSound()
Using the dot (.), first we drill down on audiosource to access the components on that entity, then we drill down further to access the sound component, and finally you drill down to call the playSound method that comes included with the component. You want to put that above code in the curly braces of your musicplay function. It's the code that will run as soon as musicplay is called.
Great! Now, although we've defined our musicplay function, we still haven't called it anywhere in our code. We want the musicplay function to run as soon as the user clicks on the play button in our scene, so we want to add an eventListener to our component so that our entity is listening for that "click" event. This should look familiar from Part 4 when we set this up for the sphereexpand function. Outside of musicplay, but still inside of init, you want to have this code that will set up your eventListener to listen for the 'click' event and, once detected, run our musicplay function:
this.el.addEventListener('click', musicplay);
Why am i putting the eventListener on this? It's because I'm going to attach this whole component to the play button entity in my HTML. Remember, this will reference whatever entity your component is attached to. So, if I want this function to run when the user clicks on the play button entity as defined in my HTML, I can attach the component to the play button and use this to refer to it. This is what my whole component looks like now:
AFRAME.registerComponent('songplayer', {
init: function () {
let audiosource = document.querySelector('#musicpanel');
let musicplay = () => {
audiosource.components.sound.playSound()
}
this.el.addEventListener('click', musicplay);
}
});
The final steps are done back in our HTML. First, make sure the JavaScript file that has our songplayer component in it is imported into my HTML, so I'll put this inside the head element of my HTML document:
<script src="public/js/audiocontrols.js"></script>
Finally, you actually need to attach the component to an entity in your scene. In this case, we want to put it on our play button because that's what the user will click on in order to trigger the event (we want that to be the this in our component that has the eventListener, remember?). So, on line 84 of the HTML, on the entity with id="playbox", attach our new component to the entity. Our component is named songplayer, so it's as easy as adding the songplayer attribute to the entity:
songplayer>
Try it out: it works! Go up to the music player user interface on the left wall and click the play button:
