小学生の息子がローマ字習い始めたので、Surface Pro にデジタイザペンでローマ字書いたら、OCR で認識して、音声合成で読み上げてくれる、<s>HTML5</s> Web標準 アプリを、クライアント側スクリプトは TypeScript で作ってみました。canvas、pointer event、audio といった <s>HTML5</s> Web標準的技術要素のほか、VoiceText WebAPI、.wav から .mp3 への変換、などといった話題を取り上げます。

1. 息子たちがローマ字勉強す
るための HTML5 Web標準
アプリ作ってみた

2. ローマ字れんしゅうちょう
http://romanlettersdrillbook.azurewebsites.net/

3. Canvas
Audio
MP3 encoder
Internet
Explorer
11
Microsoft Azure
Websites
Visual Studio
Community 2013
Git
PowerShell with
Posh-Git
W3C
Pointer Events
Ocrad.js
Optical Character Recognition
by JavaScript
nuget

4. Drawing

5. Canvas

7. Community 2013 / It’s free.
http://visualstudio.com/free

9. nuget

10. Demo

11. Erase Stroke

14. W3CCandidate Recommendation
09 May 2013
Pointer
Events
http://www.w3.org/TR/pointerevents/

15. Internet
Explorer
11

18. http://goo.gl/IkI2Xm

19. Demo

20. Optical Character
Recognition in JS

21. http://antimatter15.com/ocrad.js/demo.html

22. http://bower.io/

23. http://nodejs.org/

24. > npm install –g bower
> bower install ocrad-bower

25. Demo

26. ローマ字スペルからひらがなへの変換は…

29. Generate Voice Sound

30. https://cloud.voicetext.jp/webapi

32. Demo

33. Audio

34. var audio = new Audio();
audio.autoplay = true;
var url = '/api/voice/' + encodeURI('こんにちは');
audio.src = url;

35. Internet
Explorer
11

36. http://www.w3schools.com/html/html5_audio.asp

37. http://www.w3schools.com/html/html5_audio.asp

38. Convert .wav to .mp3

39. http://lame.sourceforge.net/

40. https://github.com/Corey-M/NAudio.Lame

41. using System.IO;
using NAudio.Wave;
using NAudio.Lame;
public static class Codec
{
// Convert WAV to MP3 using libmp3lame library
public static void WaveToMP3(
string waveFileName, string mp3FileName, int bitRate = 128)
{
using (var reader = new WaveFileReader(waveFileName))
using (var writer = new LameMP3FileWriter(
mp3FileName, reader.WaveFormat, bitRate))
reader.CopyTo(writer);
}
}

42. http://stackoverflow.com/questions/20088743

44. Deploy

45. Microsoft
Azure
Websites

48. https://appharbor.com/

49. https://github.com/dahlbyk/posh-git
Posh-Git

50. Appendix: Favicon

51. http://realfavicongenerator.net/

53. Conclusion

54. Canvas
Audio
MP3 encoder
Internet
Explorer
11
Microsoft Azure
Websites
Visual Studio
Community 2013
Git
PowerShell with
Posh-Git
W3C
Pointer Events
Ocrad.js
Optical Character Recognition
by JavaScript
nuget

55. Learn, Practice, Share.
Thanks.