4

with your help I have now a ajax-function, which instantly react on a input-value. (Change the Submit-Button with AJAX-function for instantly reacting for an input)

This function display the word of an entered number in russian. Now I want to add left from the word a play icon that pronunciate out the word with a click 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 (newest versions) doens't work.

Another problem: 1. This function allows maximum 100 characters to pronunciate, so the script should splits up large inputs (>100 chars) into multiple consecutive requests for exampel for the biggest possible number 999999999999999.

Community
  • 1
  • 1
Grischa
  • 70
  • 8
  • 26

1 Answers1

1

As the continuation, since the ajax (the normal processes) are now working just implement it the same way you did 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 sound requests:

Call it 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;

?>
user1978142
  • 7,946
  • 3
  • 17
  • 20
  • by the way, haven't tested this yet on IE since im using linux – user1978142 Jun 22 '14 at 02:31
  • Thank you! It works only on Google Chrome and has the problem with very large numbers. I have add this to the question. Why it is now working with jquery 1.11.1? – Grischa Jun 22 '14 at 02:44
  • @Grischa its in the comments inside the answer, there is a link there you might want to check it out, it elaborates what happened – user1978142 Jun 22 '14 at 02:46
  • @Grischa by the way, where did you got the sound.js? can you post the link of the source of the script? – user1978142 Jun 22 '14 at 02:47
  • I found online a jQuery sound plugin (no flash) which is part of script.aculo.us' sound.js (http://script.aculo.us), based on code by Jules Gravinese (http://www.webveteran.com/). https://github.com/madrobby/scriptaculous/blob/v1.9.0/src/sound.js – Grischa Jun 22 '14 at 02:52
  • @Grischa this is a complex issue indeed, tried it on firefox, it gets the same url with correct parameters but doesn't work correctly, i'l try to get back on you, hopefully we could find a jquery library for this as this would be a pain rolling up your own cross platform player, il get back to you for a while – user1978142 Jun 22 '14 at 03:08
  • http://subinsb.com/text-to-speech-in-php-with-google-translate This works on all browsers. But you have to enter a word. http://subinsb.com/text-to-speech-in-php-with-google-translate – Grischa Jun 22 '14 at 11:05
  • fantastic this works on Chrome,Firefox and IE. I asked you in the other question, how could I contact you like e-mail. I already find you on Google+ and LinkedIn. – Grischa Jun 22 '14 at 11:57
  • @Grischa i tested on firefox and chrome, really cant test on ie since im using ubuntu, good thing it worked also. fantastic! glad it worked. sure you can add me on either or both, and also just comment me here on SO since im more active here, just tick the green check if this did helped. – user1978142 Jun 22 '14 at 12:03
  • @ kevinabelita The sound.php should have a function for splits up large inputs (>100 chars) into multiple consecutive requests for example for the biggest possible number 999999999999999. Has he read the newest message? – Grischa Jun 23 '14 at 11:33
  • @Grischa wow thats a big number to support! if your really want to make it work i found a link which can give you an idea, only an idea. this is a complex issue (not easy) [link](http://www.hung-truong.com/blog/2013/04/26/hacking-googles-text-to-speech-api/) – user1978142 Jun 23 '14 at 12:03