Add Google TTS for Script, which works across multiple browsers.

Question

with your help I now have an ajax function that instantly responds to an input value. ( Change Submit button with AJAX function to respond instantly to input )

This function displays the word of the entered number in Russian. Now I want to add a game icon to the left of the word that pronounces the word by clicking on it.

I found a solution with Google TTS (Text-to-Speech), but in my examples it only works in Google Chrome. IE and Firefox (latest versions) do not work.

Another problem: 1. This function allows a maximum of 100 characters to pronunciate, so the script must split large entries (> 100 characters) into several consecutive requests for Example for the largest possible number 999999999999999.

Answer 1

As a continuation, since ajax (regular processes) now work, just implement it the same way as on your test site. Consider this example:

<form method="POST" action="index.php">
    <label for="zahl">Zahl:</label> <br/>
    <input id="zahl" name="zahl" type="number" size="15" maxlength="15"><br/><br/>
    <img src="http://lern-online.net/bilder/symbole/play.png" id="playsound" style="display: none;  " />
    <span id="results" style="width: 400px;"></span> <!-- results appear here -->
</form>
<div class="player"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- <script src="jquery.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function(){

    $('#zahl').on('keyup', function(){
        var input = $(this).val(); 
        if(input != '') {
            // ajax request server
            $.ajax({ url: 'index.php', type: 'POST', dataType: 'text', data: {value: input},
                success: function(response) {
                    $('#results').text(response); // append to result div
                    $('#playsound').show();
                }
            });  
        } else {
            $('#results').text('');
            $('#playsound').hide();
        }

    });

    // add this, since it spawns new embed tags every click
    $('#playsound').click(function(){
        var input = encodeURIComponent($('#results').text());
        $('.player').html('<audio controls="" autoplay="" name="media" hidden="true" autostart><source src="sound.php?text='+input+'" type="audio/mpeg"></audio>');
    });

});
</script>

Create a new php file that will handle audio requests:

Name him sound.php

<?php

$txt = $_GET['text'];
$txt = urlencode($txt);
header("Content-type: audio/mpeg");
$url ="http://translate.google.com/translate_tts?q=$txt&tl=ru&ie=UTF-8";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
$audio = curl_exec($ch);
echo $audio;

?>