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: How to Add Audio in HTML using Notepad
Play Youtube Video

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.

How to Add Audio in HTML using Notepad
Ad

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.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

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>
Ad

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.

Less then 10$/hSee Plans100% Free Trial + Money Back Guaranty

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>
Ad

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.

Just 10$/hSee Plans100% Free Trial + Money Back Guaranty
Logo