programminghead Logo

How to insert audio in HTML using notepad :

The process of adding/Inserting audio in HTML Document is Same for all Ordinary text Editors like Notepad (on Windows OS), GEdit (on Linux OS), TextEdit (in Mac OS) and also same for other Professional Code/Text Editors like Adobe Dreamweaver CC, Sublime text Editor or Notepad++.

audio in HTML : Example:


 <body>

   <audio src="http://programminghead.com/sounds/audio.mp3" controls/>

 </body>

Results


So, It Doesn't Matter matter which Text/Code Editor you are using. The process of Adding Audio in Web-pages using HTML will be the same for all. But if you Choose Professional Text/Code editor to Do Coding then you will only be going to have some stuff like Syntax Highlighter, Auto Syntax Generator, Helps to Identify Syntax Error, HTML Tag Suggestion, Etc. So, no matter Which text Editor you are using Process of Adding Audio in HTML will be the same.

how to insert audio in html using notepad Image

HTML Audio Tag <audio> :

Audio Tag in HTML used for Adding Audio files inside HTML Documents/Web-pages, Here The Audio Tag's <audio> src="" attribute Specify/Declared Audio file inside HTML Document.

HTML Audio Syntax :


     <audio src="mySong.mp3"/>

HTML audio controls Attribute <audio controls> :

Audio Tag's controls attribute allows the browser to display some control Buttons for audio file like (play/pause/volume controller/seek bar etc). Note: these controllers 100% relies on your browser, in the different browser you can see some controls missing or not working.

HTML Audio Syntax with Control Buttons :


     <audio src="mySong.mp3" controls/>

Instead of Adding a single Audio file directly in the Audio tag using src attribute a recommend you to use <source> tags so we can add multiple or extra audio files for Backup.

Audio Tag's Source Tag <source> :

Inside HTML Audio's starting and Closing tags <source> tag assigns audio file's path and audio file's type using it's src="" and type="" attributes.

SRC Attribute src="" :

assigned our Audio Source file, Where we have to give our File's name with file Extension (if the audio file is present on the Same location where our HTML file is, Otherwise we have to give full Path of that Audio File like src="C:/Desktop/Audio/mySong.mp3").

Type Attribute type="" :

Type Attribute specifies the audio file's Standard type, We have to give Audio Standard Type so our Browser's codec can encode or decode the digital audio file.

Audio Syntax (Adding Audio using Source Tag) :


 <audio controls>
  <source src="song.mp3" type="audio/mpeg"/>
 </audio>

Audio files, Extensions and Standard Type :

Audio File File Extension File Type
MPEG-1 Audio (.mp3) .mp3 audio/MPEG
Waveform Audio (.wav) .wav audio/wav
Windows Media Audio (.wma) .wma audio/wma
Ogg Vorbis (.ogg) .ogg audio/ogg

Always Use multiple source files :

We have to use multiple source tags So we can include different types of media files. Because some media files can't be unsupported by some browser for those cases we have to use multiple source Tags to add some Backup Audios. So the First file Included inside first Source tag will be Checked by Browser First, if your Browser Doesn't support the Given Audio file then Browser will skip and Check the next file Declared inside second source tag. when the browser finds the Supported Audio file then the browser will skip checking other Files. If browser unable to play any Declared Audio file then will Export the Statement given inside Audio Tag.

Multiple source Syntax :


 <audio controls>
  <source src="song1.Mp3" type="audio/mpeg"/>
  <source src="song2.wav" type ="audio/wav"/>
  your Browser does not support this audio
 </audio>

Insert/Adding Audio in HTML Example:


<html>
 <head>
  <title>audio in HTML <title>
 </head>
 <body>

  <audio controls>
    <source src="sound1.mp3" type="audio/mpeg"/>
    <source src="sound2.wav" type="audio/wav"/>
   <source src="http://programminghead.com/sounds/audio.mp3" type="audio/mpeg">
    Audio file is unsupported by your browser 
   </audio>

  </body>
</html>

Results


<audio> Tag :

The Audio tag Adds Audio Files inside HTML Document.

<controls> Attribute :

audio controls attribute allows browser to display some controls for audio file like (play/pause/volume controller/seek bar etc).
Note: their controllers 100% relies on your browser, in the different browser you can see some controls missing or not working.

