MP3 and Text-to-speech in JSXGraph

MP3: Explanation

This is an example of an MP3 player sitting within a JSXGraph board.

We add it at position [−2, 0] using the foreignobject (or the alias fo) as follows:

board.create('foreignobject', [ 
  '<audio src="/music/Opus-1-No-1/2.%20Allegro%202_43.mp3" type="audio/mpeg" controls>I\'m sorry. You\'re browser doesn\'t support HTML5 audio.</audio>',
  [-2,0]
]);

The MP3 has to be on the same domain as your JSXGraph board, otherwise you get cross-origin errors.

The music is the second movement of a piece I wrote some decades ago, in the style of Bach.

Speech to text: Explanation

This next one is an example of a speech to text facility within a board. We just add it as a 'text' item as follows:

board2.create('text', [-1.8,0.5, '
<button id="talk">talk</button> <button id="stop">stop</button><br /><input type="range" value="1" id="rate"  step="0.1" min="0.1" max="10" /><br /><input type="range" value="1" id="pitch" step="0.1" min="0" max="2"  />
' ], 
{fixed:true,layer:99});

HTML5 text to speech credit: greggman

NOTE: The speechSynthesis method is undefined in quite a few browsers. This is mostly an issue on mobile devices, with Opera, Opera Mini, UC Browser, Bing and DuckDuckGo all failing on Android phones.