I am new on JavaScript.I am trying to build a speech to text website using JavaScript. I am facing problems when dealing with audio volumes. Here the volume of audio speech(msg) is changing with values from volumeslider. But there is no actual change of volume in my audio.
Here is my piece of code for volumeslider
volume.addEventListener("input", () => {
const vol = volume.value;
msg.volume = vol; document.querySelector("#volume-label").innerHTML = vol*100;
});
const input = document.getElementById("hidden")
const btn1 = document.getElementById("btn1")
const play = document.getElementById("play")
const pause = document.getElementById("pause");
const resume = document.getElementById("resume");
const restart = document.getElementById("restart");
const volume = document.getElementById("volume")
const reader = btn1.addEventListener("click", function() {
input.click();
})
input.addEventListener("change", (event) => {
let file = input.file
if (typeof e === 'undefined') {
const file = event.target.files[0]
if (file) {
const reader = new FileReader()
reader.readAsText(file)
reader.onload = () => console.log(reader.result)
play.addEventListener("click", function() {
msg = new SpeechSynthesisUtterance(reader.result);
msg.volume = 1;
speechSynthesis.speak(msg)
volume.addEventListener("input", () => {
// Get volume Value from the input
const vol = volume.value;
// Set volume property of the SpeechSynthesisUtterance instance
msg.volume = vol;
// Update the volume label
document.querySelector("#volume-label").innerHTML = vol * 100;
});
})
pause.addEventListener("click", () => {
speechSynthesis.pause();
});
resume.addEventListener("click", () => {
speechSynthesis.resume();
});
restart.addEventListener("click", () => {
speechSynthesis.restart();
});
}
}
})body {
background-color: aqua;
}
#btn1 {
width: 80%;
height: 100px;
margin-bottom: 200px;
}
.btn2 {
width: 20%;
height: 70px;
}
.flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 110px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Page02</title>
<link rel="stylesheet" href="C:\Users\CZ\Downloads\Text To Speech Converter in JavaScript\Pageno03\style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="flex">
<input id="hidden" type="file" hidden="hidden" />
<button id="btn1">Select/Upload .txt Files</button>
<div>
<p class="lead">Volume</p>
<input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
<span id="volume-label" class="ms-2">100</span>
</div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="resume">Resume</button>
<button id="restart">Restart</button>
<br>
</div>
<script src="C:\Users\CZ\Downloads\Text To Speech Converter in JavaScript\Pageno03\script.js"></script>
</body>
</html>
Here is my full code: