programminghead Logo

How to Add Audio in HTML :

To Know How to Add Audio in HTML we Need to Understand about Some HTML Elements like <audio>,<source> and Attributes like "SRC", "Controls" to being able to Add Audio in HTML Webpage.

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 Add Audio in HTML 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

Write to Us

Captcha