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.
<body> <audio src="http://programminghead.com/sounds/audio.mp3" controls/> </body>
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.
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.
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.
<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.
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.
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 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 controls> <source src="song.mp3" type="audio/mpeg"/> </audio>
|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|
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.
<audio controls> <source src="song1.Mp3" type="audio/mpeg"/> <source src="song2.wav" type ="audio/wav"/> your Browser does not support this audio </audio>
<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>
The Audio tag Adds Audio Files inside HTML Document.
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 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
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).
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.)
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.
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.
<bgsound src="background.mp3" loop="infinite"/>
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> <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>
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.
<html> <body> <embed src="http:programminghead.com/sounds/audio.mp3"> </body> </html>
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,
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> <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>