<source> Tag :

Source Tag used in HTML to specify the source file for media Elements Like audio. Source file specifies media file from its src attribute. So we have to give our media files path inside source's src attribute and the media type inside source's type attribute

<src=""> attribute :

Source tag's src attribute specifies the source/path of the audio file. if your audio file is saved on the same folder where your HTML file is, then you only have to give your audio file's name with audio extension (like .mp3/.wav/.ogg etc). But if your audio file is in another folder/directory then you have to give full file path with file name and extension (like c:/Desktop/folder/audio.mp3).

<type=""> attribute :

Source tag's type attribute specifies the audio file's standard type. Like (type="audio/mpeg" for audio files with .mp3 file extension, type="audio/ogg" for audio with .ogg file extension,type="audio/wav" for audio with .wav file extension.)

why Multiple <source> Tags :

We are using more than 1 source tags to include Multiple or Backup audio files in HTML. Because some browsers aren't able to play all types of audio. By including more than one file with different audio type/formats by using multiple source tags we can include some backup audio file for unsupported browsers.

how to add background audio in html :

For adding Background audio on your Web-Browser we can use HTML bgsound tag, which allows users to add/play the song in the background using src, volume, loop, and balance attributes. But unfortunately most of the Browser Doesn't support this HTML Feature, so we also can play songs in the background using HTML Audio tag but we have to make some changes like Auto-play, Hidden Controllers, loop extra. But before that let's add background using HTML <bgsound> Tag.

Background sound using <bgsound> tag :


    <bgsound src="background.mp3" loop="infinite"/>

html audio autoplay :

To Autopay HTML audio we need to use Audio tag's autoplay Attribute. Which allows Browsers to play HTML audio Files Automatically.
We also can use loop Attribute to play our Audio file in Loop (Again and Again).

html audio autoplay - Example :


<html>
 <head>
  <title>audio in HTML <title>
 </head>
 <body>

  <audio autoplay loop>
   <source src="sound1.ogg" type="audio/ogg">
   <source src="sound2.mp3" type="audio/mpeg">
   Your browser does not support our audio element.
  </audio>

 </body>
</html>

how to embed audio file in html :

In HTML we have <embed> for that. We just have to write this <embed> anywhere inside the Body tag and we need to give our File's Path (File Location/Filename/FilesExtention ) using embed Tag's SRC="" Attribute.

how to embed audio file in html - Example :


<html>
 <body>

  <embed src="http:programminghead.com/sounds/audio.mp3">

 </body>
</html>

HTML audio player code :

In HTML we don't get any Elements Who can create a Custom Audio Player using HTML Codes. For Creating Custom Audio Player in HTML, we have to use JavaScript.
But we still can create a Basic Audio Player using HTML audio tags. HTML Audio tag's control Attribute provides interface like an Audio player. Where we get Few controls like,
Play/Pause Button,
Seekbar,
Audio File's Duration,
Mute Toggle Button ETC.
Please Note: These Controls Totally Depends open the Browser you are Using. So you can Get More or Few Controls Depending Upon your Browser.

HTML audio player code - Example :


<html>
 <body>

  <audio controls>
    <source src="sound1.mp3" type="audio/mpeg"/>
    <source src="sound2.wav" type="audio/wav"/>
   <source src="http://programminghead.com/sounds/audio.mp3" type="audio/mpeg">
    Audio file is unsupported by your browser 
   </audio>

 </body>
</html>
Comments

how to get help in windows 10

http://j.mp/2VCecjA
10:36 pm

Hi there, just became alert to your blog through Google, and found that it is really informative. I am gonna watch out for brussels. I will be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!

Nude Females

http://zo.ee/6Ct8F
04:26 am

Way cool! Some very valid points! I appreciate you writing this post and the rest of the site is also really good.

acryl nagels breda

https://www.perfectenagels.nl
12:39 am

Hmm it looks like your site ate my first comment (it was extremely long) so I guess I'll just sum it up what I had written and say, I'm thoroughly enjoying your blog. I too am an aspiring blog writer but I'm still new to the whole thing. Do you have any points for first-time blog writers? I'd really appreciate it.

