How to Add Audio in HTML using Notepad
If you are Wondering about How to Add Audio in HTML using Notepad then you have come to the right Place.
In this Tutorial we are going to Add Audio file in HTML using Notepad Text Editor.
index.html [How to Add Audio in HTML using Notepad]
<html>
<head>
<title>Audio in HTML</title>
</head>
<body>
<audio src="audio.mp3"></audio>
</body>
</html>
Steps we are going to Discuss about :
Step 1. Open Notepad.
Step 2. Create HTML file.
Step 3. Add Audio using HTML Audio Tags.
Step 4. Save and Run the HTML File.
Step 5. Play your Audio on HTML Web-page.
![Youtube Video : How to Add Audio in HTML using Notepad Youtube: How to Add Audio in HTML using Notepad](/_next/image?url=%2FYT-Thumb%2FrukiS1Q1-xU.jpg&w=1200&q=75)
How to Add Audio files from Local Storage
We can add Audio from our Local Storage in HTML. Where we have to Assign our Audio file’s Path inside HTML Audio tags. So Browser can get our Audio file from the Storage and Insert into our HTML Web-page.
To Add Audio Files in HTML from Local Storage, We will need these 3 Things.
A Audio File
Which we are going to Add, Control, Play and Listen Inside Our HTML Web-page.
A Text Editor Like Notepad/Notepad++
By using That we are going to Create, Write and Save our HTML Code.
Last One is A Browser
To Run The HTML File and Play our Audio file inside our HTML Web-page.
![Image : How to Add Audio in HTML using Notepad How to Add Audio in HTML using Notepad](/_next/image?url=%2FImages%2Fhow-to-insert-audio-in-html-using-notepad.png&w=1200&q=75)
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Step 1. Open Notepad and Start Writing HTML Syntax
HTML Syntax Starts with HTML Tags and Includes some Other Tags Like,
Head Tag
Title Tag
Body Tag
index.html
<html>
<head>
<title></title>
</head>
<body> </body>
</html>
Step 2. Declare HTML Audio Tag
As we all know, that in HTML we have to use Tags, to Include HTML Elements, like Audio, Video, Images ETC. To Add Audio files inside the HTML Document we have the Audio Tags <audio> for that.
index.html
<audio></audio>
Step 3. Assigning Audio File’s Path
By using Audio tags in HTML Document we have Declared an Audio Element inside our HTML Web page. We have to Specify our Audio File’s Path, Inside the HTML Audio Tags so Our Browser can get the Audio File, and Add that Audio File inside our HTML Web-page.
To assign Audio File’s Path,
Select the Audio Starting tag,
After the tag name,
we have to Give our Audio file’s Location inside this SRC attribute.
index.html
<audio src="audio.mp3"></audio>
( Important: So if your Audio file and the HTML file is Present on the same Location. Then you just have to give your Audio file’s name, followed by the File Extension here.)
Step 4: Add Controls Attribute:
By Video tag and SRC Attribute, We have Provided Enough Data so Browser can Add our Audio File in our HTML Web-page. But there isn’t anything so we can Play or Activate the Audio file the Browser. For that, We have to use this Control Attribute Inside the HTML Audio Tags.
index.html
<audio src="audio.mp3" controls></audio>
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Final Step: Save and Run the HTML file on the Browser
Our Audio File Should be There.
But if your Audio file isn’t there, Then make sure that Your Audio File and Your HTML File is Present at the Same Folder. Or if your HTML file and the Audio File is present at two different locations or you are Facing Errors Inside the Console Tab.
then we have to give the full path of our Audio File.
Because Browser isn’t able to Detect our Audio File in the Parent Location.
{To get the full path of any file, we have to Right-click on that file. Select Properties
and under the Security tab
you can copy the full path of your Audio file.}
Now Paste here the Copied Path.
Now Refresh the Browser.
That’s it For Adding Audio files from Local Storage.
FAQs about How to Add Audio in HTML
How to insert video in html using notepad
To insert video in HTML using Notepad, we have to use HTML’s Video Tags instead of Audio Tags.
Inside the HTML Video tag’s SRC attribute we have to give our Video file’s Path so browser can get the Video file and Display as a Output.
index.html
<video src="myVideo.mp4" controls></video>
HTML audio autoplay or html audio autoplay not working
Most Browser like Chrome doesn’t support the audio Auto-play Method due to some Security Reasons, But you still can use HTML audio tag’s autoplay attribute to Play your Audio file automatically.
index.html
<audio src="myAudio.mp3" autoplay></audio>
How to embed audio files in html
To Embed audio files in HTML we have to use HTML’s <embed> tag. Inside Embed tag’s SRC attribute we have to provide our audio file’s Path with the File Name and the File Extension.
index.html
<embed src="myAudio.mp3">
How to add background music in html from youtube
As i told you before some Browsers like Chrome doesn’t allow users to play a Audio file Automatically in the Background and YouTube is a Video Platform, They have video files on there website. If you want to use Audio from YouTube video then you can use the Code given Below. Which will get the Data and due to 0 height and 2px width i will not display on the Browser which kinda play your file in Background.
index.html
<embed src="youtubeVideoLinkHere" loop="true" autostart="true" width="2" height="0">
HTML audio player code or how to add an audio file to your website
index.html
<html>
<head>
<title>Audio in HTML</title>
</head>
<body>
<audio src="audio.mp3"></audio>
</body>
</html>
On This Page
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.