So-net無料ブログ作成
» スポンサーリンク
音楽コンテンツ(作曲/演奏)
前の5件 | 次の5件

Web Audio APIで作られたバーチャル・カリンバとバーチャル・ハングドラム
» 音楽コンテンツ(作曲/演奏) 

Middle Ear Media が公開しているブラウザで動く Virtual KalimbaVirtual Hang を紹介。

Web Audio API 対応の Chrome もしくは Safari で実行してください。
マウスオーバー操作ができないモバイル版の Chrome/Safari や、Web Audio API に対応していないInternet Explorer、Forefox では音が鳴りません。

» Virtual Kalimba


JavaScript と Web Audio API を使ったサンプル的なもので使い方はシンプルです。

マウスカーソルを打面上に載せると鳴ります。(クリックでは鳴りません)
コントロールパネルとショートカットキーでフィルターやパンの調整ができます。

» Virtual Hang


マウスカーソルをピンの上に載せると鳴ります。(クリックでは鳴りません)
上部の3つのアイコンでピンの並びが変わります。
コントロールパネルとショートカットキーでフィルターやパンの調整ができます。


できればキーボードでも演奏できるようにしてほしかった。

実物のカリンバ、ハングドラムについて知りたい人はブログの過去記事を参照。
 →カリンバに関連する過去の関連記事はこちら
 →ハングドラムに関連する過去の関連記事はこちら

[関連サイト]
 Middle Ear Media


MEINL マイネル カリンバ KA9-M  medium

MEINL マイネル カリンバ KA9-M medium

  • 出版社/メーカー: MEINL
  • メディア: エレクトロニクス
HAPI Drum Miniシリーズ Dアケボノ HAPI-MINI-DA

HAPI Drum Miniシリーズ Dアケボノ HAPI-MINI-DA

  • 出版社/メーカー: HAPI Drum
  • メディア: エレクトロニクス
iTunes App Store からダウンロード OddTunes:Hang
カテゴリー: ミュージック
リリース: 2014/05/29 (Ver.3.3)
価格: 100円
permalink
trackback


iTunes App Store / Mac App Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac





» スポンサーリンク

Web Audio APIで音が鳴るインタラクティブなサウンドビジュアルページ FLORA DRIFT
» 音楽コンテンツ(作曲/演奏) 

NOTCOT.ORG で見つけた Web Audio API で動くインタラクティブなサウンドビジュアル Web アプリ FLORA DRIFT を紹介。



Web Audio API が使用されているので Chrome、Safari でアクセスしてください。
(Web Audio API 非対応の Internet Explorer、Firefox では動きません)

サウンドの生成は Web Audio API、描画は HTML5 の Canvas を利用して JavaScript で作られています。



フルスクリーンもしくはそのままウィンドウ内で実行するか選択します。



アンビエントな音楽が流れながら背景が次々に切り替わります。
背景をマウスでドラッグし続けると小さなスウィープ音が鳴ります。

画面下の▲を押すと設定画面が表示されます。



左の◎でテンポの調整、中央の◎でリズム音量の調整ができます。
右側の2つ六角形を押すと楽器が表示されます。



1つ目の楽器はアタックが速めの減衰音。
六角形のパッド部分を押すと音が出ます。



2つ目の楽器はアタックが遅めの持続音でテルミンのような音。
弦の上をドラッグすると音が鳴ります。


ソースコードをざっと見たところ、曲や背景の生成は決められたルールに従って自動で生成されているようでした。

こういうセンスのあるプログラムをサラッと作ってみたいものですね。

[関連サイト]
 FLORA DRIFT
 whitevinyldesign.com
 NOTCOT.ORG


気が付けば累計アクセス数が2,500万を突破していました。
いつも見に来てくださる方も、ググッて来てくださった方も、ありがとうございます。
今後も音楽方丈記をよろしくお願いします。

permalink
trackback


ルービックキューブとTR-808が合体したドラムマシンWebアプリ 808 Cube
» 音楽コンテンツ(作曲/演奏) 

ルービックキューブが作られてから今年で40周年ということで、それを記念して Google が公開している Chrome Cube Lab では Chrome の API を利用して作られたルービックキューブを題材とした様々な Web アプリが公開されています。

その中のルービックキューブと Roland TR-808 を合体させたステップ形式のドラムマシン・シーケンサー 808 Cube を紹介。



 サウンド出力に Web Audio API が使用されているのでデスクトップ版の Chrome もしくは Safari の最新版でトライしてみてください。
 スマホ版の Chrome、Safari でも動きますが、全体の上下回転に難あり…

 6面それぞれに TR-808 のサウンドが割り当てられていて、中央のブロックを除く周囲8ブロックが8ステップのグリッドに相当します。
 また、各パートにはいくつかのサウンドバリエーションが登録されていて、中央のブロックを押して切り替えることができます。
  • BASS DRUM 3種類
  • SNARE DRUM 4種類
  • HI-HAT 4種類
  • SYMBAL 3種類
  • COWBELL 3種類
  • PERCUSSION 5種類
 シーケンスパターンは下の A/B ボタンで切り替えて2パターン作成できます。



 ブロックの列を指定方向にドラッグして回転させると1列ごとにパターンの入れ替えができます。

 キューブ全体の向きを変えたい場合はキューブ外をドラッグします。

 画面下にあるシャッフルボタンを押すとランダムに列を入れ替えながら連続再生されます。



 さらに隠し機能(?)として、ローカルにある mp3 ファイルもしくは ogg ファイルを、キューブへドラッグして指定のパートにドロップしてやると、プレイバックサンプラーとしても使えます。


