Fukusanの日記らしきもの

なんとも言えない感じで更新したり、しなかったりするブログです

Web Audio API使ってみた

はじめに

この記事は、prolab Advent Calendar 2016の12月21日の記事として書かれています(遅刻です)。 www.adventar.org

自己紹介

こんにちは、Fukusanです。 プロラボでJavaScriptを書いたり、 某ちゃんさんにタスクを投げられたりしています。

今回作ってみたもの

今回は、音声ファイルをドロップすると再生する静的HTMLを(深夜テンションで)書きました。
※PCで開いてください、モバイルフレンドリーではないです(ごめんなさい)

音声ファイルをresultの領域にドロップすると再生します。(音が出るので注意)
ファイルをドロップしてから再生されるまで時間がかかる場合があります

See the Pen rWRBxw by 福さん (@Fukusan) on CodePen.

ほんのちょっとWeb Audio APIについて解説

今回、僕が使った機能について簡単に説明します。 ちゃんと理解できているか怪しいので間違いを見つけた方は教えていただけると嬉しいです。

AudioContext

音声の再生を管理するクラス、AudioContext.destinationに接続することでWeb audio APIで音を鳴らす事ができます。

AnalyserNode

AudioContext.createAnalyser()の返り値で、音声の時間と周波数を解析することができます。

AudioBufferSourceNode

AudioContext.createBufferSource()の返り値で、AudioBufferオブジェクトに書き込まれた音声データを再生することができます。

今回作ったものについて

画面への表示についてはcanvasにただ描画しているだけなので省略します。また、音声ファイルの読み込みについても今回は省略します。

音声データのデコードについて

ArrayBufferとして読み込んだファイルのデータを

//audioCtxにはthis.audioContextが入っている
this.audioCtx.decodeAudioData(data,callback)

でデコードします。callbackには、デコードの結果が引数に渡されます。 今回は、デコードの結果をAudioBufferSourceNode.bufferに代入しています。

AudioNodeの接続の関係

AudioNode(AnalyserNode,AudioBufferSourceNodeなど)は

//AudioNodeの部分には
//AnalyserNode,AudioBufferSourceNodeなどが入る
AudioNode.connect(AudioNode);

と書くことによって接続することができます。 今回作ったものでは、 AudioBufferSourceNode→AnalyserNode→AudioContext.destination という風に接続しています。 AudioBufferSourceNodeで再生した音をAnalyserNodeでスペクトル情報を取得して画面表示し さらに、音をAudioContext.destinationに渡して鳴らしています。

スペクトル情報の取得について

音のスペクトル情報はAnalyserNodeのgetByteFrequencyDataメソッドで取得できます。

//this.analyserにはAnalyserNodeが入っている
var spectrums = new Uint8Array(this.analyser.frequencyBinCount);//結果を入れるためのspectrums(Uint8Array)を準備
this.analyser.getByteFrequencyData(spectrums);//spectrumsにスペクトル情報(0~255)を入れる

spectrumsの長さはAnalyserNodeのfftSizeというプロパティの値(デフォルトは2048)により変化しますが、その長さは、AnalyserNode.frequencyBinCountから取得することができます。 このようにして取得したスペクトル情報を使って描画しています。

まとめ

僕はWeb Audio APIを初めて使ってみて、機能がとても充実していることに驚きました。 特にスペクトル情報の取得が簡単に行えることはとても便利です。 ぜひ、一度興味がある方はWeb Audio APIを使ってみてください! ただ、僕は説明が下手なので上記の内容だけで理解できる人は少ないと思います。 もし、興味があるという人は、自分で調べていただくともっとわかりやすいサイトが出てくると思います(このブログの意味…)

こんな感じで終わりたいと思います。

prolab Advent Calendar 2016、明日はゲ・ドリンク大先生の記事です。

jQuery使ってみた

始めに

皆さんいかがお過ごしでしょうか。
Fukusan(「福さん」でもある)です。
今回、部活のアドベントカレンダーに参加するという形で
生まれて初めて、ブログなるものを書いております。
www.adventar.org

