Permalink
Browse files

Fix TTS widget on Internet explorer.

  • Loading branch information...
1 parent 29f7df4 commit 581af2dce7832c55ea3920dbe74ee12e8c62aacd Szaby Grünwald committed Apr 27, 2012
Showing with 504 additions and 56 deletions.
  1. +1 −0 lib/ttswidget/index.html
  2. +97 −0 lib/ttswidget/index.html~
  3. +86 −26 lib/ttswidget/ttswidget.coffee
  4. +257 −0 lib/ttswidget/ttswidget.coffee~
  5. +63 −30 lib/ttswidget/ttswidget.js
View
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="ttswidget.css" />
<link rel="stylesheet" href="../jquery/jquery-ui.min.css" />
+ <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="../jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.1.9m5.js"></script>
<script type="text/javascript" src="../underscore-min.js"></script>
View
@@ -0,0 +1,97 @@
+<html>
+<head>
+ <title>CapKom Wizard</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+ <link rel="stylesheet" href="ttswidget.css" />
+ <link rel="stylesheet" href="../jquery/jquery-ui.min.css" />
+
+ <script type="text/javascript" src="../jquery/jquery-1.7.1.js"></script>
+ <script type="text/javascript" src="../jquery/jquery-ui.1.9m5.js"></script>
+ <script type="text/javascript" src="../underscore-min.js"></script>
+ <script type="text/javascript" src="../backbone.js"></script>
+ <script type="text/javascript" src="../jquery/themeswitcher.js"></script>
+ <script type="text/javascript" src="../json-serialization.js"></script>
+
+ <link rel="stylesheet" href="../../css/style.css" />
+ <script type="text/javascript" src="ttswidget.js"></script>
+ <script type="text/javascript">
+ jQuery(document).ready(function(){_.defer(function(){
+ jQuery(".tts").ttswidget({
+ gender: "male"
+ });
+ })});
+ </script>
+
+ <style>
+ section {
+ max-width: 500px;
+ }
+ section div {
+ padding: 14px;
+ }
+ button.ui-button-icon-only .ui-icon {
+ width: 22px;
+ height: 22px;
+ margin-left: -11px;
+ margin-top: -11px;
+ }
+ .ui-icon-speaker {
+ background-image: url(speaker22.png) !important;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <a href="#"><img class="logo" alt="Capkom Logo" src="../../symbols/Capkom_Logo.gif"/></a>
+ </header>
+ <section>
+ <h1>TTS widget</h1>
+ <h2>Demo</h2>
+ <div class="tts" lang="en">
+ Normally the text content of the element is taken.
+ </div>
+ <div class="tts" tts="This is set as tts attribute of the .tts element.">
+ Except you set the tts argument of the element.
+ </div>
+ <div class="tts" lang="de">
+ Spricht natürlich auch deutsch.
+ </div>
+ <textarea id="tts-test" cols="60" rows="10">
+Test a text
+ </textarea><br/>
+ <select name="lang" id="lang">
+ <option value="en">english</option>
+ <option value="de">deutsch</option>
+ </select>
+ <br/>
+ <select name="gender" id="gender">
+ <option value="male">male</option>
+ <option value="female">female</option>
+ </select>
+ <br/>
+ <button id="ttstest-button">Say</button>
+ </section>
+ <div style="display:none;" id="bgThemeActivator"></div>
+ <script>
+ (function($){
+ $(document).ready(function(){
+ $('#ttstest-button')
+ .button()
+ .click(function(){
+ console.log(123);
+ var span = $('<span>')
+ .attr('tts', $('#tts-test').val())
+ .attr('gender', $('#gender').val())
+ .attr('lang', $('#lang').val());
+ console.log(span);
+ span
+ .ttswidget()
+ .ttswidget('talk')
+ })
+ });
+ })(jQuery);
+ </script>
+</body>
+</html>
@@ -13,7 +13,7 @@
# jQuery(".tts").ttswidget({
# gender: "male"
# });
-# This will instantiate buttons for reading the texts. If the DOM element has a
+# This will instantiate buttons for reading the texts. If the DOM element has a
# `tts` attribute, it will be read instead of the text content of the element.
# The `lang` attribute specifies the language of interpretation. If no language
# is defined the default language is used. (see at `options`)
@@ -63,12 +63,66 @@ jQuery.widget "capkom.ttswidget",
@_cleanup()
talk: ->
@prepare()
+ audioSnippet = null
+ if jQuery.browser.msie
+ audioSnippet = """
+ <OBJECT id='playera' height='60' width='230' classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95'>
+ <PARAM NAME='AutoStart' VALUE='True'>
+ <PARAM NAME='Balance' VALUE='False'>
+ <PARAM NAME='DisplaySize' VALUE='True'>
+ <PARAM NAME='Filename' VALUE='#{@_makeLink()}'>
+ <PARAM NAME='Mute' VALUE='False'>
+ <PARAM NAME='SelectionStart' VALUE='False'>
+ <PARAM NAME='SelectionEnd' VALUE='False'>
+ <PARAM NAME='SendPlayStateChangeEvents' VALUE='True'>
+ <PARAM NAME='ShowControls' VALUE='True'>
+ <PARAM NAME='ShowAudioControls' VALUE='True'>
+ <PARAM NAME='ShowDisplay' VALUE='False'>
+ <PARAM NAME='ShowPositionControls' VALUE='False'>
+ <PARAM NAME='Volume' VALUE='1'>
+ <PARAM NAME='AudioStream' VALUE='False'>
+ <PARAM NAME='AutoSize' VALUE='True'>
+ <PARAM NAME='AnimationAtStart' VALUE='False'>
+ <PARAM NAME='AllowScan' VALUE='False'>
+ <PARAM NAME='AllowChangeDisplaySize' VALUE='False'>
+ <PARAM NAME='AutoRewind' VALUE='True'>
+ <PARAM NAME='BaseURL' VALUE=''>
+ <PARAM NAME='BufferingTime' VALUE='5'>
+ <PARAM NAME='CaptioningID' VALUE=''>
+ <PARAM NAME='ClickToPlay' VALUE='True'>
+ <PARAM NAME='CursorType' VALUE='0'>
+ <PARAM NAME='CurrentPosition' VALUE='True'>
+ <PARAM NAME='CurrentMarker' VALUE='True'>
+ <PARAM NAME='DefaultFrame' VALUE='mainframe'>
+ <PARAM NAME='DisplayBackColor' VALUE='True'>
+ <PARAM NAME='DisplayForeColor' VALUE='16777215'>
+ <PARAM NAME='DisplayMode' VALUE='1'>
+ <PARAM NAME='Enabled' VALUE='-1'>
+ <PARAM NAME='EnableContextMenu' VALUE='False'>
+ <PARAM NAME='EnablePositionControls' VALUE='False'>
+ <PARAM NAME='EnableFullScreenControls' VALUE='False'>
+ <PARAM NAME='EnableTracker' VALUE='False'>
+ <PARAM NAME='InvokeURLs' VALUE='False'>
+ <PARAM NAME='Language' VALUE='False'>
+ <PARAM NAME='PlayCount' VALUE='1'>
+ <PARAM NAME='PreviewMode' VALUE='False'>
+ <PARAM NAME='ShowStatusBar' VALUE='False'>
+ <PARAM NAME='TransparentAtStart' VALUE='False'>
+ </OBJECT>
+ """
+ else
+ audioSnippet = """
+ <audio id='ttswidget-audio' controls='controls' style='' src='#{@_makeLink()}'
+ type='audio/mpeg'>Your browser does not support the audio tag.
+ </audio>
+ <img class='spinner' src='#{@options.spinnerUri}'/>
+ """
+
@dialog = jQuery """
<div id='ttswidget-dialog' title='#{@options.dialogTitle}'>
#{@_getText()}
<br/><br/>
- <audio id='ttswidget-audio' onerror='console.error(this)' controls='controls' style='' src='#{@_makeLink()}' type='audio/ogg'>Your browser does not support the audio tag.</audio>
- <img class='spinner' src='#{@options.spinnerUri}'/>
+ #{audioSnippet}
</div>
"""
@dialog.appendTo jQuery("body")
@@ -79,27 +133,33 @@ jQuery.widget "capkom.ttswidget",
, 500
hide: "fade"
width: "500"
- @audioElement = jQuery("#ttswidget-audio")[0]
- @audioElement.onabort = () ->
- console.error attributes
- @audioElement.load()
- @audioElement.play()
- jQuery(@audioElement).bind 'playing', =>
- jQuery(".spinner", @dialog).hide()
- jQuery(@audioElement).bind 'ended', =>
- @dialog.dialog "close"
- setTimeout =>
- @_cleanup()
- , 500
- jQuery(@audioElement).bind 'error', (e) =>
- errorHtml = """
- <br/>
- <div style="color: red">
- <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>#{@options.errorMsg}
- </div>
- """
- @dialog.append errorHtml
-
+ if jQuery.browser.msie
+ document.playera.attachEvent "EndOfStream", (state) =>
+ @dialog.dialog "close"
+ setTimeout =>
+ @_cleanup()
+ , 500
+ else
+ @audioElement = jQuery("#ttswidget-audio")[0]
+ @audioElement.onabort = () ->
+ console?.error attributes
+ @audioElement.load()
+ @audioElement.play()
+ jQuery(@audioElement).bind 'playing', =>
+ jQuery(".spinner", @dialog).hide()
+ jQuery(@audioElement).bind 'ended', =>
+ @dialog.dialog "close"
+ setTimeout =>
+ @_cleanup()
+ , 500
+ jQuery(@audioElement).bind 'error', (e) =>
+ errorHtml = """
+ <br/>
+ <div style="color: red">
+ <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>#{@options.errorMsg}
+ </div>
+ """
+ @dialog.append errorHtml
_cleanup: ->
jQuery("#ttswidget-dialog").dialog("destroy").remove()
_getText: ->
@@ -113,7 +173,7 @@ jQuery.widget "capkom.ttswidget",
return @element.attr "gender" if @element.attr "gender"
return @options.gender if @options.gender
preset: (lang="en", gender="male") ->
- presets =
+ presets =
"de-male": [
"LOCALE=de"
"VOICE=bits3"
@@ -131,7 +191,7 @@ jQuery.widget "capkom.ttswidget",
"VOICE=dfki-prudence"
]
res = presets["#{lang}-#{gender}"]
- console.error "There's no TTS preset defined for #{lang} and #{gender}." unless res
+ console?.error "There's no TTS preset defined for #{lang} and #{gender}." unless res
return res or presets["de-female"]
# Internal method for implementing the audio uri.
Oops, something went wrong.

0 comments on commit 581af2d

Please sign in to comment.