244 строки
6.1 KiB
HTML
244 строки
6.1 KiB
HTML
<html>
|
|
<head>
|
|
<title>Model comparison</title>
|
|
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
|
|
<script src="filenamesAndModels.js"></script>
|
|
</head>
|
|
<style>
|
|
.navbar {
|
|
overflow: hidden;
|
|
background-color: #333;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.navbar a {
|
|
float: left;
|
|
font-size: 16px;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown {
|
|
float: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown .dropbtn {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
border: none;
|
|
outline: none;
|
|
color: white;
|
|
padding: 14px 16px;
|
|
background-color: inherit;
|
|
font-family: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
|
|
background-color: red;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 160px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dropdown-content a {
|
|
float: none;
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: left;
|
|
}
|
|
|
|
.dropdown-content a:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
|
|
|
|
var currentCount = 0;
|
|
var currentFile = fileNames[currentCount];
|
|
|
|
console.log(currentCount);
|
|
console.log(currentFile);
|
|
|
|
var modelsCount = baseUrls.length;
|
|
var filesCount = fileNames.length;
|
|
|
|
var modifiedFiles = []
|
|
|
|
</script>
|
|
<div class="navbar">
|
|
<button class="btn btn-primary btn-lg" onclick="loadMsRecordings()">MS Recordings</button>
|
|
<button class="btn btn-primary btn-lg" onclick="loadAudiosetRecordings()">Audioset Recordings</button>
|
|
<button class="btn btn-primary btn-lg" onclick="loadReverbRecordings()">Synthetic Reverb Recordings</button>
|
|
<button class="btn btn-primary btn-lg" onclick="loadNoReverbRecordings()">Synthetic NoReverb Recordings</button>
|
|
Enter the noise type to filter on<input type="text" name="noiseType"></input><button class="btn btn-info btn-lb" onclick="searchNoiseType()">Search noise type</button>
|
|
</div>
|
|
<div class="container">
|
|
<h2>Audio Clips</h2>
|
|
|
|
<table class="table" id="table2">
|
|
<tbody>
|
|
<tr><td>Index</td><td id="index"></td></tr>
|
|
<tr><td>Progress</td><td><div class="progress"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div></td></tr>
|
|
<tr><td>Clipname</td><td id="clipname"></td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="row">
|
|
<button class="btn btn-success btn-lg" onclick="previous()" style="margin: 10px"> Previous</button>
|
|
<button class="btn btn-primary btn-lg" onclick="next()" style="margin: 10px"> Next</button>
|
|
<button class="btn btn-primary btn-lg" onclick="skip10()" style="margin: 10px"> Skip 10</button>
|
|
<button class="btn btn-primary btn-lg" onclick="skip100()" style="margin: 10px"> Skip 100</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// setup
|
|
|
|
function setupIndexAndClip(){
|
|
let current = ((currentCount+1)*100/filesCount)+"%";
|
|
$("#index").html((currentCount+1)+" / "+filesCount);
|
|
|
|
if(modifiedFiles.length > 0) {
|
|
current = ((currentCount+1)*100/modifiedFiles.length)+"%";
|
|
$("#index").html((currentCount+1)+" / "+modifiedFiles.length);
|
|
}
|
|
$(".progress-bar").css("width", current);
|
|
$(".progress-bar").html(current);
|
|
$("#clipname").html(currentFile);
|
|
}
|
|
|
|
function setupSrcs(){
|
|
setupIndexAndClip();
|
|
|
|
for(let i=0; i<modelsCount; i++)
|
|
$("#clip"+i).attr("src", baseUrls[i]+currentFile);
|
|
}
|
|
|
|
function changeFileSet(prefix) {
|
|
modifiedFiles = [];
|
|
|
|
for(let i=0; i<filesCount; i++) {
|
|
if(fileNames[i].startsWith(prefix)) {
|
|
modifiedFiles.push(fileNames[i]);
|
|
}
|
|
}
|
|
currentCount = 0;
|
|
currentFile = modifiedFiles[currentCount];
|
|
|
|
setupSrcs();
|
|
}
|
|
|
|
function loadMsRecordings() {
|
|
changeFileSet("ms_");
|
|
}
|
|
|
|
function loadAudiosetRecordings() {
|
|
changeFileSet("audioset_");
|
|
}
|
|
|
|
function loadReverbRecordings() {
|
|
changeFileSet("reverb_");
|
|
}
|
|
|
|
function loadNoReverbRecordings() {
|
|
changeFileSet("noreverb_");
|
|
}
|
|
|
|
function searchNoiseType() {
|
|
modifiedFiles = [];
|
|
|
|
for(let i=0; i<filesCount; i++) {
|
|
console.log(document.getElementsByName('noiseType')[0].value);
|
|
if(fileNames[i].includes(document.getElementsByName('noiseType')[0].value)) {
|
|
modifiedFiles.push(fileNames[i]);
|
|
}
|
|
}
|
|
|
|
currentCount = 0;
|
|
if(modifiedFiles.length > 0) {
|
|
currentFile = modifiedFiles[currentCount];
|
|
} else {
|
|
currentFile = fileNames[currentCount];
|
|
}
|
|
|
|
setupSrcs();
|
|
}
|
|
|
|
function moveNextOrPrev(valueToAdd) {
|
|
if(modifiedFiles.length == 0) {
|
|
if(currentCount == (filesCount - valueToAdd))
|
|
alert("This is the last Clip. Hit 'Previous' to load the previous clip, or you may close the browser. ");
|
|
else{
|
|
currentCount = currentCount + valueToAdd;
|
|
currentFile = fileNames[currentCount];
|
|
setupSrcs();
|
|
}
|
|
} else {
|
|
if(currentCount == (modifiedFiles.length - valueToAdd))
|
|
alert("This is the last Clip. Hit 'Previous' to load the previous clip, or you may close the browser. ");
|
|
else{
|
|
currentCount = currentCount + valueToAdd;
|
|
currentFile = modifiedFiles[currentCount];
|
|
setupSrcs();
|
|
}
|
|
}
|
|
}
|
|
|
|
// set the scr to the next values on clicking next
|
|
function next(){
|
|
moveNextOrPrev(1);
|
|
}
|
|
|
|
function skip10(){
|
|
moveNextOrPrev(10);
|
|
}
|
|
|
|
function skip100(){
|
|
moveNextOrPrev(100);
|
|
}
|
|
|
|
function previous(){
|
|
|
|
if(currentCount == 0)
|
|
alert("This is the very first Clip. Hit 'Next' to load the next clip. ");
|
|
else{
|
|
currentCount--;
|
|
currentFile = fileNames[currentCount];
|
|
if(modifiedFiles.length > 0)
|
|
currentFile = modifiedFiles[currentCount];
|
|
setupSrcs();
|
|
}
|
|
}
|
|
|
|
setupIndexAndClip();
|
|
|
|
var tbody = $("#table2>tbody");
|
|
for(let i=0; i<modelsCount; i++)
|
|
tbody.append("<tr><td>"+modelsUsed[i]+"</td><td><audio controls id=clip"+i+" src='"+baseUrls[0]+currentFile+"' type='audio/wav'></audio></td></tr>");
|
|
|
|
</script>
|
|
|
|
</html>
|