Logo - ProgrammingHead

How to Insert Audio in HTML using Notepad | Notepad++

Hello, guys Welcome. In this tutorial, we are going Know How to Insert Audio in HTML using Notepad | Notepad++ Text Editor.
Follow these easy two Methods and you are DONE.

How to Insert Audio in HTML using Notepad | Notepad++

index.html

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

Results

How to Insert Audio files from Local Storage

To Insert Audio Files in HTML from Local Storage We will Need these 3 Things

A Audio File
Which we are going to Insert Inside Our HTML Webpage

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 Webpage

So get started with the HTML Syntax.

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 and <body> Tag.

index.html

<html>
  <head>
    <title></title>
  </head>    
  <body>  
  </body>    
</html>

Step 2. Use 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 insert Audio files inside the HTML Document we have the "Audio Tags" for that.

index.html

<audio src="" controls></audio>

Step 3. Using Audio File's Path

Using Audio tags in HTML Document we have Declared an Audio Element inside our HTML Webpage. We have to Specify our Audio File's Path, Inside the HTML Audio Tags so Our Browser can get the Audio File, and Insert that Audio File inside our HTML Webpage.
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" controls></audio>

Results

(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.)

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 like this.
or you are seeing This Error 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.

Related Topics: How to Insert Audio in HTML using Notepad | Notepad++

Click on Titles below to reveal the Data

What tag do we use to add an audio to our html document?

index.html

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

AUDIO <audio> tag we do use to add an audio to our html document. Where inside it's SRC=" " attribute we
have to give our Audio file's path.
(Filename with Extention example SRC="audio.mp3" Where audio is my File's name and .mp3 is my audio file's extension).

HTML code for audio

HTML code for audio or HTML Code for Inserting Audio file in HTML Document is made of HTML Audio tags and Its Attributes like SRC and controls. that allow Browsers to include and Controls for the Audio inside HTML Document.

index.html

<html>
  <head>
    <title>Audio in HTML</title>
  </head>    
  <body> 
    
    <audio src="audio.mp3" controls></audio>
    
  </body>    
</html>

Results

How to make a webpage using notepad

To make a webpage using notepad, We have to use HTML.
HTML is a Markup language which is used for Creating Webpages.
To create or make a Webpage using Notepad. We have to Write HTML code inside our Notepad Text Editor.
HTML Code like:
HTML Syntax,
Headings.
Paragraphs.
After that save that HTML code with .html Extension and Run that .html Saved HTML file in your Browser.

index.html

<html>
  <head>
    <title>HTML Webpage</title>
  </head>    
  <body> 
    
    <h1> Hello World </h1>
    <p>
      This is my First Webpage using HTML and Notepad Text Editor.
    </p>
    
  </body>
</html>