This is the lesson where we're going to show you how you can play sounds MP three files using JavaScript,
I've created a brand new folder called Sound.
I've added in three different AMP 3s.
So we've got a Barch, we've got a cougar and we've got a lion.
So we're on an animal theme for this lesson.
We're going to be using the JavaScript method where we can create using the HTML audio element.
We can scroll down to where the examples are.
We've got a variable horn where we create a new audio object.
So just as we did with the date in JavaScript specifying where the file is and the file that we want
to utilize and then we can play the file, you can get also information in regards to that particular
element.
So we see that we are still creating that same object, but we can get duration, pause, muted and
volume.
Lets copy this out and we're going to bring it into our code.
And I'm going to update this to match where our MP three files are.
Siembra, we do have a folder called Sound.
So I'm going to link to those files and we do have an EP three called Barch.
So that's MP3.
We can save that, answered a horn.
We're going to use the variable name Barch add event listener, so we're making sure that the data is
loaded and this is a short form for function with newer formats of JavaScript so we can bring it back
into the function format as well as previously.
And instead of horn, we'll just get the duration of this particular clip.
So when we reload.
And I'll console log out the value of duration, also going to shrink the side menu there and we'll
clean it up a bit, using the brackets beautifies.
So when we refresh, we see that's the duration of that particular clip.
And as mentioned here, we can get paused, muted volume and so on.
Muted So that's Barque.
And you can see all of the values are going to be contained within Barch and if we output muted.
We can see that muted is false, so it's not mirrored next, let's add in some additional elements on
the page so we can play that particular sound.
I'm going to set up a button and this just going to be a regular button and we'll just call it plate
using JavaScript.
So I'm going to use const.
And I can also use Consed for the bark object, because that's not going to change.
I'll call it button using document, query, selector, select the button I want and we're going to
add an event listener on that button.
So I'm going to update this to be button add event listener.
The event listener that we're looking listening for is click and if it gets clicked, then we're going
to see all of those values so we get false still.
And that means that once we click it, we can also invoke plea.
So we can play the sound.
So we've got our dog dog barking sound if you try to load it without the element.
The MP three being loaded, you could encounter some errors and some issues, so it is advised that
usually you have a trigger to trigger off that playing of whatever sound you're trying to invoke.
So go ahead and try this out for yourself.
You can use the empathy's that I've included within the course as well as you can use your own MP Empathy's
set up a play button, create a new audio object that links to wherever the file is located.
The MP three file is located.
And then when you click your play button, go ahead and play your MP3 file in JavaScript using JavaScript
within your browser.
Try it out for yourself.
And coming up, we're going to extend on what we've learned in this lesson and we're going to do a whole
bunch more with the audio and sounds.