Posted by KCS

Soud recording tool HTML

 
```
<!DOCTYPE html>
<html>
<head>
<title>Microphone Tool HTML with JS</title>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px;
}
.microphone {
width: 40px;
height: 40px;
background-color: #ebebeb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.microphone i {
font-size: 18px;
color: #333;
}
#recording {
background-color: red;
}
#message {
font-size: 18px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="microphone" onclick="toggleRecording()">
<i class="fa fa-microphone"></i>
</div>
<div id="message">Click on the microphone to start recording</div>
</div>
<script>
let isRecording = false;
function toggleRecording() {
const microphone = document.querySelector('.microphone');
const message = document.querySelector('#message');
if (!isRecording) {
microphone.setAttribute('id', 'recording');
message.textContent = 'Recording...';
isRecording = true;
} else {
microphone.removeAttribute('id');
message.textContent = 'Click on the microphone to start recording';
isRecording = false;
}
}
</script>
</body>
</html>
```
In this code, we have created an HTML file that contains a single page having a container with a microphone icon and a message. When you click on the microphone icon, it starts recording by changing its color to red and displaying a message "Recording...". When you click it again, it stops recording and the color of the microphone icon changes back to grey color.
We have also used inline styles in our HTML code to make the microphone icon responsive with CSS properties like display, margin, border-radius etc.
Email Post

LINK TOOL & PRODUCTS