如何将文字转语音 PHP table
How to text-to-speech a PHP table
我正在做一个项目,其中有一个 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>"); }
Javascript会更简单,例如:
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);
您可以只解析 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>
我正在做一个项目,其中有一个 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>"); }
Javascript会更简单,例如:
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello World";
window.speechSynthesis.speak(msg);
您可以只解析 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>