パーソナルブログメモリ

個人的な簡易記録です。コンピュータ関連をメインでやってます。ようこそ!いらっしゃいませ。

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

2017年05月16日 | コンピュータ
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編)
クリックすると音が鳴るボタンの作り方
ジャンル:
ウェブログ
コメント   この記事についてブログを書く
この記事をはてなブックマークに追加
« ゲームサーバの検討 | トップ | Node.jsでファイルを振り分ける »
最近の画像もっと見る

コメントを投稿

ブログ作成者から承認されるまでコメントは反映されません。

コメント利用規約に同意の上コメント投稿を行ってください。

数字4桁を入力し、投稿ボタンを押してください。

あわせて読む

トラックバック

この記事のトラックバック  Ping-URL
ブログ作成者から承認されるまでトラックバックは反映されません。