minecraft download free

http://tinyurl.com/y5qlzeg5
10:20 am

You are so cool! I don't suppose I've read through a single thing like this before. So good to discover another person with genuine thoughts on this subject matter. Really.. many thanks for starting this up. This website is one thing that is needed on the web, someone with some originality!

minecraft download for free

http://tinyurl.com/y64puwx8
03:32 am

I really like what you guys tend to be up too. This kind of clever work and reporting! Keep up the awesome works guys I've incorporated you guys to blogroll.

g

http://tinyurl.com/y4fxu4hb
11:50 am

Do you have a spam issue on this blog; I also am a blogger, and I was wondering your situation; many of us have developed some nice practices and we are looking to exchange strategies with others, why not shoot me an email if interested.

minecraft download free pc

http://tinyurl.com/y5kg6f56
02:02 am

Hey there! This is my first comment here so I just wanted to give a quick shout out and say I really enjoy reading your posts. Can you suggest any other blogs/websites/forums that cover the same topics? Thanks for your time!

g

http://t.co/fdcdhCkdIu
04:02 pm

whoah this blog is fantastic i love reading your posts. Stay up the great work! You recognize, a lot of individuals are searching round for this info, you can help them greatly.

minecraft for free

http://tinyurl.com/y63yxqcp
12:46 pm

Hi there! Do you know if they make any plugins to protect against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?

g

http://t.co/GW5HaKlbx7
09:17 pm

Whats up are using Wordpress for your blog platform? I'm new to the blog world but I'm trying to get started and set up my own. Do you need any coding expertise to make your own blog? Any help would be greatly appreciated!

g

http://t.co/FCZSedT0MY
06:08 am

Wow, that's what I was seeking for, what a material! present here at this weblog, thanks admin of this site.

download minecraft free

http://tinyurl.com/yyrck858
11:02 am

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate?

minecraft free download pc

http://t.co/jnBGbHSIRT
12:33 am

Very nice post. I just stumbled upon your weblog and wished to say that I've really enjoyed browsing your blog posts. In any case I'll be subscribing to your rss feed and I hope you write again very soon!

download minecraft

http://t.co/jUyEdHfekf
02:04 am

I was pretty pleased to uncover this web site. I need to to thank you for your time just for this fantastic read!! I definitely savored every little bit of it and i also have you saved to fav to look at new stuff in your blog.

gamefly free trial

http://tinyurl.com/y3x9jcbr
12:14 pm

Excellent post. Keep writing such kind of information on your blog. Im really impressed by your site. Hi there, You've done a fantastic job. I'll certainly digg it and personally suggest to my friends. I am confident they will be benefited from this site.

gamefly

http://tinyurl.com/yxfyn6zz
11:20 am

I every time used to study article in news papers but now as I am a user of net so from now I am using net for posts, thanks to web.

gamefly

http://t.co/9tvsmzDxFV
04:12 pm

What's up colleagues, how is the whole thing, and what you wish for to say on the topic of this post, in my view its really amazing for me.

Amir

Neda
03:31 am

Jalal

Tomas

http://www.tomasporoshi.blogspot.com
10:12 am

http://www.tomasporoshi.blogspot.com

John Cook

03:03 am

Thanks. Video was very Helpful.

Rakesh Sharma

05:04 pm

Not working for me..... Controls are there. Play and Pause button Everything. But my audio is not Playing.

Admin

Thanks for Writing to us Mr. Rakesh SHarma. Sir, i think this is Because Browser is not able to Include audio file in the Web-page. To fix this Make sure that your file's path, file name and file Extension is written Correctly. Keep is mind Filename or File's path is Case Sensitive. Make sure Everything is correctly written inside source attribute src="". If your Problem is Still there. Then try to fix this using Developer Option present in Browsers (Chrome Recommended ). To open Developer Window press ctrl+shift+i keys combination or right cslick anywhere in the browser and Select Inspect Element and then in the New Windows select Console. This will help you to track your main Problem Down.
Thanks

Rahul Thakur

www.rahul.in
11:45 am

Gr8

Admin

Thanks for visiting Our Web-Site

shubham

04:22 pm

great Post :)

Admin

Thanks for your Visit.

Write to Us