気になるメモメモφ(..)

日常気になる事を取り留めもなくメモメモしてます。

「Tone.js」でブラウザで演奏できるピアノを作ってみる

前回、楽曲の音響信号に、どのような音階の音が含まれているかをlibrosaを使い分析する仕方をちょっとだけメモしてみましたが、

 

memomemokun.hateblo.jp

 

じゃ、実際、librosaで解析したクロマグラムがどの程度の精度で正しい結果を出力しているのかを確認するには、解析して来た12半音を実際に音に鳴らしてみたら感覚的にわからなくない(?)ということで、出力結果の12半音をブラウザ上で実際に音を鳴らしてみたく、

 

ブラウザで多彩な音を出すためのWeb Audio APIを超使いやすくした「Tone.js」なるものを調べるついでに、「Tone.js」でブラウザで演奏できる1オクターブ(+1オクターブ上の「ド」までの)13音だけのピアノ鍵盤を作ってみました。

 

以下の鍵盤をマウスでクリックするとピアノの音がなると思います。 

 

 

 

「Tone.js」でブラウザ上で音を鳴らすのは、調べて見ると、えらい簡単で、次の1行でピアノの音のシンセサイザが作成され、

synth = new Tone.Synth().toMaster();

以下の1行だけで音がなります。 

synth.triggerAttackRelease(音名, '8n');

 

詳細は「Tone.js」の公式サイトをみていただければと思いますが、

 

https://tonejs.github.io

 

思いつくまま気の向くまま、ちょっと、ブログを進めてまいります。

 

上のピアノの鍵盤を表示しているブログ上のHTMLソースは以下

    
<style type="text/css">
<!--
#keyboard {
    width: 100%;
    position: relative;
}
.whitekey {
    width: 10%;
    height: 240px;
    text-align: center;
    display: inline-block;
    border: 1px solid #000;
}
.whitekey:hover {
  background-color: #eee;
}

.blackkey {
    width: 9%;
    height: 140px;
    display: inline-block;
    margin-left: -5%;
    background-color: #000;
    position: absolute;
}
.blackkey:hover {
  background-color: #333;
}
-->
</style>
<ul id="keyboard">
   <li data-key="C4" class="whitekey"></li>
   <li data-key="C#4" class="blackkey"></li> 
   <li data-key="D4" class="whitekey"></li>
   <li data-key="D#4" class="blackkey"></li> 
   <li data-key="E4" class="whitekey"></li>
   <li data-key="F4" class="whitekey"></li>
   <li data-key="F#4" class="blackkey"></li>
   <li data-key="G4" class="whitekey"></li>
   <li data-key="G#4" class="blackkey"></li>
   <li data-key="A4" class="whitekey"></li>
   <li data-key="A#4" class="blackkey"></li>
   <li data-key="B4" class="whitekey"></li>
   <li data-key="C5" class="whitekey"></li>
</ul>


<script src="http://chamu.org/tonejs/Tone.min.js"></script>
<script>
// ページ読み込み時シンセ生成
var synth;
window.onload = function(){
  synth = new Tone.Synth().toMaster();
}

// マウスを押した時のイベント処理
window.addEventListener('mousedown', playSound);
window.addEventListener('touchstart', playSound);


function playSound(e) {
  
  // マウスのdata属性を取得
  var key = e.target.dataset.key;
  
  // keyがundefinedなら処理を実行しない
  if (typeof key === "undefined") return;  
  
  // 音名を代入する
  synth.triggerAttackRelease(key, '8n');
    
}
</script>