javascript - How to text-to-speech a PHP table

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>"); }

Solution:

Javascript will be easier, for example:

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

Solution:

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>