【javascript】Oscillatorを使って音を出してみよう

Oscillatorとは

javascriptには「WebAudio API」という技術があります。
WebAudio APIではブラウザ上で音を扱うための機能がたくさんあります。
今回作成するのはWebAudio APIの中の「Oscillator」というものを使用して、ブラウザ上で音を出力するサンプルです。

Oscillatorの生成

Oscillatorは「AudioContext」のインスタンスから生成します。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();
  var oscillator = audioCtx.createOscillator();
} );

これでは生成しただけなので音は出ませんが、この様に「AudioContext」からcreateOscillatorメソッドを使用して取得します。

Oscillatorによる音の出力

Oscillatorの生成で説明した通り、まずはAudioContextからOscillatorを取得します。
今回は440Hzの音(ラ音)を出力するために、Oscillator.frequencyに440Hzの値を設定します。
取得したOscillatorをAudioContext.destinationに接続してあげると、音を出力する準備が整います。
最後にstartメソッドを呼び出して音を出力し、stopメソッドで音の出力を止めます。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();

  var sample268Btn = document.querySelector( '#sample-268' );
  sample268Btn.addEventListener( 'click', function(){
    var oscillator = audioCtx.createOscillator();
    oscillator.frequency.value = 440;
    oscillator.connect( audioCtx.destination );
    oscillator.start();
    oscillator.stop( audioCtx.currentTime + 0.5 );
  } );
} );

※ボタンを押すと音が出ますのでご注意ください。

ここで気を付けたいのが、Oscillatorをstartしてstopして再度startする…事はできません。
ですので、ボタンを押すたびにOscillatorを生成してstartとstopを呼び出すようにしています。

サンプル

では音を出力する方法がわかったので、ピアノの鍵盤のサンプルを作ってみました。
鍵盤をクリックするとその音階の音が出力されます。

window.addEventListener( 'DOMContentLoaded', function( ){
  var audioCtx = new (window.AudioContext || window.webkitAudioContext )();

  var sample268Keys = document.querySelectorAll( '#keyboard-268 .key' );
  for( var i = 0; i < sample268Keys.length; i++ ){
    sample268Keys[ i ].addEventListener( 'click', function( e ) {
      var oscillator = audioCtx.createOscillator();
      var hz = e.target.dataset.hz || e.target.parentNode.dataset.hz;
      oscillator.frequency.value = hz;
      oscillator.connect( audioCtx.destination );
      oscillator.start();
      oscillator.stop( audioCtx.currentTime + 0.5 );
    } );
  }
} );

※音が出ますのでご注意ください。

ファ

【javascript】canvasでフェードインのアニメーションを作ってみよう

フェードインの作成方法

canvasの2次元の描画用コンテキストには、globalAlphaというプロパティで透明度を設定することができる。
この透明度の値を0(透明)から1(不透明)に徐々に変えていくことでフェードインのアニメーションを作成することができます。
globalAlpha 0 で画像を描画する。
globalAlpha 0.1 で画像を描画する。
…中略
globalAlpha 1 で画像を描画する。
このglobalAlphaの値を0~1に変える時間がフェードインのアニメーションの時間になります。

globalAlphaの値が0の場合

alphaの値が0なので透明の状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha0-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

globalAlphaの値が0.5の場合

alphaの値が0.5なので半分透明な状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha50-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0.5;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

globalAlphaの値が1の場合

alphaの値が1なので不透明な状態です。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-alpha100-255' );
  var context2d = canvas.getContext( '2d' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 1;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    draw();
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
  }
  
} );

CANVAS

サンプル

画像をフェードインで表示するサンプルです。
下のバーを動かしてフェードインの時間を設定できます。
描画はrequestAnimationのタイミングで実行されるので、時間は目安程度になります。
大体requestAnimationだと1秒間に60回ほど描画されるそうです。

