Hugging Face's logo

Spaces:
danielbarakamhs
/
audiotrack-analyzer-pro
Running

App Files Community
audiotrack-analyzer-pro / script.js
danielbarakamhs's picture
danielbarakamhs
Data ID File Name Effective Time Username Valid Hour
c64d04f verified
Raw History Blame Contribute Delete
10.6 kB
// Gloire's data filtered from the dataset
const gloireData = [
{ id: 788, fileName: "/batch8-2/Introduction/001013_1.wav", duration: 573.045, hours: 0.15, category: "Introduction" },
{ id: 789, fileName: "/batch8-2/Live/001151_2.wav", duration: 915.325, hours: 0.25, category: "Live" },
{ id: 790, fileName: "/batch8-2/Live/001182_1.wav", duration: 583.006, hours: 0.16, category: "Live" },
{ id: 791, fileName: "/batch8-2/Introduction/000875_2.wav", duration: 751.13, hours: 0.21, category: "Introduction" },
{ id: 793, fileName: "/batch8-2/Introduction/001123_1.wav", duration: 584.418, hours: 0.16, category: "Introduction" },
{ id: 796, fileName: "/batch8-2/Introduction/001116_1.wav", duration: 563.582, hours: 0.15, category: "Introduction" },
{ id: 798, fileName: "/batch8-2/Introduction/001064_1.wav", duration: 571.121, hours: 0.15, category: "Introduction" },
{ id: 799, fileName: "/batch8-2/Travel/001197_3.wav", duration: 637.224, hours: 0.17, category: "Travel" },
{ id: 800, fileName: "/batch8-2/Introduction/000969_1.wav", duration: 598.764, hours: 0.16, category: "Introduction" },
{ id: 802, fileName: "/batch8-2/Introduction/000937_7.wav", duration: 598.852, hours: 0.16, category: "Introduction" },
{ id: 803, fileName: "/batch8-2/Live/001146_2.wav", duration: 820.033, hours: 0.22, category: "Live" },
{ id: 805, fileName: "/batch8-2/Live/001152_1.wav", duration: 567.14, hours: 0.15, category: "Live" },
{ id: 806, fileName: "/batch8-2/Live/001140_1.wav", duration: 563.636, hours: 0.15, category: "Live" },
{ id: 807, fileName: "/batch8-2/Introduction/000945_1.wav", duration: 598.72, hours: 0.16, category: "Introduction" },
{ id: 808, fileName: "/batch8-2/Introduction/000890_2.wav", duration: 570.264, hours: 0.15, category: "Introduction" },
{ id: 809, fileName: "/batch8-2/Introduction/000869_2.wav", duration: 521.006, hours: 0.14, category: "Introduction" },
{ id: 815, fileName: "/batch8-2/Live/001162_1.wav", duration: 561.573, hours: 0.15, category: "Live" },
{ id: 816, fileName: "/batch8-2/Live/001135_1.wav", duration: 499.299, hours: 0.13, category: "Live" },
{ id: 817, fileName: "/batch8-2/Introduction/000941_6.wav", duration: 422.017, hours: 0.11, category: "Introduction" },
{ id: 818, fileName: "/batch8-2/Introduction/000941_4.wav", duration: 482.013, hours: 0.13, category: "Introduction" },
{ id: 819, fileName: "/batch8-2/Introduction/000996_1.wav", duration: 569.876, hours: 0.15, category: "Introduction" },
{ id: 859, fileName: "/batch8-2/Introduction/000888_4.wav", duration: 628.822, hours: 0.17, category: "Introduction" },
{ id: 860, fileName: "/batch8-2/Live/001151_1.wav", duration: 523.671, hours: 0.14, category: "Live" },
{ id: 862, fileName: "/batch8-2/Introduction/000962_2.wav", duration: 973.874, hours: 0.27, category: "Introduction" },
{ id: 865, fileName: "/batch8-2/Introduction/000937_4.wav", duration: 598.684, hours: 0.16, category: "Introduction" },
{ id: 866, fileName: "/batch8-2/Introduction/000937_8.wav", duration: 692.453, hours: 0.19, category: "Introduction" },
{ id: 870, fileName: "/batch8-2/Introduction/000874_1.wav", duration: 598.757, hours: 0.16, category: "Introduction" },
{ id: 877, fileName: "/batch8-2/Introduction/001110_2.wav", duration: 787.51, hours: 0.21, category: "Introduction" },
{ id: 878, fileName: "/batch8-2/Introduction/000941_2.wav", duration: 598.826, hours: 0.16, category: "Introduction" },
{ id: 880, fileName: "/batch8-2/Live/001174_2.wav", duration: 544.139, hours: 0.15, category: "Live" },
{ id: 881, fileName: "/batch8-2/Live/001174_3.wav", duration: 977.914, hours: 0.27, category: "Live" },
{ id: 882, fileName: "/batch8-2/Introduction/000873_2.wav", duration: 833.855, hours: 0.23, category: "Introduction" },
{ id: 883, fileName: "/batch8-2/Travel/001196_1.wav", duration: 287.963, hours: 0.08, category: "Travel" },
{ id: 886, fileName: "/batch8-2/Introduction/001025_3.wav", duration: 652.289, hours: 0.18, category: "Introduction" },
{ id: 887, fileName: "/batch8-2/Introduction/000890_1.wav", duration: 582.613, hours: 0.16, category: "Introduction" },
{ id: 888, fileName: "/batch8-2/Travel/001221_1.wav", duration: 273.394, hours: 0.08, category: "Travel" },
{ id: 890, fileName: "/batch8-2/Live/001135_2.wav", duration: 804.498, hours: 0.22, category: "Live" },
{ id: 892, fileName: "/batch8-2/Introduction/001110_1.wav", duration: 583.554, hours: 0.16, category: "Introduction" },
{ id: 894, fileName: "/batch8-2/Introduction/001079_2.wav", duration: 886.687, hours: 0.24, category: "Introduction" },
{ id: 907, fileName: "/batch8-2/Introduction/000937_3.wav", duration: 527.853, hours: 0.14, category: "Introduction" },
{ id: 925, fileName: "/batch8-2/Travel/001195_1.wav", duration: 407.751, hours: 0.11, category: "Travel" },
{ id: 926, fileName: "/batch8-2/Introduction/000931_2.wav", duration: 647.034, hours: 0.17, category: "Introduction" },
{ id: 933, fileName: "/batch8-2/Introduction/001040_1.wav", duration: 572.237, hours: 0.15, category: "Introduction" },
{ id: 936, fileName: "/batch8-2/Introduction/000945_5.wav", duration: 510.083, hours: 0.14, category: "Introduction" },
{ id: 947, fileName: "/batch8-2/Introduction/001025_1.wav", duration: 590.477, hours: 0.16, category: "Introduction" },
{ id: 948, fileName: "/batch8-2/Introduction/001045_1.wav", duration: 582.894, hours: 0.16, category: "Introduction" },
{ id: 949, fileName: "/batch8-2/Introduction/001011_1.wav", duration: 587.805, hours: 0.16, category: "Introduction" },
{ id: 950, fileName: "/batch8-2/Travel/001211_1.wav", duration: 211.448, hours: 0.06, category: "Travel" },
{ id: 954, fileName: "/batch8-2/Travel/001223_1.wav", duration: 286.21, hours: 0.08, category: "Travel" },
{ id: 955, fileName: "/batch8-2/Live/001174_1.wav", duration: 572.809, hours: 0.15, category: "Live" },
{ id: 957, fileName: "/batch8-2/Introduction/000888_3.wav", duration: 598.78, hours: 0.16, category: "Introduction" },
{ id: 931, fileName: "/batch8-2/Travel/001220_1.wav", duration: 243.976, hours: 0.07, category: "Travel" },
{ id: 935, fileName: "/batch8-2/Travel/001218_2.wav", duration: 144.965, hours: 0.04, category: "Travel" }
];
// DOM elements
const dataTable = document.getElementById('dataTable');
const totalHoursElement = document.getElementById('totalHours');
const totalFilesElement = document.getElementById('totalFiles');
const avgDurationElement = document.getElementById('avgDuration');
const longestFileElement = document.getElementById('longestFile');
const searchInput = document.getElementById('searchInput');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('prevBtn');
const startItemElement = document.getElementById('startItem');
const endItemElement = document.getElementById('endItem');
const totalItemsElement = document.getElementById('totalItems');
// Pagination variables
let currentPage = 1;
const itemsPerPage = 10;
let filteredData = [...gloireData];
// Initialize the page
function init() {
calculateStats();
renderTable();
setupEventListeners();
}
// Calculate statistics
function calculateStats() {
const totalHours = gloireData.reduce((sum, item) => sum + item.hours, 0);
const totalDuration = gloireData.reduce((sum, item) => sum + item.duration, 0);
const avgDuration = totalDuration / gloireData.length / 60; // Convert to minutes
const longestFile = Math.max(...gloireData.map(item => item.hours));
totalHoursElement.textContent = totalHours.toFixed(2);
totalFilesElement.textContent = gloireData.length;
avgDurationElement.textContent = (avgDuration).toFixed(2);
longestFileElement.textContent = longestFile.toFixed(2);
}
// Render table with pagination
function renderTable() {
dataTable.innerHTML = '';
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, filteredData.length);
for (let i = startIndex; i < endIndex; i++) {
const item = filteredData[i];
const row = document.createElement('tr');
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.fileName}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.duration.toFixed(3)}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.hours.toFixed(2)}</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
${getCategoryColor(item.category)}">
${item.category}
</span>
</td>
`;
dataTable.appendChild(row);
}
// Update pagination info
startItemElement.textContent = startIndex + 1;
endItemElement.textContent = endIndex;
totalItemsElement.textContent = filteredData.length;
// Update button states
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = endIndex >= filteredData.length;
}
// Get color class based on category
function getCategoryColor(category) {
switch(category) {
case 'Introduction': return 'bg-blue-100 text-blue-800';
case 'Live': return 'bg-green-100 text-green-800';
case 'Travel': return 'bg-purple-100 text-purple-800';
default: return 'bg-gray-100 text-gray-800';
}
}
// Setup event listeners
function setupEventListeners() {
// Search functionality
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
filteredData = gloireData.filter(item =>
item.fileName.toLowerCase().includes(searchTerm) ||
item.category.toLowerCase().includes(searchTerm)
);
currentPage = 1;
renderTable();
});
// Pagination buttons
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
nextBtn.addEventListener('click', () => {
const totalPages = Math.ceil(filteredData.length / itemsPerPage);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
}
// Initialize the app
document.addEventListener('DOMContentLoaded', init);