あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
らりるれろ
や゛ゆ゜よ
わ?を!ん
view source

JavaScript

document.title = 'あいうえおブロック 知育パズルアプリ しゃべる';

$(function(){
  var zIndex = 99;
  var colors = [
    'rgb(180,9,5)',
    'rgb(240,90,7)',
    'rgb(240,230,10)',
    'rgb(100,230,50)',
    'rgb(10,120,70)',
    'rgb(20,190,200)',
    'rgb(30,200,250)',
    'rgb(0,50,230)',
    'rgb(90,90,250)',
    'rgb(130,40,200)',
  ];
  var consonantAry = [
    '','k','s','t','n','h','m','y','r','w',
  ];
  var vowelAry = [
    'a','i','u','e','o',
  ];

  var text = $('#text').text();
  $('#text').hide();
  var lines = text.split('\n');
  var table = $('<table>');
  $('#demo').append(table);
  lines.forEach(function(line,i){
    var tr = $('<tr>');
    table.append(tr)
    var chars = line.split('');
    chars.forEach(function(v,j){
      var td = $('<td>');
      var title = consonantAry[i] + vowelAry[j];
      var p = $('<p>').text(v)
        .attr({title:title})
        .css({backgroundColor:colors[i]});
      if(v==='゛' || v==='゜'){
        p.addClass('dot');
      }
      var ii = $('<i>').text(v);
      p.on('mousedown', function(){
        zIndex++;
        $(this).css({zIndex:zIndex})
      });
      p.on('click', function(){
        var v = $(this).text();
        if(v.match(/[あ-ん]/)){
          talk(v);
        }
      });

      td
        .append(p)
        .append(ii);
      p.draggable();
      tr.append(td);
    });
  });
});






var url = new URL(location);
var ch = '';


window.speechSynthesis.onvoiceschanged = () => {
  this.voices = window.speechSynthesis.getVoices();
};
var voices = window.speechSynthesis.getVoices();
function talk(v){
  voices = window.speechSynthesis.getVoices();
  var voiceJa = voices[5];
  var utter = new SpeechSynthesisUtterance(v);
  utter.voice = voiceJa;
  utter.volume = 1;
  utter.rate = 1;
  utter.pitch = 1;
  utter.lang   = 'ja-JP';
  voices = window.speechSynthesis.getVoices();
  utter.voice = voices[1];
  console.log(utter);
  voices.forEach(function(v, i){
    if(v.name.match(/日本/)){
      utter.voice = voices[i];
    }
  });
  window.speechSynthesis.speak(utter);
}

CSS

html,body{
  overflow:hidden;
}
table,tr,td,p{
  box-sizing:border-box;
}

table{
  width:100%;
  height:100%;
  user-select:none;
}
tr{
}
td{
  border:1px solid #ccc;
  width:20%;
  height:9.6vh;
  font-size:6.8vh;
  text-align:center;
  vertical-align:middle;
  cursor:crosshair;
  position:relative;
  left:0;
  top:0;
}
td:hover{
  background-color:#fafafa;
}
p{
  display:inline-block;
  border-radius:50%;
  border:8px solid #000;
  padding:4px;
  font-weight:bold;
  color:#fff;
  z-index:99;
  cursor:pointer;
  text-shadow:#000 4px 4px 4px;
}
p.dot{
  border-color:transparent;
  background-color:transparent !important;
}
i{
  position:absolute;
  left:0;
  top:0;
  color:#ccc;
}

#code,footer{
  display:none;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-aiueo/

ABOUT

hi0a.com 「ひまアプリ」は無料でつかえる便利ツールやブラウザ上で遊べるミニゲームを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。ご了承下さい。