How to text-to-speech a PHP table

Question

I'm working on a project where I have a table containing a list of students, I want my web-app to "say" their name and last names one by one, the same as when a teacher is marking who's present or not.

I dont know if the technology to go to in this situation is Javascript or PHP, although it looks like Javascript might be easier.

Here is the code for the table display, and I thank you all in advance:

 <?php
    if (isset($_GET['datepick']) & isset($_GET['classpick'])) {
        $datepicked = $_GET['datepick'];
        $matierepicked =  $_GET['classpick'];
        $viewab = $conn->prepare("SELECT * FROM absence,etudiant WHERE absence.date = ? AND absence.matiere = ? AND (absence.etudiant_ID = etudiant.etudiant_ID)");
        $viewab->execute(array($datepicked, $matierepicked));

        if ($viewab->rowCount()!=0){


        echo("<table class='table table-condensed table-hover table-bordered table-striped' style='background-color: white'>");
        echo "<tr>";
        echo "<th style='background-color: grey'> Nom </th>";
        echo "<th style='background-color: grey'>Prenom </th>";
        echo "<th style='background-color: grey'>Matiere</th>";
        echo "<th style='background-color: grey'>Date</th>";
        echo "<th style='background-color: grey'>Total des heures absentées</th>";
        echo "</tr>";
        while ($row = $viewab->fetch(PDO::FETCH_ASSOC)) {
            echo "<tr>";
            echo "<td>" . $row['Nom'] . "</td>";
            echo "<td>" . $row['Prenom'] . "</td>";
            echo "<td>" . $row['matiere'] . "</td>";
            echo "<td>" . $row['date'] . "</td>";
            echo "<td>" . $row['Nb_absences'] . "</td>";
            echo "</tr>";
        }
        echo("</table>"); }

Answer 1

Javascript will be easier, for example:

var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);

Answer 2

You could just parse your table and add the names to the SpeechSynthesis .

Below is a more advanced example using the end event .

 // Get HTML elements const persons = document.querySelectorAll('.person-table tbody tr'); const btn = document.querySelector('.speak-btn'); // Speak function const speak = (msg) => { const synth = new SpeechSynthesisUtterance(); synth.text = msg; window.speechSynthesis.speak(synth); } // Pronounce names const pronounceNames = (persons) => { for(const person of persons) { const [name, lastname] = person.children; const fullname = `${name.textContent} ${lastname.textContent}`; speak(fullname); } } // Add click event btn.addEventListener('click', () => pronounceNames(persons));

 <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css' /> <table class='person-table table table-condensed table-hover table-bordered table-striped'> <thead> <tr><th>Name</th> <th>Lastname</th> <th>Gender</th></tr> </thead> <tbody> <tr><td>Elis</td> <td>Simmons</td> <td>F</td></tr> <tr><td>Dhruv</td> <td>Marshall</td> <td>M</td></tr> <tr><td>Millicent</td> <td>Hanson</td> <td>F</td></tr> <tr><td>Ivy</td> <td>Reyes</td> <td>F</td></tr> <tr><td>Benjamin</td> <td>Rahman</td> <td>M</td></tr> </tbody> </table> <button type='button' class='speak-btn btn btn-primary'>Speak</button>

More interactive solution

 // Get HTML elements const persons = document.querySelectorAll('.person-table tbody tr'); const btn = document.querySelector('.speak-btn'); // Create `SpeechSynthesisUtterance` instance const synth = new SpeechSynthesisUtterance(); // Current person in the loop let currentPerson = 0; // Speak function const speak = (msg) => { synth.text = msg; window.speechSynthesis.speak(synth); } // Create queue of names const createQueue = (persons) => { const queue = new Map(); // Get fullname and add it to the queue for(const person of persons) { const [name, lastname] = person.children; const fullname = `${name.textContent} ${lastname.textContent}`; queue.set(person, fullname); } return queue; } const queue = createQueue(persons); // Pronounce names const pronounceNames = () => { const person = persons[currentPerson]; // Pronounce name if(queue.has(person)) { const name = queue.get(person); speak(name); person.classList.add('highlight'); } } const checkQueue = () => { // Increase counter currentPerson++; // Remove highlight class for(const person of persons) { person.classList.remove('highlight'); } // Check if the queue is empty if(currentPerson <= queue.size - 1) { pronounceNames(); }else{ // Reset for next button press currentPerson = 0; console.log('Finished...'); } }; // Add click event btn.addEventListener('click', pronounceNames); // Add ending event synth.addEventListener('end', checkQueue);

 .highlight { background: lightblue; }

 <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css' /> <table class='person-table table table-condensed table-hover table-bordered table-striped'> <thead> <tr><th>Name</th> <th>Lastname</th> <th>Gender</th></tr> </thead> <tbody> <tr><td>Elis</td> <td>Simmons</td> <td>F</td></tr> <tr><td>Dhruv</td> <td>Marshall</td> <td>M</td></tr> <tr><td>Millicent</td> <td>Hanson</td> <td>F</td></tr> <tr><td>Ivy</td> <td>Reyes</td> <td>F</td></tr> <tr><td>Benjamin</td> <td>Rahman</td> <td>M</td></tr> </tbody> </table> <button type='button' class='speak-btn btn btn-primary'>Speak</button>