window.addEventListener( 'DOMContentLoaded', function( ) {
  var canvas = document.querySelector( '#canvas-255' );
  var context2d = canvas.getContext( '2d' );
  var fadeinRange = document.querySelector( '#fadein-time-255' );
  var fadeinLabel = document.querySelector( '#fadein-label-255' );
  var retryBtn = document.querySelector( '#retry-255' );
  var x = 0;
  var y = 0;
  var width;
  var height;
  var alpha = 0;
  var time;
  var img = new Image();
  img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2018/02/cat2.jpg';
  img.onload = function( ) {
    width = Math.min( img.width, canvas.width );
    height = Math.min( img.height, canvas.height );
    window.requestAnimationFrame( draw );
  };

  function draw(){
    context2d.clearRect(0, 0, canvas.width, canvas.height);
    context2d.globalAlpha = alpha;
    context2d.drawImage( img, x, y, width, height );
    
    alpha += ( 1 / 60 ) / time;
    window.requestAnimationFrame( draw );
  }

  fadeinRange.addEventListener( 'change', setTime );
  retryBtn.addEventListener( 'click', resetAlpha );

  function setTime() {
    time = fadeinRange.value / 10;
    fadeinLabel.innerText = time;
    resetAlpha();
  }
  setTime();

  function resetAlpha() {
    alpha = 0;
  }
  
} );

CANVAS

フェードインの時間

【javascript】cookieとlocalStorageとsessionStorageの違い

cookieの使い方はこちら
localStorageの使い方はこちら
sessionStorageの使い方はこちら

サーバーにデータを送信するかしないか

cookieではページのリクエスト(リンクを踏んで移動する時など)を送信した際に、cookieの情報もサーバーに送信される。一方localStorageとsessionStorageはサーバーに送信されないという違いがある。

容量の違い

cookieは5KB程度までしかデータを保存できないが、localStorage、sessionStorageでは利用するブラウザによって容量が違うが、およそ5MBぐらいはデータを保存できる。

有効期限の違い

cookieは有効期限を設定する事ができる。ただし、設定しなかった場合はブラウザを閉じるとデータが消去される。localStorageでは半永久的にデータが保存され、sessionStorageではそのページを開いている間だけ使用する事ができる。

アクセスできる範囲(スコープ)の違い

cookieとlocalStorageでは、別ウィンドウでも同じデータにアクセスする事ができるが、sessionStorageでは開いているウィンドウで設定したデータは、その開いているウィンドウでしかアクセスすることができない。

まとめ

cookieとlocalStorageとsessionStorageの違いを表にまとめると、下記のようになります。

種類 サーバに送信 容量 有効期限 スコープ
cookie 5KB程度 設定による 共有
localStorage × 5MB(ブラウザによる) 半永久 共有
sessionStorage × 5MB(ブラウザによる) ウィンドウ・タブを閉じるまで そのウィンドウ・タブのみ

【javascript】sessionStorageを使ってデータを保存してみよう

sessionStorageとは

sessionStorageとはlocalStorageと同じようにクライアント側(ブラウザ)でデータを保存することができます。
しかし、sessionStorageを使用した場合はページのセッションが終了したとき(ページを閉じたとき)に保存したデータも消去されます。
localStorageを使ったデータの保存方法はこちら

sessionStorageの操作方法

sessionStorageに値を保存する

sessionStorage.setItem( [key], [value] );

keyとvalueを引数に設定し、sessionStorageにkeyとvalueのセットを保存します。

sessionStorageからデータを取得する

sessionStorage.getItem( [key] );

keyを引数に設定し、指定されたkeyでsessionStorageに保存した値を取得します。

sessionStorageに登録されているセットを削除する

sessionStorage.removeItem( [key] );

keyを引数に設定し、指定されたkeyをsessionStorageから削除します。

サンプル

sessionStorageに値をセットしたり削除したりするサンプル

サンプルコード

