Welcome back to code time. This is episode five of learning Vue JS with demos. So some things sometimes some of my students asked me for is working with sound and audio. And how would I do that with Vue JS? Great question.
So works just kind of like you would with any other HTML element, and I'm going to show you how to go and do this. And what we're after and sort of the effect or thing we want to create, is when you press a button, for example, you were going to pay someone. Say you were building a app like Venmo to send money to someone. And when you press the button, it would make this sort of a cha-ching money sound when it is played. And so, that's what we're after.
In order to do this, we're going to need a couple of things. Of course, we'll need Vue JS, we'll need some HTML, We'll need tailwind just to style the button. But of course you could do that with anything, any library you like, or just plain old CSS. We're going to need a sound. And so you can get free sounds from soundbible.com and I just typed in money sounds. And there's a cha-ching register sound.
You may be able to hear that from this recording. You may not, but you'll get the sense of how this is working. So cha-Ching on the register. And that's what we're looking for.
I'll click on cha-ching and I want to download the MP3. So I'll click on the MP3 file. And then I'm going to go into my finder here, and it's in my downloads directory. I'm going to move that into my demos folder directory. Now, of course you can download these files that I'm working on right here on Code Time IO inside the exercise files for this series.
I'm going to rename to our audio, and I'll just call this money. And then I'm going to put this in a folder called audio, as I might have more than one audio track. So, I'll take the money file and put it inside the audio folder like so. Then, I need to reference that inside here on my code and to do that, we need to set up something to actually go and reference it. Now there's a couple ways to do this. You could set up the HTML audio tag, or you could just say, "I don't want to work with the tags at all. Let's just play the sound and just do it all essentially in JavaScript."
I think the best way is to sort of just do it all in JavaScript for what we're doing. As when you press the button, I don't want it like an audio player, I just want the sound to run when you press the button.
So to do this, I need to set up the audio. I need to reference it. So I'm going to reference this with just straight old JavaScript. So VAR my track. I'll do this as like that, camel case syntax. My track is equal to a new audio and this is just basic JavaScript with audio. And then this in here will take the path of the audio file in which I called audio. Now, note that the path is relative slash money slash or dot MP3. So there's my file for the track. The next thing I need to do is, I can do a couple different things. I could set this up to run in a method, and I think that's probably the next best thing to do, or set up the button. It doesn't really matter which one you choose to do next.
I'm going to go with the button. So the button has a class of BG Hyphen... Let's do with a green because it's money. And we'll say it has a slight rounded, it's text color is white. I'll make it's font bold, and I'm going to do a slight hover effect. So BG hyphen green. Let's BG hyphen green hyphen dark, and then I'll make it a little bit darker. Again, those are the tailwind classes.
I'll go into this file. And then I will grab our audio.HTML and drag it into our window here. And we don't see anything because we need to save this out as a money. Now, imagine this as send money. So there's our send money. We need to do a little bit more styling. And how about some padding, yeah? We'll say P X hyphen four and P Y hyphen two. And now we have a nice little send money button.
Now, just so that you kind of understand its context and kind of what I'm thinking this is supposed to work, let's imagine that this is on an iPhone screen or something like that. I'll just make it as a fake card essentially. So I'm going to say items hyphen center and justify hyphen center.
And then here, I'm going to set up that white box. So I'll say dot BG hyphen white. I want to give it a little bit of shadow, so I'll say shadow, and then I'm going to wrap this div around the button. And so here is... We'll tab this stuff in, so it's nice and clean. And here I might set up a couple of divs or something like this. Maybe I set these up as UL's. So there's a UL, unordered list. LI, and it says, and let's do it, just keep it simple here.
We'll do a paragraph, send money to, we'll say Frank. And now if we refresh, this is what we have so far. We'll give it a little bit more styling. We'll say P hyphen eight, maybe. And we'll say width is going to be one third, maybe one fourth. Let's see what it looks like. That looks pretty good.
And then maybe this will be an H one because... And then you can see, send money to Frank. We'll say, let's just add a little bit more here. Margin top is four, move the button down, I can set the button so that it's the full width. So we'll say something like width full. I'll take up the whole space there. And just so we have like a nice little clean background, I'll say class BG hyphen gray hyphen lightest.
So we're going to send money to Frank. When I click the button, it's going to play a sound and maybe show like a little animation here. So I'm going to represent the little animation, it's just a square that's going to appear. All right.
We got this part set up. I need to set up the click event. So when I click on this, it's going to say, send money. And the idea that this actually would do, and this is real life, this is how this would work is it would send a request to a server verifying that the person has the money, of course, because you can't send money unless you got it. And then, there's our methods. There's our function send money.
And then it's going to play the audio sound and it's going to show the animation. So we need to know if the audio is essentially true or we could just know if money has been sent. So we could say, if money is true, then send it. Or if money is false... now I'll do this something as a little bit makes more sense. So we'll say money sent and that's going to be false by default because we have not hit the button.
So then in between here, I can set up a div. And this could be an animation or some syntax or something else. I'm going to just set this up as a V hyphen if money sent. Again, that is our model name. And if it is sent, I could say, grab a paragraph tag. It says, Frank, we'll just say your money has been sent.
Okay, great. So now what we can do here is at some point, we're going to say this dot money sent is going to equal to true, right? And that's going to act as actually sending the money. And it's going to show that this value is now being seen and that our button has now sent the money. So send money.
We now need to do the audio. So to get this audio to work, we need to essentially say that the audio, which is my track is which is referencing here, my track, it needs to be played. So we'll say play. And then the audio track has been played. That's it. If we refresh this now and click send money, money sound went off and text your money has been sent.
Hopefully you can hear that sound from this video. If you can just use your imagination, it's really playing. So this is really cool. And I'll do it again and it'll sort of loop all the way back around every time you sort of press it. But for some reason, let's say, if you needed to pause audio, how might that work?
So that wouldn't be this example, but I'm just going to show you this in this demo. Just so you have a clear understanding of how you could pause or you could play. To do this just so we don't lose that, I'm going to comment this out as this is what we've just covered. This is if you wanted to pause the audio mid play, okay.
To do that, we're going to say if, and here's our check here. If this stop money sent is equal to false, then play the track, set this money sent to true. Else, that means it's already been set. Then we need to pause the track and reset the track back to zero. So to pause the track, we're going to say my track dot pause, and to reset the track back to zero, we're going to say my track dot current time is equal to zero.
Now these are both JavaScript. Nothing to do a Vue JS just plain old JavaScript functions. So that sets it back to current time. And then I need to say this dot money sent is equal to false. All right. So now if we click on it and I can quickly stop it by clicking on the button again, and it'll just run this little clacking sound. And now I can pause that.
So think about how you might use that. Maybe you're designing some sort of timeline or cool video sequence and with audio, and you want to be able to pause stuff and have the animation stop and have the sound stop and everything that goes along with that.
So that's that one. I'm going to turn this one off. I'm going to leave a comment on here, so you can reference and says, this allows for pausing the audio mid play, and then I'm going to turn these back on and then we'll do one last thing. So here is our send money to Frank, click it. It plays the sound and because the money sent, I want to hide the button as I don't want to send the money again. Right?
So to hide the button, it's pretty easy. We'll say V if money sent, but I want to put an exclamation mark in front of it. Now, if I click send money, your money has been sent and the button's gone. So that's one way to do it.
Another way to do it would be disabling the button by graying out the button, letting the user know that the money has been sent and that they cannot send the money again, unless they make a new sort of order to send the money. So that's an example of using audio with Vue JS and a couple of conditionals.