File size: 2,977 Bytes
0352417 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
const descriptions = ['Text Description 1', 'Text Description 2', 'Text Description 3', 'Text Description 4'];
const models = ['AR', 'FM', 'FM_VAE', 'GT'];
function createSection1Table() {
let table = '<table><thead><tr><th>Text Description</th>';
models.forEach(model => table += `<th>${model}</th>`);
table += '</tr></thead><tbody>';
descriptions.forEach((desc, idx) => {
table += `<tr><td>${desc}</td>`;
models.forEach(model => {
const audioSrc = `section1/audio/text${idx+1}_${model.toLowerCase()}.wav`;
table += `<td><audio controls src="${audioSrc}"></audio></td>`;
});
table += '</tr>';
});
table += '</tbody></table>';
document.getElementById('section1').innerHTML = table;
}
function createSectionWithObj(sectionId, sectionPath) {
let table = '<table><thead><tr><th>Text Description</th>';
models.forEach(model => table += `<th>${model}</th>`);
table += '</tr></thead><tbody>';
descriptions.forEach((desc, idx) => {
table += `<tr><td>${desc}</td>`;
models.forEach(model => {
const audioSrc = `${sectionPath}/audio/text${idx+1}_${model.toLowerCase()}.wav`;
const imageSrc = `${sectionPath}/images/text${idx+1}_${model.toLowerCase()}.png`;
table += `<td>
<canvas id="canvas_${sectionId}_${idx+1}_${model}" width="200" height="100" style="border:1px solid #ccc;"></canvas>
<audio id="audio_${sectionId}_${idx+1}_${model}" controls src="${audioSrc}"></audio>
</td>`;
});
table += '</tr>';
});
table += '</tbody></table>';
document.getElementById(sectionId).innerHTML = table;
}
function setupWaveformOverlay(sectionId) {
descriptions.forEach((desc, idx) => {
models.forEach(model => {
const canvas = document.getElementById(`canvas_${sectionId}_${idx+1}_${model}`);
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = `${sectionId}/images/text${idx+1}_${model.toLowerCase()}.png`;
img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const audio = document.getElementById(`audio_${sectionId}_${idx+1}_${model}`);
let interval;
audio.addEventListener('play', () => {
interval = setInterval(() => {
const x = (audio.currentTime / audio.duration) * canvas.width;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.strokeStyle = 'red';
ctx.stroke();
}, 30);
});
audio.addEventListener('pause', () => clearInterval(interval));
audio.addEventListener('ended', () => clearInterval(interval));
});
});
}
createSection1Table();
createSectionWithObj('section2', 'section2');
createSectionWithObj('section3', 'section3');
window.onload = () => {
setupWaveformOverlay('section2');
setupWaveformOverlay('section3');
};
|