Добавьте Google TTS для скрипта, который работает в нескольких браузерах.

с вашей помощью у меня теперь есть ajax-функция, которая мгновенно реагирует на входное значение. (Измените Submit- Кнопка с AJAX-функцией для мгновенного реагирования на ввод)

Эта функция отображает слово введенного числа на русском языке. Теперь я хочу добавить слева от слова значок воспроизведения, который произносит слово, щелкнув по нему.

Я нашел решение с Google TTS (преобразование текста в речь), но в моих примерах оно работает только в Google Chrome. IE и Firefox (новейшие версии) не работают.

Другая проблема: 1. Эта функция позволяет произносить максимум 100 символов, поэтому сценарий должен разбивать большие входные данные (> 100 символов) на несколько последовательных запросов для экзамена на максимально возможное число 999999999999999.


person Grischa    schedule 22.06.2014    source источник


Ответы (1)


В продолжение, поскольку ajax (обычные процессы) теперь работают, просто реализуйте его так же, как на своем тестовом сайте. Рассмотрим этот пример:

<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>

Создайте новый файл php, который будет обрабатывать звуковые запросы:

Назовите это 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;

?>
person user1978142    schedule 22.06.2014
comment
кстати, еще не тестировал это в IE, так как я использую Linux - person user1978142; 22.06.2014
comment
Спасибо! Он работает только в Google Chrome и имеет проблемы с очень большими числами. Я добавил это к вопросу. Почему теперь он работает с jquery 1.11.1? - person Grischa; 22.06.2014
comment
@Grischa это в комментариях внутри ответа, там есть ссылка, которую вы можете проверить, она подробно описывает, что произошло - person user1978142; 22.06.2014
comment
@Grischa, кстати, а где у тебя sound.js? можешь выложить ссылку на источник скрипта? - person user1978142; 22.06.2014
comment
Я нашел в Интернете звуковой плагин jQuery (без вспышки), который является частью sound.js script.aculo.us (script.aculo .us) на основе кода Жюля Гравинезе (webveteran.com). github.com/madrobby/scriptaculous/blob/v1.9.0/ src / sound.js - person Grischa; 22.06.2014
comment
@Grischa, это действительно сложная проблема, попробовал ее в firefox, он получает тот же URL-адрес с правильными параметрами, но не работает правильно, я попытаюсь вернуться к вам, надеюсь, мы сможем найти библиотеку jquery для этого, поскольку это было бы больно накатывать вашего собственного кроссплатформенного плеера, я вернусь к вам на некоторое время - person user1978142; 22.06.2014
comment
subinsb.com/text-to-speech-in-php- with-google-translate Это работает во всех браузерах. Но вы должны ввести слово. subinsb.com/text-to-speech-in-php- с-google-translate - person Grischa; 22.06.2014
comment
фантастически это работает в Chrome, Firefox и IE. Я спросил вас в другом вопросе, как я могу связаться с вами по электронной почте. Я уже нахожу вас в Google+ и LinkedIn. - person Grischa; 22.06.2014
comment
@Grischa я тестировал на firefox и chrome, действительно не могу протестировать, т.е., поскольку я использую ubuntu, хорошо, что он тоже работал. фантастика! рад, что это сработало. конечно, вы можете добавить меня к одному или обоим, а также просто прокомментируйте меня здесь, так как я более активен здесь, просто отметьте зеленую галочку, если это помогло. - person user1978142; 22.06.2014
comment
@ kevinabelita В sound.php должна быть функция для разделения больших входных данных (›100 символов) на несколько последовательных запросов, например, для наибольшего возможного числа 999999999999999. Прочитал ли он последнее сообщение? - person Grischa; 23.06.2014
comment
@Grischa, это большое число, которое стоит поддержать! Если вы действительно хотите, чтобы это работало, я нашел ссылку, которая может дать вам представление, только идею. это сложный вопрос (не простой) ссылка - person user1978142; 23.06.2014