[関連サイト]
 Chrome Cube Lab
 808 Cube


ROLAND TR-808 リズムマシン (premium vintage)

ROLAND TR-808 リズムマシン (premium vintage)

  • 出版社/メーカー: ローランド
  • メディア:
ルービックキューブ ver.2.0 【6面完成攻略書(LBL法)付属】

ルービックキューブ ver.2.0 【6面完成攻略書(LBL法)付属】

  • 出版社/メーカー: パルボックス
  • メディア: おもちゃ&ホビー

permalink
trackback


iPhoneを振ってMobile SafariからJavaScriptで加速度を検知してスレイベルを鳴らしてみる
» 音楽コンテンツ(作曲/演奏) 

[追記] 2014/12/13
新しいバージョンを公開しました。
[追記ここまで]

時期ネタを何かやってみようということで、iPhone を振って鳴らせるスレイベル (Sleigh Bells) のプチ Web アプリ的なページを作ってみました。
iOS 6 以降搭載の iPhone/iPod touch の Mobile Safari で動きます。


スレイベル (Sleigh Bells) とは?

スレイベルは木製の棒に鈴がたくさんついたパーカッションの一種です。
(輪っかに鈴がついた小型のタイプもあります)
名前や形は知らなくても、クリスマスの鈴の音といえば分かる人も多いのでは?



Sleigh Bells for iPhone の使い方


     
←左の QR コードをタップするか、iPhone のカメラで QR コードを読み取って Sleigh Bells のページにジャンプしてください。


使い方はいたってシンプルです。
  • まず「Sound Preview」ボタンで鈴の音量を確認・調整してください。
  • 次に iPhone を握って手首のスナップをきかせて振ってみてください。
  • 反応が悪い場合は、振る速度を速くするか、感度を低くしてみてください。

  振るときに iPhone がすっぽ抜けないように十分注意してください。
  (万が一 iPhone を落として壊してもこちらは責任は負いません)

プログラムコードについて

短時間で作ったサンプルレベルの大雑把なプログラムではありますがついでに少しだけ説明しておきます。
プログラムに興味がない人はここから先はスルーしてください。

 UI 部分はお手軽な jQuery + jQuery UI の組み合わせで、ただしスライダーの動作は標準の jQuery UI ではタッチドラッグができないので、jquery-ui-touch-punch を利用しました。

↓JavaScript の部分だけ抜粋
var context;
var buffer = null;
var threshold = 0;
var easing = false;

try{
  context = new webkitAudioContext();
  var request = new XMLHttpRequest();
  request.open("GET", "sleigh-bells.mp3", true);
  request.responseType = "arraybuffer";
  request.onload = function() {
    context.decodeAudioData(request.response, function(data){
      buffer = data;
    });
  }
  request.send();
}catch (e){
  alert("iOS 6 以降の mobile Safari で試してください");
}

function playSound(){
  var bufSrc = context.createBufferSource();
  bufSrc.buffer = buffer;
  bufSrc.connect(context.destination);
  bufSrc.noteOn(0);

  if(!easing){
    easing = true;
    $("body").effect("highlight",{color:'#FFF',easing:'easeInOutQuad'}, 700, function(){
      easing = false;
    });
  }
}

function setThreshold(value){
  threshold = value;
  $("#threshold-value").text("Sensitivity: " + threshold);
}

$(function(){
  setThreshold(1500);

  window.addEventListener("devicemotion", function(e){
    if(Math.floor(e.acceleration.x * 100) > threshold){
      playSound();
    }
  });

  $("#preview").button().click(function(){
    playSound();
  });

  $("#threshold-slider").slider({
    min: 0,
    max: 3000,
    value: threshold,
    change: function(event, ui){
      setThreshold(ui.value);
    }
  }).draggable();
});

» 加速度センサーのイベント devicemotion
 iOS はバージョン 4.2 から加速度センサーの値を読み出すことができる devicemotion イベントが追加されていて、Safari の JavaScript からイベントハンドラを指定してリアルタイムに現在値を取得することができます。

 » Safari Developer Library - DeviceMotionEvent Class Reference

function deviceMotion(e){
// e.acceleration.x
// e.acceleration.y
// e.acceleration.z
// e.accelerationIncludingGravity.x
// e.accelerationIncludingGravity.y
// e.accelerationIncludingGravity.z
// e.rotationRate.alpha
// e.rotationRate.beta
// e.rotationRate.gamma
}