window.addEventListener( 'load', function( ){
    var key219 = document.querySelector( '#key-219' );
    var value219 = document.querySelector( '#value-219' );
    var setBtn219 = document.querySelector( '#set-btn-219' );
    var removeBtn219 = document.querySelector( '#remove-btn-219' );
    var sessionStorage219 = document.querySelector( '#sessionStorage-219' );
    displaySessionStorage();

    setBtn219.addEventListener( 'click', handleSetBtnClick, false );
    function handleSetBtnClick( e ){
        var key = key219.value;
        var value = value219.value;
        if( key ){
            sessionStorage.setItem( key, value );
            displaySessionStorage();
        }
    }

    removeBtn219.addEventListener( 'click', handleRemoveBtnClick, false );
    function handleRemoveBtnClick( e ){
        var key = key219.value;
        sessionStorage.removeItem( key );
        displaySessionStorage();
    }

    function displaySessionStorage( ){
        sessionStorage219.innerText  = "";
        for( var i = 0; i < sessionStorage.length; i++ ){
            if( i > 0 )
                sessionStorage219.innerText += ", ";

            var key = sessionStorage.key( i );
            sessionStorage219.innerText += key + ":" + sessionStorage.getItem( key );
        }
    }
} );

下のテキストボックスの「keyの値」と「valueの値」何か入力し、「setItem」ボタンを押すと入力したデータを保存する。
「keyの値」に登録されているkeyを入力し、「removeItem」ボタンを押すとkeyに対応するデータを削除する。
keyの値:
valueの値:


現在のsessionStorage:

【javascript】localStorageを使ってデータを保存してみよう

localStorageとは

localStorageとはcookieのようにクライアント側(ブラウザ)でデータを保存することができます。
cookieを使ったデータの保存方法はこちら

localStorageの操作方法

localStorageに値を保存する

localStorage.setItem( [key], [value] );

keyとvalueを引数に設定し、localStorageにkeyとvalueのセットを保存します。

localStorageからデータを取得する

localStorage.getItem( [key] );

keyを引数に設定し、指定されたkeyでlocalStorageに保存した値を取得します。

localStorageに登録されているセットを削除する

localStorage.removeItem( [key] );

keyを引数に設定し、指定されたkeyをlocalStorageから削除します。

サンプル

localStorageに値をセットしたり削除したりするサンプル

サンプルコード

window.addEventListener( 'load', function( ){
    var key214 = document.querySelector( '#key-214' );
    var value214 = document.querySelector( '#value-214' );
    var setBtn214 = document.querySelector( '#set-btn-214' );
    var removeBtn214 = document.querySelector( '#remove-btn-214' );
    var localStorage214 = document.querySelector( '#localStorage-214' );
    displayLocalStorage();

    setBtn214.addEventListener( 'click', handleSetBtnClick, false );
    function handleSetBtnClick( e ){
        var key = key214.value;
        var value = value214.value;
        if( key ){
            localStorage.setItem( key, value );
            displayLocalStorage();
        }
    }

    removeBtn214.addEventListener( 'click', handleRemoveBtnClick, false );
    function handleRemoveBtnClick( e ){
        var key = key214.value;
        localStorage.removeItem( key );
        displayLocalStorage();
    }

    function displayLocalStorage( ){
        localStorage214.innerText  = "";
        for( var i = 0; i < localStorage.length; i++ ){
            if( i > 0 )
                localStorage214.innerText += ", ";

            var key = localStorage.key( i );
            localStorage214.innerText += key + ":" + localStorage.getItem( key );
        }
    }
} );

下のテキストボックスの「keyの値」と「valueの値」何か入力し、「setItem」ボタンを押すと入力したデータを保存する。
「keyの値」に登録されているkeyを入力し、「removeItem」ボタンを押すとkeyに対応するデータを削除する。
keyの値:
valueの値:


現在のlocalStorage:

【javascript】cookieを使ってデータを保存してみよう

cookieの設定方法

document.cookie = '[key]=[value]';

document.cookieに[key]=[value]の形の文字列を代入することでcookieにデータを設定したり、更新したりすることができる。

cookieからデータを取得する方法

let data = document.cookie;

document.cookieでアクセスすることでcookieの値を取得する事ができる。ただし、document.cookieは文字列を保持しているにすぎないので、複数の値を設定している場合は各々の[key]=[value];を連結した値が返される。
例えば、

document.cookie = 'fruit=apple';
document.cookie = 'sport=soccer';
console.log( document.cookie );

cookieに二つのkeyとvalueのセットをした後にcookieの値を取得してコンソールに出力すると、
出力:fruit=apple;sport=soccer;
という結果になる。
keyとvalueの連想配列として取得したい場合は、文字列を分割して連想配列を作る関数を別途用意してあげる必要がある。

