如何将文字转语音 PHP table

Question

我正在做一个项目，其中有一个 table 包含学生列表，我希望我的网络应用程序能够一一“说出”他们的名字和姓氏，就像什么时候一样一位老师正在标记谁在场或不在场。

我不知道在这种情况下该使用的技术是 Javascript 还是 PHP，尽管看起来 Javascript 可能更容易。

这是table显示的代码，在此先感谢大家:

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

您可以只解析 table 并将名称添加到 SpeechSynthesis。

下面是使用 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>

更多交互方案

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

如何将文字转语音 PHP table

How to text-to-speech a PHP table

javascript

php

text-to-speech