window.addEventListener("devicemotion", deviceMotion);

 Sleigh Bells では X 方向の加速度変化 (e.acceleration.x) だけを利用しています。X 方向は iPhone 本体正面から見て左右に動かしたときの移動で、左方向がマイナスで右方向がプラスの値になります。今回の場合は握ったときに本体側面が対面になるので前後に振る動作で X 軸が変化します。

 指定した加速度に達したときにスレイベルの音を鳴らす関数 playSound() を呼び出します。スレイベルを振る演奏操作的には振出動作と引き動作の途中は鳴らずに、手前に強く押し出して止めたとき(加速度がマイナスからプラスの最大値に変化するとき)だけ鳴ればよいので、プラス方向でしきい値を超えたときだけ反応するようにしてあります。

» Mobile Safari の Web Audio API
 サウンドの再生は Mobile Safari で利用できる WebKit の Web Audio API を使っています。
 最初は HTML5 Audio オブジェクトを使おうと思っていたのですが、Mobile Safari は play() を呼び出すたびに音声ファイルを毎回律儀にサーバーからロードしてしまい、再生が開始されるのが遅すぎて当初想定したレスポンスが得られませんでした。

 なにか別の方法はないものかと調べたてみら、iOS 6 から Mobile Safari が Web Audio API に対応していることが分かって、試しにやってみたらうまいこと動いてくれました。

 Safari Developer Library - Playing Sounds with the Web Audio API

 鈴の音の mp3 ファイルを Ajax 経由でバッファに読み込んで、指定のタイミングで noteOn() するだけのシンプルな作りです。

try{
  context = new webkitAudioContext();
  var request = new XMLHttpRequest();
  request.open("GET", "sleigh-bells.mp3", true);
  request.responseType = "arraybuffer";
  request.onload = function() {
    context.decodeAudioData(request.response, function(data){
      buffer = data;
    });
  }
  request.send();
}catch (e){
}

function playSound(){
  var bufSrc = context.createBufferSource();
  bufSrc.buffer = buffer;
  bufSrc.connect(context.destination);
  bufSrc.noteOn(0);
}

 ただ、ページがロードされた直後は devicemotion 内で呼び出している再生が動かないというよく分からない現象がでてます。(まだ原因は分かっていません)
 ボタンで手動で1回再生した後だと反応してくれるので、とりあえず音量確認用ということにしてボタンを設けました。

一応自分の iPhone 5s (iOS 7.0.4) では動いてます。
他のパターンではテストしてないので、もしかしたらちゃんと動かないこともあるかもしれません。

あと、試すときはくれぐれも iPhone を落とさないように注意してくださいね。


[追記] 2013/12/19
コメント欄の aike さんから教えて頂いた情報によると、デベロッパーライブラリのドキュメントに以下の注意書きがありました。

Note: On iOS, the Web Audio API requires sounds to be triggered from an explicit user action, such as a tap. Calling noteOn() from an onload event will not play sound.

iOS の Web Audio API のサウンドは画面タップなどのようなユーザーアクションのトリガーによる再生が必要で、ページロード後に noteOn() を直接呼び出しても反応しないのは仕様なのだそうです。
deviceMotion イベント内で noteOn() を呼ぶのもこれに該当します。

[関連サイト]
 jQuery
 jQuery UI
 jquery-ui-touch-punch
 Web Audio API
 Safari Developer Library


permalink
trackback


JavaScriptで手軽にチップチューンサウンドが演奏できるライブラリ 8bit.js
» 音楽コンテンツ(作曲/演奏) 

IDEA*IDEA で紹介されていた、ブラウザでチップチューサウンドが手軽に演奏できる JavaScript のライブラリ 8bit.js です。

オシレーターの音源は Web Audio API が使われているので、Chrome もしくは Mac の場合は最新の Safari に対応しています。
(Web Audio API 非対応の Firefox、IE では残念ながら動きません)



 ライブラリは演奏全体の操作を受け持つメインの EightBit クラスと、ノートの発音を受け持つ Instrument クラスで構成されています。

 API の構成はシンプルで、簡単に言ってしまえば MML(Music Macro Language) のマクロを関数単位で呼び出すような仕様になっています。



 発音を行う Instrument のインスタンスは EightBit クラスの createInstrument() で波形を指定して生成します。
 複数生成してメロディとベースなど複数パートを同時演奏させることが可能です。

 note() で音程と音長、休符の場合は rest() で音長を指定、また note() は複数の音程をカンマで区切って複数並べれば和音を発音できます。
 メソッドチェーンにも対応しているので、note()、rest() をつなげて続けて書くこともできます。


デモの3曲はオンライン上でそのままソースの編集や実行テストができる Plunker で公開されているので、いろいろ改造して試してみるとよいかも。

そういえば、Firefox は次期メジャーバージョンの Ver.24 から Web Audio API が正式サポートされるようですね。
すでに Nightly Buildpre-beta (Aurora) には実装されているようです。

 » Web Audio API comes to Firefox - Mozilla Hacks


[関連サイト]
 8bit.js
 Plunker
 Mozilla Hacks - the Web developer blog
 IDEA*IDEA
permalink
trackback


前の5件 | 次の5件
音楽コンテンツ(作曲/演奏)