さっそく本題

今回の内容は題名の通り「jQuery」です(今更)。
jQueryについて、ざっくり説明すると、JavaScriptのライブラリーで、
これを使うことによりJavaScriptをより扱いやすくすることが出来ます。
今回は、jQueryの書き方などについて自分の分かる範囲で書いていきたいと思います。

jQueryの読み込み

jQueryを使うには、まずjQueryライブラリーを読み込む必要があります。
読み込み型には、主に次の2つがあります。

  1. Web上からソースを読み込む
  2. ダウンロードしてローカルから読み込む
まず、1の方法から

読み込みたいHTMLソースに以下のように書き込むだけ

例(jQuery1.9.1を読み込む)
JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
次に、2の方法

まず、jQueryの公式サイト
http://jquery.com/download/(公式サイト)
から、jQueryライブラリーをダウンロードします。
バージョンはjQuery1.x系と、jQuery2.x系がありますが、jQuery2.x系は、IE6,7,8をサポートしていません。
なので、理由がないのなら、jQuery1.x系でいいと思います。
次に、HTMLに読み込みます。
以下のようなソースを読み込みたいHTML に書き込みましょう。
JavaScriptを読み込む(書き込む)前に書き込んでください

<script type="text/javascript" src="格納場所/jquery.min.js"></script>

jQueryの書き方

基本形

まずは、jQueryの基本形です。

$(function(){
  // 内容
});

これは、「内容」をhtmlを読み込んでから処理を実行する
という意味です。

「要素」を選択する

要素を選ぶ部分を「セレクタ」と言います、jQueryセレクタの書き方はcssセレクタと似ています。
ここでは、基本的なセレクタを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う$('#element')の部分のこと*/
$(function(){
  /*id="element"の要素を選択する*/
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*class="element"の要素を選択する*/
  $('.element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*p要素を選択する*/
  $('p').click(function(){
    $(this).text("クリックされたよ~");
  });
});
$(function(){
  /*div内のp要素を選択する*/
  $('div p').click(function(){
    $(this).text("クリックされたよ~");
  });
});
実行するタイミングを書く

実行するタイミングを決める部分を「イベント」と言います。
ここでは、基本的なマウス操作関係のイベントを紹介します。

$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う.click()の部分のこと*/
  • クリックイベント
$(function(){
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
  • マウスオーバーイベント
$(function(){
  $('#element').mouseover(function(){
    $(this).text("マウスカーソル乗ったよ~");
  });
});
  • マウスアウトイベント
$(function(){
  $('#element').mouseout(function(){
    $(this).text("マウスカーソル降りたよ~");
  });
});
実行する処理を書く

jQueryでは、要素のcssを書き換えたり、要素を動かしたり、要素を追加したりなど、様々な処理をする事ができます。
ここでは、その中からいくつかを紹介します。

$(function(){ 
  $('#element').click(function(){
    $(this).text("クリックされたよ~");
  });
});
/*このプログラムで言う.text()の部分のこと*/
  • cssを変更する(ここでは、背景色を変更しています)
$(function(){ 
  $('#element').click(function(){
    $(this).css("background-color","#fff");
  });
  • 要素を動かす(ここでは、要素を500ミリ秒かけて、leftを50pxの位置に不透明度を1に変化させています)
$(function(){ 
  $('#element').click(function(){
    $(this).animate({
      left: 50, opacity: 1
    },500);
  });
  • 要素を追加する(ここでは、id="#element"の要素の後に新しいdiv要素を作っています)
$(function(){ 
  $('#element').click(function(){
    $(this).after('<div>test</div>');
  });
});

最後に

簡単な説明でしたが、jQueryについて、少しでも興味を持っていただけたら幸いです。
この記事に書いた内容は、jQueryの書き方のほんの一部です。
もし、興味を持っていただけたのなら、ぜひ自分で調べて、書いて、学んでください。
ここに書いていない、新しいjQueryの書き方に出会うことができると思います。