2010-10-04 1 views
1

Я хотел бы услышать звук, когда я нажимаю на изображение (например, аудиоизображение). Звуковой файл для предложения получается через google translate. Я хотел бы сделать это, не перенаправляя его на другую страницу. Как мне это сделать? Я пробовал использовать тег HTML5, но не смог.Как слышать звук перевода текста в речь

<html> 
<body> 
<a href="http://translate.google.com/translate_tts?q=My+name+is+John">My name is John</a> 

</body> 
</html> 
+0

@ user339108 - см. Мое редактирование. Дайте мне знать, если это сработает для вас. –

ответ

3

EDIT2

Вот another solution также размещены на SO, которые могут помочь вам.


РЕДАКТИРОВАТЬ

более надежное решение. Испытано в IE8 и Firefox

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> 
    </head> 
    <body> 
    <img src="http://www.blackwellokradio.com/click-me.jpg" onclick="$.sound.play('http://translate.google.com/translate_tts?q=My+name+is+John')" style="cursor:hand;cursor:pointer;" /> 
    </body> 
</html>  
<!--Ideally you would put this in a separate file. src: http://dev.jquery.com/browser/trunk/plugins/sound/jquery.sound.js?rev=5750--> 
<script type="text/javascript"> 
/** 
* jQuery sound plugin (no flash) 
* 
* port of script.aculo.us' sound.js (http://script.aculo.us), based on code by Jules Gravinese (http://www.webveteran.com/) 
* 
* Copyright (c) 2007 Jörn Zaefferer (http://bassistance.de) 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* $Id$ 
*/ 

/** 
* API Documentation 
* 
* // play a sound from the url 
* $.sound.play(url) 
* 
* // play a sound from the url, on a track, stopping any sound already running on that track 
* $.sound.play(url, { 
* track: "track1" 
* }); 
* 
* // increase the timeout to four seconds before removing the sound object from the dom for longer sounds 
* $.sound.play(url, { 
* timeout: 4000 
* }); 
* 
* // stop a sound by removing the element returned by play 
* var sound = $.sound.play(url); 
* sound.remove(); 
* 
* // disable playing sounds 
* $.sound.enabled = false; 
* 
* // enable playing sounds 
* $.sound.enabled = true 
*/ 

(function($) { 

$.sound = { 
    tracks: {}, 
    enabled: true, 
    template: function(src) { 
     return '<embed style="height:0" loop="false" src="' + src + '" autostart="true" hidden="true"/>'; 
    }, 
    play: function(url, options){ 
     if (!this.enabled) 
      return; 
     var settings = $.extend({ 
      url: url, 
      timeout: 2000 
     }, options); 

     if (settings.track) { 
      if (this.tracks[settings.track]) { 
       var current = this.tracks[settings.track]; 
       // TODO check when Stop is avaiable, certainly not on a jQuery object 
       current.Stop && current.Stop(); 
       current.remove(); 
      } 
     } 

     var element = $.browser.msie 
      ? $('<bgsound/>').attr({ 
       src: settings.url, 
       loop: 1, 
       autostart: true 
       }) 
      : $(this.template(settings.url)); 

     element.appendTo("body"); 

     if (settings.track) { 
      this.tracks[settings.track] = element; 
     } 

     if(options){ 
      setTimeout(function() { 
       element.remove(); 
      }, options.timeout) 
     } 

     return element; 
    } 
}; 

})(jQuery); 
</script> 

Вот способ вложения Quicktime. Вы можете так же легко использовать проигрыватель Windows Media ...

<html> 
    <head> 
    </head> 
    <body> 
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="300" height="50"> 
     <param name="src" value="http://translate.google.com/translate_tts?q=My+name+is+John"> 
     <param name="autoplay" value="true"> 
     <embed type="audio/x-wav" src="http://translate.google.com/translate_tts?q=My+name+is+John" autoplay="true" autostart="true" width="300" height="50"> 
    </object> 
    </body> 
</html> 
+0

Это все еще не делает того, чего я хочу достичь. В идеале я бы хотел связать этот перевод с аудиоизображением, поэтому всякий раз, когда конечный пользователь нажимает на это изображение, звук должен быть переведен на основе вышеуказанного URL-адреса. Я не хочу, чтобы он перенаправлял или показывал элементы управления аудио. Как достичь этого – user339108

+2

Решение Brandon кажется правильным. Чтобы достичь вашего предполагаемого эффекта, установите autostart: false, скройте div, в который вы загружаете тег embed/object, и сопоставьте image.onclick с функцией воспроизведения –