Skip to content

2
2023-191
Commit 49ce6502 authored by Madhushan Liyanage's avatar Madhushan Liyanage
Browse files
Options

Vocal Trainer

parent 801404a4
Hide whitespace changes
Inline Side-by-side
Showing with 374 additions and 1 deletion
Frontend/src/components/VocalTrainingCard.jsx 0 → 100644
View file @ 49ce6502
import React, { useState } from "react";
import axios from "axios";
function VocalTrainingCard(props) {
const { id, name, imgurl } = props.data;
const [isRecording, setIsRecording] = useState(false);
const [audioBlob, setAudioBlob] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
const [selectedWord, setSelectedWord]=useState(props.data)
let mediaRecorder;
const startRecording = async () => {
setIsRecording(true);
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
const chunks = [];
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
chunks.push(e.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: "audio/wav" });
setAudioBlob(blob);
setAudioUrl(URL.createObjectURL(blob));
};
mediaRecorder.start();
setTimeout(() => {
mediaRecorder.stop();
setIsRecording(false);
}, 5000); // Record for 5 seconds
} catch (error) {
console.error("Recording error:", error);
setIsRecording(false);
}
};
const playAudio = () => {
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
};
const sendAudioToBackend = async () => {
alert(selectedWord.name)
if (audioBlob) {
const formData = new FormData();
formData.append("audio", audioBlob);
formData.append("label",selectedWord.name)
try {
const response = await axios.post("http://127.0.0.1:5000/vocal-check", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
console.log("Backend response:", response.data);
} catch (error) {
console.error("Backend error:", error);
}
}
};
return (
<>
<div className="card">
<div className="word">
<button className="btn" data-toggle="modal" data-target="#exampleModalCenter">
<img src={imgurl} />
<div className="label">
<p><b>{name}</b></p>
</div>
</button>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<button class ="btn" onClick={startRecording} disabled={isRecording}>
{isRecording ? "Recording..." : "Start Recording"}
</button>
<button class ="btn" onClick={playAudio} disabled={!audioUrl}>
Check Audio
</button>
<button class ="btn" onClick={sendAudioToBackend} disabled={!audioBlob}>
Send Audio to Backend
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</>
);
}
export default VocalTrainingCard;
\ No newline at end of file
Frontend/src/pages/AudioRecoder.js 0 → 100644
View file @ 49ce6502
import React, { useState } from "react";
// import axios from "axios";
function AudioRecoder() {
const [isRecording, setIsRecording] = useState(false);
const [audioBlob, setAudioBlob] = useState(null);
const [audioUrl, setAudioUrl] = useState(null);
let mediaRecorder;
const startRecording = async () => {
setIsRecording(true);
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
const chunks = [];
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
chunks.push(e.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(chunks, { type: "audio/wav" });
setAudioBlob(blob);
setAudioUrl(URL.createObjectURL(blob));
};
mediaRecorder.start();
setTimeout(() => {
mediaRecorder.stop();
setIsRecording(false);
}, 5000); // Record for 5 seconds
} catch (error) {
console.error("Recording error:", error);
setIsRecording(false);
}
};
const playAudio = () => {
if (audioUrl) {
const audio = new Audio(audioUrl);
audio.play();
}
};
const sendAudioToBackend = async () => {
if (audioBlob) {
const formData = new FormData();
formData.append("audio", audioBlob);
// try {
// const response = await axios.post("/getText", formData, {
// headers: {
// "Content-Type": "multipart/form-data",
// },
// });
// console.log("Backend response:", response.data);
// } catch (error) {
// console.error("Backend error:", error);
// }
}
};
return (
<div>
<button onClick={startRecording} disabled={isRecording}>
{isRecording ? "Recording..." : "Start Recording"}
</button>
<button onClick={playAudio} disabled={!audioUrl}>
Check Audio
</button>
<button onClick={sendAudioToBackend} disabled={!audioBlob}>
Send Audio to Backend
</button>
</div>
);
}
export default AudioRecoder;
Frontend/src/pages/VocalTraining.jsx 0 → 100644
View file @ 49ce6502
import React, { useEffect, useRef, useState } from "react";
import {WORDS} from "../words";
import '../styles/vocalTraining.css';
import VocalTrainingCard from "../components/VocalTrainingCard";
function VocalTraining() {
return (
<div style={{ height: '100%' }}>
{/* <h2 className="content-title"> jdÑl mqyqKqj</h2> */}
<div className="content-title d-flex justify-content-center align-items-center">
<h2> - jdÑl mqyqKqj -</h2>
</div>
<div className="d-flex align-items-center" style={{ height: '92%' }}>
<div className="row">
<div className="col d-flex align-items-center">
</div>
<div className="col d-flex align-items-center">
<div className="maincard scroll">
<div className="words">
{" "}
{WORDS.map((word) =>
<VocalTrainingCard data ={word}/>)}</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default VocalTraining;
\ No newline at end of file
Frontend/src/styles/vocalTraining.css 0 → 100644
View file @ 49ce6502
.words{
width: 100%;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: center;
}
.word{
border-radius: 15px;
width: 50px;
height: 50px;
margin: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.word img{
width: 100px;
height: 100px;
object-fit: cover;
}
.word .label{
text-align: center;
}
.word:hover{
transition: 0.3s ease-in;
cursor: pointer;
}
.checkBtn{
border-radius: 10px;
align-items: center;
}
.card{
width: 200px;
height: 250px;
border: 1px solid orangered;
border-radius: 5px;
overflow: hidden;
padding:10px;
margin: 30px 20px;
background-color: white;
align-items: center;
object-fit: contain;
}
.maincard{
width: 900px;
height: 400px;
border: 1px solid orangered;
border-radius: 5px;
overflow: hidden;
padding:10px;
margin: 30px 20px;
background-color: white;
align-items: center;
object-fit: cover;
}
.scroll{
color: orangered;
overflow-y: scroll;
scrollbar-color:orange;
}
.btn{
}
.btn:hover{
color:orange;
}
Frontend/src/words.js 0 → 100644
View file @ 49ce6502
import image1 from "./images/download1.jpeg";
import image2 from "./images/download2.jpeg";
import image3 from "./images/download3.jpeg";
import image4 from "./images/download4.jpeg";
import image5 from "./images/download5.png";
import image6 from "./images/download6.jpeg";
export const WORDS = [
{
id:1,
name: "Apple",
imgurl: image1,
},
{
id:2,
name: "Ball",
imgurl: image2,
},
{
id:3,
name: "Butterfly",
imgurl: image3,
},
{
id:4,
name: "Mother",
imgurl: image4,
},
{
id:5,
name: "Father",
imgurl: image5,
},
{
id:6,
name: "Orange",
imgurl: image6,
},
{
id:7,
name: "Mother",
imgurl: image4,
},
{
id:8,
name: "Father",
imgurl: image5,
},
{
id:9,
name: "Orange",
imgurl: image6,
},
]
\ No newline at end of file
SpringBootBackend/src/main/resources/application.properties
View file @ 49ce6502
......@@ -9,7 +9,7 @@ spring.datasource.url = jdbc:mysql://localhost:3306/shrasthra?sessionVariables=s
spring.jpa.database-platform = org.hibernate.dialect.MySQL8Dialect
#spring.datasource.url = jdbc:mysql://localhost:3306/ecare?useSSL=false
spring.datasource.username = root
spring.datasource.password = password
spring.datasource.password = root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment