I am a researcher trying to collect speech data on Language/Speaker change detection point. I tried to create a web app for that purpose. I have two HTML pages. The first one is user registration as shown in fig [image1][1] after clicking on that page it will jump to another HTML page [image2][2] where the user will listen to the audio and give his/her response [1]: https://i.stack.imgur.com/WAOcG.png [2]: https://i.stack.imgur.com/6T0IA.png
Questions:
- How can i save the 'sentence number' value in HTML page 1 which is to be used in HTML page 2 (depending on the input value the recorded data will start playing)
I have been able to put something together with my little knowledge in JavaScript but it is not working properly
My code for HTML-1 - This is the input section where the user will give his/her name and the sentence no from where the user wants to listen to the audio. After searching a couple of forums i found out that this can be done via session storage which i tried to use but it is not working
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listening Test</title>
<link type="text/css" href="materialize.min.css" rel="stylesheet" media="screen,projection"/>
<link type="text/css" href="style.css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav role="navigation">
<div >
<!-- logo -->
<a href="index.html" id="logo-container" >Speaker/Language change detection</a>
<!-- sidenav menu button -->
</div>
</nav>
<div id="index-banner">
<div >
<h2 >Listening Test</h2>
<div >
<h5 >Step 1: Enter sentence you want to start from <br> Step 2: click start and listen to the fixed set of audio files <br> If you detect speaker change point, give your response in the form of 'YES/NO'</h5>
<p style="color:red">(Use earphones if available)</p>
</div>
<form id="form">
<div >
<div >
<input value="" id="student" type="text">
<label for="student">Your name</label>
</div>
<div >
<input value="" id="number" min="1" max="150" step="1" type="number" >
<label for="number">Enter sentence no</label>
</div>
</form>
<div >
<a href="recorder.html"><i >keyboard_voice</i>Start session 1 (Language Change)</a>
</div>
</div>
</div>
</div>
<script>
var songIndex = parseInt(document.getElementById("number").value)
var songIndex1=songIndex.toString()
console.log(songIndex1)
sessionStorage.setItem("songIndex1", songIndex1);
// if (localStorage.getItem("uinput"))
// {
// localStorage.removeItem("uinput");
// } else {
// localStorage.setItem("uinput", userinput);
// }
</script>
</body>
</html>
My code for HTML page 2 - The sentence number given by the user in the previous page will be used to set the sentence ID and depending on that the audio will play
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="music-container">
<div id="music-info">
<h4 id="title"></h4>
<span id="timestamp">00:00 / 00:00</span>
<div id="progress-container">
<div id="progress"></div>
</div>
</div>
<audio src="music/001.wav" id="audio"></audio>
<div >
<img src="images/001.png" alt="music-cover" id="cover" />
</div>
<div >
<!-- <button id="random" >
<i ></i>
</button> -->
<!-- <button id="prev" >
<i ></i>
</button> -->
<button id="play" >
<i >Play</i>
</button>
<button id="next" >
<i >Next audio</i>
</button>
<button id="repeat" >
<i >Repeat</i>
</button>
<br>
<button id="yes" >
<i >Yes</i>
</button>
<button id="no" >
<i >No</i>
</button>
</div>
</div>
<!-- <p hidden>
<details id="order-container"></details>
</p> -->
<script src="script.js"></script>
</body>
</html>
I am a complete novice in web development, so any kind of help would be greatly appreciated. I am also attaching the js code below
const musicContainer = document.getElementById("music-container");
const musicInfo = document.getElementById("music-info");
const playBtn = document.getElementById("play");
// const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById("next");
// const random = document.getElementById('random');
const repeat = document.getElementById("repeat");
const audio = document.getElementById("audio");
const progress = document.getElementById("progress");
const progressContainer = document.getElementById("progress-container");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
const timestamp = document.getElementById("timestamp");
// const orderContainer = document.getElementById('order-container');
const yes = document.getElementById("yes");
const no = document.getElementById("no");
// Song titles
const initialSongs = [
"001",
"002",
"003",
"004",
"005",
"006",
"007",
"008",
"009",
"0010",
"0011",
"0012",
"0013",
"0014",
"0015",
"0016",
"0017",
"0018",
"0019",
"0020",
"0021",
"0022",
"0023",
"0024",
"0025",
"0026",
"0027",
"0028",
"0029",
"0030",
"0031",
"0032",
"0033",
"0034",
"0035",
"0036",
"0037",
"0038",
"0039",
"0040",
"0041",
"0042",
"0043",
"0044",
"0045",
"0046",
"0047",
"0048",
"0049",
"0050",
"0051",
"0052",
"0053",
"0054",
"0055",
"0056",
"0057",
"0058",
"0059",
"0060",
"0061",
"0062",
"0063",
"0064",
"0065",
"0066",
"0067",
"0068",
"0069",
"0070",
"0071",
"0072",
"0073",
"0074",
"0075",
"0076",
"0077",
"0078",
"0079",
"0080",
"0081",
"0082",
"0083",
"0084",
"0085",
"0086",
"0087",
"0088",
"0089",
"0090",
"0091",
"0092",
"0093",
"0094",
"0095",
"0096",
"0097",
"0098",
"0099",
"00100",
"00101",
"00102",
"00103",
"00104",
"00105",
"00106",
"00107",
"00108",
"00109",
"00110",
"00111",
"00112",
"00113",
"00114",
"00115",
"00116",
"00117",
"00118",
"00119",
"00120",
"00121",
"00122",
"00123",
"00124",
"00125",
"00126",
"00127",
"00128",
"00129",
"00130",
"00131",
"00132",
"00133",
"00134",
"00135",
"00136",
"00137",
"00138",
"00139",
"00140",
"00141",
"00142",
"00143",
"00144",
"00145",
"00146",
"00147",
"00148",
"00149",
"00150",
];
let songs = [...initialSongs];
// Keep track of song
let songIndex = 0;
// Initially load song details info DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `music/${song}.wav`;
cover.src = `images/${song}.png`;
}
var startTime;
// Play song
function playSong() {
updateTimestamp();
musicContainer.classList.add("play");
musicInfo.classList.add("show");
playBtn.querySelector("i.fa").classList.remove("fa-play");
playBtn.querySelector("i.fa").classList.add("fa-pause");
audio.play();
startTime = Date.now();
}
// Pause song
function pauseSong() {
musicContainer.classList.remove("play");
playBtn.querySelector("i.fa").classList.add("fa-play");
playBtn.querySelector("i.fa").classList.remove("fa-pause");
audio.pause();
}
// Previous song
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = song.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Calculate time
function stopButton() {
if (startTime) {
var endTime = Date.now();
var difference = endTime - startTime;
alert("Reaction time: " difference " ms");
startTime = null;
}
}
// Next song
function nextSong() {
songIndex ;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
// Get song duration
function getSongDuration() {
let allMins = Math.floor(audio.duration / 60);
if (allMins < 10) {
allMins = "0" String(allMins);
}
let allSecs = Math.floor(audio.duration % 60);
if (allSecs < 10) {
allSecs = "0" String(allSecs);
}
if (allMins && allSecs) {
return `${allMins}:${allSecs}`;
} else {
return "00:00";
}
}
// Update timestamp
function updateTimestamp() {
// Get minutes
let mins = Math.floor(audio.currentTime / 60);
if (mins < 10) {
mins = "0" String(mins);
}
// Get seconds
let secs = Math.floor(audio.currentTime % 60);
if (secs < 10) {
secs = "0" String(secs);
}
if (mins && secs) {
timestamp.innerHTML = `${mins}:${secs} / ${getSongDuration()}`;
} else {
timestamp.innerHTML = "00:00 / 00:00";
}
}
// Update progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
updateTimestamp();
}
// Set progress bar & timestamp
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
updateTimestamp();
}
// Set song on repeat
function repeatSong() {
const isPlaying = musicContainer.classList.contains("play");
if (isPlaying) {
pauseSong();
} else {
playSong();
}
}
// Set song on repeat
function setRandomOrder() {
if (random.classList.contains("active")) {
random.classList.remove("active");
songs = [...initialSongs];
songIndex = songs.indexOf(title.innerText);
} else {
random.classList.add("active");
songs = shuffle(songs);
songIndex = songs.indexOf(title.innerText);
}
}
// Shuffle songs
function shuffle(songs) {
for (let i = songs.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i 1));
[songs[i], songs[j]] = [songs[j], songs[i]];
}
return songs;
}
// Set song on click
function setSong(i) {
songIndex = i;
console.log("setSong -> songIndex", songIndex);
loadSong(songs[songIndex]);
playSong();
}
// Event listeners
playBtn.addEventListener("click", () => {
const isPlaying = musicContainer.classList.contains("play");
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change song
nextBtn.addEventListener("click", nextSong);
// Time/song update
audio.addEventListener("timeupdate", updateProgress);
// Click on progress bar
progressContainer.addEventListener("click", setProgress);
// Song ends
audio.addEventListener("ended", pauseSong);
// Repeat song
repeat.addEventListener("click", repeatSong);
// Random songs order
// random.addEventListener('click', setRandomOrder);
yes.addEventListener("click", stopButton);
no.addEventListener("click", stopButton);
CodePudding user response：
STEP 1
Add query string when user clicks on a link (source).
element.addEventListener('click', function(event) {
// Stop the link from redirecting
event.preventDefault();
// Redirect instead with JavaScript
window.location.href = element.href '?sentence-number=1';
}, false);
STEP 2
Check query string value on a page load (source).
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "sentence-number" --> "https://example.com/?sentence-number=1"
let value = params.sentence-number; // "1"
STEP 3
If the value of "sentence-number" is "X" on a page load, then play "Y".
This is a better way than using localStorage/sessionStorage.
CodePudding user response：
If you strictly only want to use HTML, CSS, and JS (no backend languages like PHP) you could redirect a user to your second page and include all the form values as query parameters.
// User one page 1 hits submit -> redirects to page 2
index.html -> result.html?sentenceNumber=4
You could then read that query parameter in JS from result.html like this:
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
let value = params.sentenceNumber;
// value = 4
More information on how to read Query Parameters here.