chamunt
New Coder
This displays text from a linked text file and accompanying tts audio, line by line, on a web page. I can't manage to get a pause/resume button that will stop/resume the sequence. Any ideas?
Thanks
Code:
<html>
<head>
<title>Cloud Text-to-Speech API Test</title>
</head>
<body>
<h1>Cloud Text-to-Speech API Test</h1>
<button id="speak-button">Speak</button>
<div id="text"></div>
<input type="number" id="pause-duration" value="8">
<script>
// Replace with your own API key
const API_KEY = 'AIzaSyDHUKmfjMS8193NjjIPw3jeXXG0MaPgYdc';
const speak = async () => {
// Fetch the text from the TXT file
const response = await fetch('https://prospanish.co.uk/polly_1.txt');
const text = await response.text();
// Split the text into lines
const lines = text.split('\n');
// Loop through each line
for (const line of lines) {
// Split the line into two parts: the English text and the Spanish text
const [english, spanish] = line.split('=');
// Display the English text on the webpage
document.getElementById('text').innerHTML = english;
// Make a request to the Text-to-Speech API to synthesize the English text
const englishResponse = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=${API_KEY}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
input: {
text: english,
},
voice: {
languageCode: 'en-AU',
name: 'en-AU-Wavenet-D',
},
audioConfig: {
audioEncoding: 'MP3',
},
}),
});
// Extract the audio data from the response
const englishAudioData = await englishResponse.json();
console.log(englishAudioData);
// Create an HTML audio element
const englishAudioElement = document.createElement('audio');
// Set the audio data as the source of the audio element
englishAudioElement.src = `data:audio/mp3;base64,${englishAudioData.audioContent}`;
// Play the audio
englishAudioElement.play();
// Wait for the English audio to finish playing
await new Promise((resolve) => {
englishAudioElement.addEventListener('ended', resolve);
});
// Add a delay equal to the value of the input field
await new Promise((resolve) => setTimeout(resolve, document.getElementById('pause-duration').value * 1000));
// Display the Spanish text on the webpage
document.getElementById('text').innerHTML = spanish;
// Make a request to the Text-to-Speech API to synthesize the Spanish text
const spanishResponse = await fetch(`https://texttospeech.googleapis.com/v1/text:synthesize?key=${API_KEY}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
input: {
text: spanish,
},
voice: {
languageCode: 'es-US',
name: 'es-US-Wavenet-C',
},
audioConfig: {
audioEncoding: 'MP3',
},
}),
});
// Extract the audio data from the response
const spanishAudioData = await spanishResponse.json();
console.log(spanishAudioData);
// Create an HTML audio element
const spanishAudioElement = document.createElement('audio');
// Set the audio data as the source of the audio element
spanishAudioElement.src = `data:audio/mp3;base64,${spanishAudioData.audioContent}`;
// Play the audio
spanishAudioElement.play();
// Wait for the Spanish audio to finish playing
await new Promise((resolve) => {
spanishAudioElement.addEventListener('ended', resolve);
});
// Add a delay of 5 seconds
await new Promise((resolve) => setTimeout(resolve, 5000));
}
}
// Add an event listener to the speak button
document.getElementById('speak-button').addEventListener('click', speak);
</script>
</body>
</html>
