Hey this is Sasha and thanks for joining me here for another HTML tutorial. Hopefully, this will help you out in your online business or your business website as you continue to tweak or modify the HTML within those pages.
In today’s video lesson, what I’d like to do is share with you how to use the audio tag within the HTML code. Now, this is something new to HTML five.
When you’re using this, it’s very useful especially if you’re doing things like podcasting because now you can embed your podcast on your website a lot easier. There are plug ins to do this, but sometimes there is no need for additional plug ins and clutter the server if you don’t need to.
Incorporating an Audio Tag
Let’s take a look at it on the screen and I want to share with you how to incorporate the audio tag within your page through the basic HTML because it’s not very difficult.
Here you can see I have my basic page setup. I have a couple of quick comments right there to let us know that that’s where we’re going to work on our audio element. And the way that you write this code is, again, just simply AUDIO. I’m going to hit tab, and now that has basically created my audio code.
The next thing that you need to do is input a source. So now that I say, okay well, this part is an audio source or this part is an audio, I need to define a source.
When you look at a source, you just again bracket source and I’ll go ahead and hit tab. SRC is going to ask for a location of that source and type. When you look at audio based files, typically online, you’re looking for mp3, or .wav, or .ogg files. Those are the ones that typically you’ll use.
Most of the time, it’ll be .mp3 or .wav. I often use .mp3. In my case, I need to define a source or where a file is located. In order to define this, I’m going to paste in something that’s on my hard drive.
This is in my F drive, temporary files and so on and so forth, and it’s a .wav file. This should work for our example.
Normally you may use mp3, or whatever it is on a podcast. If you’re using something from a website, you would type in: http:// and then the whole length that your podcast provider would give you. But in my case, I have a wave file. Now if I just hit control Save, you’ll notice that when I refresh over here, nothing really happened and that is because there is no control.
Backstageincome: Learn how to grow a business and evolve your life!
What I need to do is add a couple of attributes right here. I’ll just add controls and I don’t really need to add anything in there besides just controls. If I do that, you can see all of a sudden this pops up and populates the audio mechanism. It shows the audio right there. Now I can go ahead and hit play for you, but just believe me, it does work.
Adding in the Attributes
What I need to do is add a couple of attributes right here. I’ll just add controls and I don’t really need to add anything in there besides just controls. So if I do that, you can see all of a sudden this pops up and populates the audio mechanism. It shows the audio right there. Now I can go ahead and hit play for you, but just believe me, it does work.
The other thing that you could do is go ahead and type in another attribute like auto play. In this attribute, what will happen is, if I go ahead and hit the refresh button, you can see that right there it’s already starting to auto play. You can see that timer tick. That means it starts right away when that page is loaded.
The final thing that you can also do is create kind of a loop so as it ends, you can go ahead and loop things. Now if this file continued going all the way towards the end, by all means, you would see it loop and restart. Otherwise, it’s just going to go to the end and stop if I didn’t have the loop area.
Backstageincome: Learn how to grow a business and evolve your life!
For some people, they like to mark this as true, right here, and you could do that. Auto play is true and controls, also true. You could do it this way because you’ll see that nothing really changes. It’ll still auto play and that will still work for me. And in fact, it will actually even work if you simply get rid of this equal signs right here. And if you refresh, you’ll see that it actually still even works. It’s amazing the way that works out.
What You Can Do With Your Sources
Here is one other thing that you may want to take a look at, or know about. If for example you have a certain wave file right here, and this is the source, what the HTML is doing is it’s initially looking at the source of this first file. But if you have a second source, let’s say, the mp2, I could just type in source and now I can type out where the location of my file is. Let’s say it’s in a Backstage_income.com/myfile.mp3.
Backstageincome: Learn how to grow a business and evolve your life!
What it could do is go from one source and if it’s not there, go to the second one, go to the third one, the fourth one, and so on and so forth. So you can have a couple of different sources there in order to really use as a backup. But ultimately, that’s how you embed an audio into your podcast, or into your website.
You can use this within a podcast. This is exactly what I actually do in my tradersfly website. If I go ahead and stop this right here, then you go ahead and take a look at my tradersfly website. Here are my postings and if we scroll down, you can see that once we get to a posting, there is the video and then listen to the podcast. You can see I have styled this a little bit differently.
You can go ahead and hit play, and the player is just customized with some CSS to make it look a little bit nicer. But that’s how ultimately it works and you can use this. It’s just the same thing. It’s an audio code. It’s just a modified for the look and feel.
Thanks for Watching
If you found this video helpful and you want to see more training videos in the future, and grow your business, learn more about marketing, hit the subscribe button right over here, or you could sign up to my newsletter list where I share some premium content on video or you can get discounts on my books and other training materials.
So go ahead sign up to my newsletter list right here by clicking this button and that way, you’ll know when new things and new content it’s created.
Thanks again and I’ll see you in the next lesson.
Resources & Helpful Tools
Sublime Text
Tradersfly.com
Blue Yeti Mic
Heil PR-10 Microphone
