I would want to hear the audio, when I click on an image (e.g. an audio image). The sound file for a sentence is obtained via google translate. I would like to do this without getting re-directed to a different page. How should I do this? I tried using the HTML5 audio tag, but didn't succeed either.
<html>
<body>
<a href="http://translate.google.com/translate_tts?q=My+name+is+John">My name is John</a>
</body>
</html>
EDIT2
Here's another solution also posted on SO that may help you.
EDIT
A more robust solution. Tested in IE8 and 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>
Here's a way embedding Quicktime. You can just as easily use Windows Media Player...
<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>