サンプル

window.addEventListener( 'load', function( e ){
  let value1 = document.querySelector( '#value1-200' );
  let value2 = document.querySelector( '#value2-200' );
  let cookieText = document.querySelector( '#cookie-200' );
  
  value1.addEventListener( 'change', handleOnChangeValue1 );
  function handleOnChangeValue1( e ){
    document.cookie = 'key1=' + encodeURIComponent( this.value );
    displayCookie();
  }

  value2.addEventListener( 'change', handleOnChangeValue2 );
  function handleOnChangeValue2( e ){
    document.cookie = 'key2=' + encodeURIComponent( this.value );
    displayCookie();
  }

  function displayCookie(){
    cookieText.innerText = decodeURIComponent( document.cookie );
  }
} );

下のテキストボックスに何か入力すると、「現在のdocument.cookie」の後ろにcookieの情報が表示されます。
key1のcookieの値:
key2のcookieの値:
現在のdocument.cookie:

【javascript】requestFullScreenをつかって全画面表示してみよう

使用する関数

  • requestFullScreen

要素を全画面表示にする

全画面にしたい要素を取得して、requestFullScreen()を呼び出すと、全画面表示ができる。videoの再生を全画面表示にしたり、画像を全画面表示にしたり、一部分を詳しく見てもらいたいときに活用できると思います。
html5ではwebrtcなどの技術を使って、デバイスのカメラの映像を交換することで、ビデオチャットも出来るので、こういったときにも使えるのではないかと思います。

サンプル

Video全画面表示サンプル

サンプルコード

window.addEventListener( 'load', function(){
  let fullScreenBtn = document.querySelector( '#full-screen-btn' );
  fullScreenBtn.addEventListener( 'click', function(){
    let target = document.querySelector( '#sample-view164' );
    if(target.requestFullScreen){
      target.requestFullScreen();
    }else if(target.webkitRequestFullScreen){
      target.webkitRequestFullScreen();
    }else if(target.mozRequestFullScreen){
      target.mozRequestFullScreen();
    }else{
      alert('全画面表示できません。');
    }
  });
});
全画面表示サンプル

画像全画面表示サンプル

画像をクリックすると全画面表示になります。

【javascript】canvasから画像を作成しよう

使用するクラス

HTMLCanvasElement

関数

  • getContext(contextType)
  • toDataURL()

CanvasRenderingContext2D

関数

  • beginPath()
  • ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
  • stroke()

プロパティ

  • strokeStyle

画像を作成する

canvasに描画した情報をpngファイルなどに変換して保存する事ができます。画像を作成ボタンを押すと「create-image.png」というファイルがダウンロードされます。画像をcanvasに貼り付ける方法は 【javascript】画像を読み込んでcanvasに描画しよう をご覧下さい。

window.addEventListener( 'load', function(){
  let canvas = document.querySelector( '#create-canvas145' );
  let context = canvas.getContext( '2d' );
  let x = 150;
  let y = 75;
  let radiusX = 50;
  let radiusY = 10;
  let rotation = 10;
  let startAngle = 0;
  let endAngle = 360;
  
  let id = setInterval(function(){
    context.strokeStyle = 'rgb(' + (rotation + 50) + ', 0, 0)';
    context.beginPath();
    context.ellipse(x, y, radiusX, radiusY, rotation * Math.PI / 180, startAngle, endAngle);
    context.stroke();
    if(180 < rotation)
      clearInterval( id );
    rotation += 12;
  }, 1000 / 60);

  let createImageBtn = document.querySelector( '#create-image145' );
  createImageBtn.addEventListener( 'click', function(){
    let img = canvas.toDataURL();
    let a = document.createElement( 'a' );
    a.href = img;
    a.download = 'create-image.png';
    document.body.appendChild( a );
    a.click();
    document.body.removeChild( a );
  });
});


サンプル

canvasの上で左クリックを押しながら移動すると線が描けます。「画像を作成」ボタンを押すと、canvasに描画されている状態が「create-image.png」ファイルとしてダウンロードできます。また、「一つ前」ボタンを押すと、一つ前の状態に戻れます。

