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

HTML5/JavaScriptでMIDIデータファイルを読み込んで扱える MIDI.js
» 音楽コンテンツ(楽曲再生) 

お気に入りのブログ IDEA*IDEA で紹介されていた HTML5 + JavaScript で MIDI データを扱うコンポーネント MIDI.js が面白そうだったのでここでも紹介。


注意: MIDI.js のサイトを開くと音が鳴るデモが自動再生されます

 MIDI.js は Web アプリから JavaScript で MIDI データを扱うためのコンポーネントパッケージで、github でソースコード一式が公開されています。

MIDI.js のモジュール

MIDI.* が MIDI データ処理を行うメインのクラスで、その他は MIDI とは直接関係がない補助的なクラスが含まれます。
  • MIDI.loadPlugin.js
    音色データのロードなどプラグイン全体の再生準備を行います。
  • MIDI.Soundfont.js
    base64 形式に変換した SoundFont 形式の音色データを読み込みます。
  • MIDI.Plugin.js
    MIDI データを1コマンド単位で再生、送信する関数群です。 単音ノート ON/OFF、コードノート ON/OFF、Ch 指定、GM 音色指定などがあります。
  • MIDI.Player.js
    MIDI データをストリーミング再生するプレイヤーの操作を行う関数群です。
  • Color.js
    RGB のカラーコードを指定した色空間の形式に変換します。
  • DOMLoader.script.js
    指定したスクリプトを同期/非同期で読み込むローダーです。
  • DOMLoader.XMLHttp.js
    クロスブラウザ対応の XMLHttpd リクエストの送受信を処理します。
  • MusicTheory.Synesthesia.js
    ノートを色に変換してマッピングします。

 出力処理は、Chrome の場合は Web Audio API が使われ、Safari や Firefox、IE10 などその他の HTML5 対応ブラウザではブラウザが HTML5 の Audio オブジェクトが使われるようです。
 IE9 は HTML5 の Audio 実装が不十分なため再生はできても音飛びが発生すると思われます。

 その他にも SoundManager2 で Flash を使った再生や、midibridge で Java アプレットを使った再生にも対応しているようです。(動作未確認)

 また、midibridge は JavaScript から Java 経由で MIDI デバイスの入出力が操作できるので、PC につないだ外部 MIDI デバイスを鳴らしたり、外部 MIDI コントローラーから操作したりといったこともできるかもしれません。(動作未確認)

MIDI.js が使われたデモ

MIDI.js のページで紹介されているデモの中からいくつか紹介しておきます。
(Google Chrome での実行を推奨)


» Color Piano
音ゲー風のビジュアルピアノプレイヤーです。
外部 MIDI ファイルの URL を指定して再生することもできます。


» Euphony
こちらは 3D で表示されるビジュアルピアノプレイヤーです。
マウスドラッグで視点をグリグリ変えることができます。


» Simon Says
音感連続記憶ゲームです。クリアするごとに1音ずつ増えていきます。


リアルな楽器音を使いたい場合は音色のサンプルデータファイルを読み込む必要があるので、若干ロードに時間がかかるのがネックではありますが、JavaScript でここまでできるなんてすごいですね。

Web Audio API なら JavaScript で波形を生成して出力できるので、その辺カスタマイズしたりするのも面白いかもしれません。

Web Audio APIWeb MIDI API が標準化されて主要ブラウザに実装される日が早く来てほしい…

[関連サイト]
 MIDI.js - Sequencing in Javascript
 SoundManager2
 midibridge
 Web Audio API
 Web MIDI API
 Color Piano
 Euphony
 Simon Says
 IDEA*IDEA
nice!(2)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


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





for iPhone/iPod touch





for Mac





» スポンサーリンク
DMR

サウンドハウス

HTML5とJavaScriptで描かれたボールが演奏するバッハのプレリュード : BAROQUE.ME
» 音楽コンテンツ(楽曲再生) 

HTML5 と JavaScript で描かれた4つのボールがバッハの無伴奏チェロ組曲第1番「プレリュード」を淡々と演奏していく BAROQUE.ME



ボールをつかんで弾くタイミングを変えてやることもできます。
作者の Alexander Chen さんのブログに内容の解説があります。

[ここに Vimeo プレイヤーが表示されます]
http://vimeo.com/31179423

淡々としたミニマルなグラフィックとバッハのプレリュードの組み合わせがなんか催眠術みたいで面白いですね。

ちなみに Chen さんは Google Creative Lab で働いていて、去年話題になったレスポール誕生記念のギター風 Google ロゴのプロジェクトにも参加しています。

[関連サイト]
 BAROQUE.ME
 Alexander Chen
 Google Doodles - Les Paul's 96th Birthday


バッハ:無伴奏チェロ組曲(全曲)

バッハ:無伴奏チェロ組曲(全曲)

  • アーティスト: ビルスマ(アンナー),バッハ
  • 出版社/メーカー: ソニーレコード
  • 発売日: 1999/09/22
  • メディア: CD
nice!(2)  コメント(2)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


古い宇宙船や人工衛星の通信音をMP3で公開している Sven's Space Place
» 音楽コンテンツ(楽曲再生) 

スウェーデンの Sven Grahn さんが自身のサイト Sven's Space Place で公開している古い宇宙船や人工衛星の通信音を集めた貴重な MP3 コレクションを紹介。



 1996年から開設されている息の長いサイトで、この手の分野に興味がある人には有名なサイトなのかもしれません。(自分も過去に何度か訪れたことがある)



てっとり早く試聴したい人はこちらで↓



スマホの着信音に使ったりすると面白いと思いかも。

[関連サイト]
 Sven's Space Place
nice!(4)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


NASAがスマホの着信音に使えるスペースシャトルやアポロの音声ファイルを配布 NASA Sounds
» 音楽コンテンツ(楽曲再生) 

NASA が公式サイト内の Connect and Collaborate With NASA にある NASA Sounds で、スペースシャトルやアポロなどの交信音声や機動音を MP3、M4R ファイルで公開しています。



音声ファイルは4つのカテゴリーに Android 用の MP3、iPhone 用の M4R がそれぞれ36個。



Android は公式アプリの NASA App (無料)でも同じものがダウンロードできます。
iPhone の着信音設定手順はこちら。(英語)

てっとり早く試聴したい人はこちらで↓



[関連サイト]
 NASA
 NASA Sounds
 Android マーケット - NASA App


Apollo: Atmospheres and Soundtracks/Remastered

Apollo: Atmospheres and Soundtracks/Remastered

  • アーティスト: Brian Eno
  • 出版社/メーカー: Virgin Catalogue
  • 発売日: 2009/07/06
  • メディア: CD

nice!(5)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


虫の声で作った曲 [再掲載]
» 音楽コンテンツ(楽曲再生) 

5年ほど前に作った曲で、3年前にここに載せたものを再掲載。
夏や秋に聴ける虫の声をいろいろ使ったアンビエントな曲です。



MP3が欲しい人はプレイヤーの右上のダウンロードボタンからどうぞ。
秋の夜長の眠れない夜、睡眠導入にどうぞ。

[追記] 2013/0704
Flash Player から SoundCloud に埋め込みプレイヤーを変更しました。


この記事で使っている曲(Crickets' Clicks)は TAN に著作権があります
Creative Commons License - Creative Commons クリエイティブ・コモンズ>帰属 - 非営利 - 派生禁止 2.1 日本
nice!(1)  コメント(0)  トラックバック(0)   » カテゴリー:音楽コンテンツ(楽曲再生)
permalink
trackback
このエントリーをはてなブックマークに追加


前の5件 | -
音楽コンテンツ(楽曲再生)