html5で画像の部分抽出と音を鳴らす

html5のcanvasを使って画像をタイル化して表示と音を鳴らせてみました。

base.jpgを分割して表示させて100msおきに表示位置を変えています。
waveファイルはFizzBuzzのようなタイミングで鳴らしています。
音声ファイルはこのブログでは載せられないので適当なものをつかってください。

ubuntu16.04環境でブラウザーはfirefox chromiunで確認しています。

base.jpg


test.html

<canvas id="canvas1" width="400" height="400"></canvas>
<script>
  var canvas = document.getElementById('canvas1');
  var ctx = canvas.getContext('2d');
  var sx=1;
  var sy=1;
  var baseImage = new Image();
  baseImage.src = 'base.jpg';
  setInterval("tilewrite()",100);

function tilewrite(){
  var size=50;
  for (var x = 0; x < 8; x++) {
    for (var y = 0; y < 8; y++) {
      var px=x+sx;
      var py=y+sy;
      ctx.drawImage(baseImage, px*size, py*size,size,size,x*(size+1),y*(size+1),size,size);
    }
  }
  sx=sx+1;
  if (sx>12){
    sx=0;
    sy=sy+1;
    if ((sy % 2)==0)wave1play();
    if ((sy % 3)==0)wave2play();
  } 
  if (sy>7){
    sy=0;
  }
}
function wave1play()
{
  var id = 'wave1' ;
  if( typeof(document.getElementById(id).currentTime) != 'undefined' )
  {
    document.getElementById(id).currentTime = 0;
  }
  document.getElementById(id).play() ;
}
function wave2play()
{
  var id = 'wave2' ;
  if( typeof(document.getElementById(id).currentTime) != 'undefined' )
  {
    document.getElementById(id).currentTime = 0;
  }
  document.getElementById(id).play() ;
}
</script>
<form>
<audio id="wave1" preload="auto"><source src="./iron.wav" type="audio/wav"></audio>
<audio id="wave2" preload="auto"><source src="./hello.wav" type="audio/wav"></audio>
</form>

＜参考サイト＞
画像を描画する－JavaScript入門（HTML5編）
クリックすると音が鳴るボタンの作り方