Speaking SVG

The combination of SVG and spoken text is fascinating and also not very difficult thanks to:
TTS-components / DOM / Scripting.

This example requires the ActiveX Control 'SpeechPlugin'. You have to download it manually first before 'hearing' this Speaking SVG example.

Note: I tested this example with IE5.5. Netscape's Navigator 4.xx failed .. obviously by dynamically loading the ActiveX control. (Fixing this is welcome!)

Here is the code:

<?xml version="1.0"?>
<svg width="400" height="300" onload="Init(evt)">
  <rect x="50" y="50" width="200" height="80" stroke="blue" fill="red" 
         onmouseover="DescribeElement(evt)" />
  <circle cx="100" cy="200" r="5" onmouseover="SpeakTitle(evt)" >
    <title>Here lives the mouse.</title>
  </circle>
  <text x="80" y="250" style="font-family:Verdana; fill:green" onmouseover="SpeakText(evt)">
    Enjoy this Text-To-Speech example!
  </text>

  <script><![CDATA[
    var ttsCtl=null;  // the text-to-speech control ..

    function Init(e)
    {
      ttsCtl = new ActiveXObject("IESP.SpeechControl.1");
      if (ttsCtl)
      {
        ttsCtl.SetVoice(11); // select british female voice ..
        ttsCtl.Speak("Hello, I am " + ttsCtl.GetVoiceName(ttsCtl.GetVoice()) + 
                     ". I would like to introduce you to SVG" + 
                     ". Simply point with your mouse onto the elements.");
      }
    }

    function DescribeElement(e)
    {
      if (ttsCtl) ttsCtl.Speak("This is a '" + e.target.nodeName + "' element.");
    }

    function SpeakTitle(e)
    {
      if (ttsCtl) ttsCtl.Speak(TextOf(TitleElementOf(e.target)));
    }

    function SpeakText(e)
    {
      if (ttsCtl) ttsCtl.Speak(TextOf(e.target));
    }

    // -- local helper functions ------
    function TitleElementOf(elem)
    {
      var childs = elem.childNodes;
      for (var i=0; i<childs.length; i++)
        if (childs.item(i).nodeType == 1 && childs.item(i).nodeName == "title")
          return childs.item(i);
      return null;
    }

    function TextOf(elem)
    {
      var childs = elem ? elem.childNodes : null;
      for (var i=0; childs && i<childs.length; i++)
        if (childs.item(i).nodeType == 3) // text node ..
           return childs.item(i).nodeValue;
      return "";
    }
  ]]></script>
</svg>
  

Test it.

Thanks to Robert A. DiBlasi for bringing the Text-To-Speech/SVG idea up in the SVG community and for pointing us to the Plugin at speaksforitself.com. I am sure, a lot will happen here soon.

© 2000 MecXpert