2014-06-22 3 views
4

도움이되었습니다. 이제는 입력 값에 즉시 반응하는 ajax-function이 있습니다. (Change the Submit-Button with AJAX-function for instantly reacting for an input)여러 브라우저에서 작동하는 스크립트에 Google TTS를 추가하십시오.

이 함수는 입력 한 숫자의 단어를 러시아어로 표시합니다. 이제 단어를 클릭하여 단어를 발음하는 재생 아이콘을 왼쪽에 추가하고 싶습니다.

Google TTS (텍스트 음성 변환)을 사용하여 해결책을 찾았지 만 예제에서는 Google 크롬에서만 작동합니다. IE와 Firefox (최신 버전)는 작동하지 않습니다.

또 다른 문제 : 이 기능은 최대 100 자 pronunciate 수 1, 그래서 스크립트가 가장 큰 가능한 수 999999999999999.

답변

1

로에 대한 exampel에 대해 여러 개의 연속적인 요청에 큰 입력을 (> 100 개 문자)를 분리한다 아약스 (정상적인 프로세스)가 이제 테스트 사이트에서했던 것과 같은 방식으로 구현됩니다.

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

?> 
+0

전화, 이후 IE에 아직 테스트하지 않은 메신저 리눅스를 사용하여 – user1978142

+0

고마워! Google 크롬에서만 작동하며 매우 큰 숫자의 문제가 있습니다. 이 질문에 추가했습니다. jquery 1.11.1과 함께 작동하는 이유는 무엇입니까? – Grischa

+0

@Grischa 그 대답 안에 댓글에, 거기에 링크를 확인해 볼 수도 있습니다, 그것은 무슨 일이 일어 났는지 자세히 설명합니다 – user1978142

관련 문제