1

I have made text to speech functionality using the link mentioned below:-

MDN - https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

MDN Example - https://mdn.github.io/web-speech-api/speak-easy-synthesis/

I want to convert it into an MP3 file with a specific voice i.e mentioned in the Select Voice dropdown. How can I achieve that?

Note:- I want to achieve this functionality using JS or PHP

Below is my code

var inputSpeakBtn = document.querySelector('.btn-test-voice');
        var inputTxt = document.querySelector('#your-text');
        var voiceSelect = document.querySelector('#new-voice-list');
    
        var synth = window.speechSynthesis;
        
        setTimeout(() => {
            
            var voices = synth.getVoices();
            
            for (let index = 0; index < voices.length; index++) {
                const voicesElement = voices[index];
    
                var option = document.createElement('option');
                option.textContent = voicesElement.name + ' (' + voicesElement.lang + ')';
                option.value = index;

                voiceSelect.appendChild(option);
            }
            
            inputSpeakBtn.addEventListener('click', function() {
                var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
                utterThis.voice = voices[voiceSelect.value];
                synth.speak(utterThis);
                inputTxt.blur();
            })
        }, 1000);
<div class="form-group col-md-12 form-new-voice use-tts">

    <label for="">Your Text</label>
    <input id="your-text" type="text" class="form-control" placeholder="">

    <label for="" class="mt-2">Select Voice</label>
    <select id="new-voice-list" class="form-control">
    </select>
                                                                
   <button class="btn btn-primary btn-test-voice mt-2">Test Voice</button>
   <button class="btn btn-primary btn-download mt-2">Download</button>
</div>
Owaiz Yusufi
  • 849
  • 1
  • 14
  • 34
  • Does this answer your question? [generate audio file with W3C Web Speech API](https://stackoverflow.com/questions/38727696/generate-audio-file-with-w3c-web-speech-api) – Luke Dec 21 '21 at 17:38
  • Unfortunately you can't really capture the Web.Speech API output to an audio file. It uses the native system's speech synthesis so doesn't go through the browser audio context. Google, Microsoft, Amazon Polly and others have services to render TTS to mp3 (most have free tiers). You could also try taking the output of [mespeak.js](https://www.masswerk.at/mespeak/) and rendering output to a wav/mp3 file...but that may take some extra steps. – Luke Dec 21 '21 at 17:56
  • @luke is there any way to achieve the same thing with PHP – Owaiz Yusufi Dec 24 '21 at 14:53
  • With PHP you could use [https://github.com/espeak-ng/espeak-ng](espeak-ng) or some other cli text-to-speech tool, perhaps. – Luke Dec 27 '21 at 14:43

0 Answers0