如何對 PHP 表進行文字轉語音

Question

我正在做一個項目，我有一個包含學生列表的表格，我希望我的網絡應用程序一個接一個地“說出”他們的名字和姓氏，就像老師標記誰在場或不在場時一樣。

我不知道在這種情況下 go 的技術是 Javascript 還是 PHP，雖然它看起來像 Z9E13B69D1715ACAAA93 更容易。

這是表格顯示的代碼，在此先謝謝大家：

 <?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 會更簡單，例如：

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

Answer 2

您可以解析您的表格並將名稱添加到SpeechSynthesis 。

下面是使用end 事件的更高級示例。

 // 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>

更具交互性的解決方案

 // 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>