LoginSignup
18
18

More than 5 years have passed since last update.

Web Audio APIを使ってブラウザで音楽を楽しむためのライブラリ、neume.jsを触ってみる

Last updated at Posted at 2015-03-03

ブラウザでも音が鳴るなにかをやりたくなったので

Web Audio APIは正直めんどくさい。

たとえば。

。。。。ごめんなさい。難しくて、何書いてるか、ぜんぜんわかりません。。。。

というわけで、「私はWeb Audioはわからない!」と堂々と生きてきたわけですが、心の中では、「簡単に使える良いライブラリは無いものか?」と思い続けていたわけです。

そりゃ、音出せれば楽しいに決まってますからね!
ある日(結構前)、どこからか天の声が聞こえてきました。

neume.js使えや」

。。。。声が聞こえてきてから半年くらい経った気がするけど思い出して触ってみることにしましたw

neume.jsとは

@モハヨナオさんが作ってる、ブラウザで音楽を作るためのライブラリだそうな!

neume.js - library for web audio programming「音の鳴るブログ」by モハヨナオさんで紹介されている。

Githubのリポジトリはコチラ

Blogには、素のWeb Audio APIと比べると、音を鳴らすための処理がとても短く書ける、と書いてある。

確かに短い! 22行が7行になってる。1/3!

オーディオ処理が判らない私にとっては、やはり身体で覚えるしかない!

サンプルを触りながら少しづつ覚えたいと思います。

かっこいいサンプル

サイン波が複雑に絡む心地よい音響作品。ビジュアルもかっこいいです。

いわゆる「スライサー」ってやつですね。JavaScriptだけでやってるなんてスゴイ!

一番簡単そうなサンプル「metronome.html」を見てみる

すごそうなサンプルは、コードもすごそうなので、一番簡単そうなmetronome.htmlを見てみることにしました。

初期化

これは、お決まりっぽいですね。

var neu = neume(new AudioContext());

音を出すneu.Synth()

metronome.htmlでは、Sine()という関数で、「ポン」という音を出す処理を作ってから、neu.Synth()に渡すこと音を出しているようです。

neu.Synth(Sine, freq, dur).start(e.playbackTime);

Sine()の中身を見は下記のようになっています。

function Sine($, freq, dur) {
  return $("sin", { freq: freq })
    .$("xline", { dur: dur }).on("end", $.stop);
}

$("sin", { freq: freq })の部分が、サイン波オシレータ、$("xline", { dur: dur })の部分が、時間で音量が変わる部分(?)、最後のon("end", $.stop)の部分が、音が鳴り終わったときに呼ばれる処理のようです。

試しに、"xline"の部分を、"line"に変えたら、音が滑らかに変化せずに、『ブチ』っと切れるようになりました。

また、return $("sin", { freq: freq }); だけにすると、音が止まらなくなります。
(音量によっては耳がぁ!ってなるのでオススメはしませんw)

いろいろ実験して覚えていくと良さそうですね。

タイミングよく音を出すneu.Interval()

neume.jsには、スケジューラも用意されているようです。
シーケンサーみたいなのが簡単に作れそうな気がしてきましたw

timer = neu.Interval("4n", function(){

}).start();

上記のように書けば、定期的に指定した関数が呼び出されるみたいです。
試しに、"4n""16n"とかに変更してみると、細かく呼ばれるように。

たぶん4nとかって、「1小節につき4回呼ぶ」的な意味だと思う。

テンポはどーやって変えるのかな?と思い、neuオブジェクトを覗いてみたら、neu.bpmというプロパティが!

neu.bpm = 200;

と設定すればテンポも変えられるようです!
(デフォルトは120みたいです)

今日はここまで

今日はここまでです。

サンプルを触っただけですが、音が出るってやはり楽しい!
音が出せただけで感動。。。
引き続きさわってみようと思います!

@モハヨナオさん、ありがとうございます!!!!

18
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
18