太さ


【javascript】画像を読み込んでcanvasに描画しよう

使用するクラス

HTMLCanvasElement

関数

  • getContext(contextType)

CanvasRenderingContext2D

関数

  • drawImage( image, dx, dy, dwidth, dheight)

画像を描画する

context.drawImage()に画像と、画像を描画する位置情報(x、y)、画像のサイズ(width, height)を指定して描画します。画像のサイズを指定しないと、等倍で貼り付けられます。図形等の描画方法は【javascript】canvasに丸や四角や文字などを描いてみようをご覧ください。

window.addEventListener( 'load', function(){
  function drawImage(){
    var img = new Image();
    img.src = 'http://creakazukin.wp.xdomain.jp/wp-content/uploads/2017/06/cat.png';
    let x = 50;
    let y = 30;
    img.onload = function(){
      let width = img.width / 5;
      let height = img.height / 5;
      context.drawImage( img, x, y, width, height );
    };
  }
  let canvas = document.querySelector( '#image-canvas128' );
  let context = canvas.getContext( '2d' );
  drawImage();
});

サンプル

画像を選択して描画するサンプルです。ファイルを選択から好きな画像を描画してみてください。画像(jpeg, png, gif)以外のファイルは描画できません。

X座標
Y座標

【javascript】canvasでアニメーションを作ろう

使用するクラス

HTMLCanvasElement

関数

  • getContext(contextType)

CanvasRenderingContext2D

関数

  • fillRect(x, y, width, height)
  • fillText(text, x, y)

プロパティ

  • fillStyle
  • font

アニメーションの考え方

canvasでアニメーションを作るには、setInterval関数やrequestAnimationFrame関数などの一定時間毎に繰り返し描画処理を実行してあげます。canvasの内容を消して、新しく描く。canvasの内容を消して、新しく描く。これを短い間隔で繰り返しながら位置を変えてあげたり、大きさを変えたり、色を変えたりすることによって表現できます。

サンプル

文字列を動かすアニメーションのサンプルです。動く速さや文字列を変えると、サンプルのcanvasに反映されます。このサンプルでは文字列ですが、丸や四角などのアニメーションも簡単に作れます。
丸や四角などの図形の描画方法は「【javascript】canvasに丸や四角や文字などを描いてみよう」こちらの記事に書いてあります。

window.addEventListener( 'load', function(){
  let canvas = document.querySelector('#sample-canvas70');
  let context = canvas.getContext('2d');
  context.font = "bold 20px 'Courier'";
  let x = 0;
  let y = 24;
  let moveX = 0.6;
  let moveY = 1;
  let text = 'javascript';
  let paddingX = text.length * 26 / 2;
 let paddingY = 24;
  function draw(){
    context.fillStyle = 'rgba(255, 255, 255, 1)';
    context.fillRect(0, 0, canvas.width, canvas.height);    
    context.fillStyle = 'rgb(255, 120, 25)';
    context.fillText(text, x, y);
    x += moveX;
    y += moveY;
    if(x < 0)
      moveX = Math.abs(moveX);
    if(canvas.width - paddingX < x )
      moveX = -Math.abs(moveX);
    if(y < 0 + paddingY)
      moveY = Math.abs(moveY);
    if(canvas.height < y)
      moveY = -Math.abs(moveY);
    window.requestAnimationFrame(draw);
  }
  window.requestAnimationFrame(draw);
  let moveXEle = document.querySelector('#move-x70');
  let moveYEle = document.querySelector('#move-y70');
  let canvasText = document.querySelector('#canvas-text70');
  moveXEle.addEventListener('change', function(){
    moveX = moveX < 0 ? -Math.abs(this.value / 10) : this.value / 10;
  });
  moveYEle.addEventListener('change', function(){
    moveY = moveY < 0 ? -Math.abs(this.value / 10) : this.value / 10;
  });
  canvasText.addEventListener('change', function(){
    text = this.value;
    paddingX = text.length * 26 / 2;
  });
});


横軸の動く速さ


縦軸の動く速さ


動いている文字