Audience:
Anyone who can survive after seeing my css code.
Me: Yo! Bro! Ready for a new post?
Bro: Not interested!
I'm fed up with your js-stuff!
You always skip the front-end!!!
Me: Well! This time, only fronty-end, just front-end!
And I will buy you an ice-cream!
Bro: Ice-Cream, yey!
Which flavor?
Me: Vanilla Js!😋
Bro: 😡
Requirements:
- os: linux.
- vs code (with live server extension).
- A browser.
For Impatients Like Me:
An Overview:
1.Live server starts and our app is opened in the browser!
2.It has a Heading (name of the app).
3.An input box, a submit button and an audio player at the bottom.
4.Steps to Use:
1)Enter a url(to an mp3-audio-file) in the input box and press submit!
2)Now press the play button of audio player and listen!
5.End.
Steps:
1.Create Project Folder 'Simple Audio Player'.
2.Inside Project Folder, create:
1)index.html
2)style.css
3)index.js
3.Now, fill them with these:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Audio Player</title>
<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>
</head>
<body>
<div class="heading-box">
<div class="heading">
<div id="heading">Simple Audio Player</div>
</div>
</div>
<div class="main-box">
<div class="main">
<h2>Enter URL For Your Audio File:</h2>
<input type="text" id="url">
<button class="submit" onclick="play()">Submit</button>
</div>
</div>
<div class="player-box">
<audio controls id="player"></audio>
</div>
</body>
</html>
style.css:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.heading-box{
color: aliceblue;
background-color:rgba(22, 175, 132, 0.701);
padding: 20px 0px;
display: flex;
justify-content: center;
}
.heading{
width: 900px;
display: flex;
justify-content: center;
}
#heading{
font-size: 45px;
}
.main-box{
display: flex;
color: white;
background: rgb(101, 11, 170);
justify-content: center;
}
.main{
width: 900px;
height: 400px;
display: flex;
justify-content: space-around;
align-items: center;
}
#url{
width: 300px;
font-size: 30px;
}
.submit{
background: #000;
color: aliceblue;
font-size: 20px;
border: 0px;
padding: 5px;
border-radius: 4px;
}
.player-box{
display: flex;
background: rgb(101, 11, 170);
justify-content: center;
}
#player{
width: 600px;
height: 200px;
padding: 30px;
}
index.js:
function play(){
let url = document.getElementById("url").value
if(url === "" ) {
alert("Yo! Please Enter URL!");
}else {
const player = document.getElementById("player")
player.src = url;
player.load()
}
}
4.Done!
Bro: Cheating! Cheating! Cheating!!!
You said, you will explain it!
Me: Did I?
Me: Huh!😤
On this planet, the simplest way to die is by explaining your code!
Either the explainer will die or the listener!
5.First, html:
1)It has three container divs:
heading-box, main-box, and player-box.
2)heading-box contains heading ("Simple Audio Player").
3)main-box contains main div.
4)main div wraps:
"enter url" message (h2 element),
input element, and submit button.
5)player-box contains audio element.
6.Now, csssssss:
1)We use flex-box.
2)First, we set display:flex; for all the three main boxes (container divs).
3)Then, justify-content: center; to all the three boxes.
So that the inner elements are aligned to centre (horizontally).
4) We do the same for the inner elements as well!
5) Set justify-content: space-around; and
align-items: center; for main div.
6)Rest rules are for styling!
7.Last, Js:
1) A simple function play(), which is triggered by the submit button.
2)What it does:
If user presses the submit button with a url then loads the audio player with that url.
If user presses the button without url, then yells at user with an alert box!
8.Now, really done!!!🥶
Bro: 🥱
9.Final: Open the index.html with Live-Server and test it!
Top comments (0)