ブラウザでMMLを演奏するChrome拡張作った - aike’s blog
ブラウザでMML(Music Macro Language)の文字列を選択してCtrl-Cを押すと音楽が流れるChrome拡張を作りました。 Googleウェブストアからインストールできます。 https://goo.gl/0UJQcT ソースはこちら https://github.com/aike/TSSCCjs 実行例 http://youtube.com/watch?v=o-IzrXaqIbM 今から10年くらい前、ネットの掲示板上でMMLによる音楽が盛り上がったことがありました。添付ファイルなどではなく、掲示板のテキストとして直接貼られた10行程度のMMLでも驚くほどリッチな楽曲が再現できるため、いかに短いMMLでリアルな音楽を表現するか、技術の競い合いのような文化が生まれていました。 当時、再生ツールとして使われていたのが、keimさんが作られたTSS Clipboard Pla
UnityでサイドチェーンしてSEとBGMの自動バランス調整する話 - aike’s blog
最近のUnityは音楽制作用DAWのような機能が充実してて、試しにサイドチェーンできるか調べたらできたのでメモ。 サイドチェーンというのは音圧上げないと死ぬ病の人たちが発明した音楽用コンプレッサーの使い方で、キック（バスドラム）の音が鳴った瞬間、それ以外のシンセやベースなどの音量を自動的に下げる、というものです。これにより音圧をギリギリまで上げつつ、キックの音をしっかり目立たせ、バックの音にもンッアッンッアッというリズムを生み出すという一粒で三度美味しいワザです。 ゲーム制作でいうと、SEやセリフの音が鳴るときにBGMを自動的に下げるというような、よくある状況に応用できます。 早速やってみましょう。 UnityのWindowメニューからAudio Mixerを選択します。大丈夫、あなたのPersonal(無償)版でもできますから。 全然ミキサーっぽくない表示が出て若干不安になりますが、勇気
今夜わかるFM音源 - aike’s blog
reface DXいいですね。あえてDX7シリーズに近い音源仕様と、現代的な使いやすい操作性とを組み合わせることで、FM音源本来の音作りの楽しさがあります。とはいえ、先日Web Music Developer Meetup@Sapporoの参加者と話して、こういったイベントに参加するような人でも、FM音源でイメージどおりの音をつくるのは難しいと感じる人が多いようでした。そんなわけで、今回はちょっと実践的な音作り方法について書いてみようと思います。 ■キャリアとモジュレータ FM音源はオペレータと呼ばれる発振モジュールを組み合わせて音をつくります。変調される側をキャリア、する側をモジュレータと呼びますが、これは相対的なもので、アルゴリズムによっては変調されたキャリアがまた別のオペレータのモジュレータになることもあります。 と、いうようなよくある説明を読んでもなかなか音色にむすびつかないですよ
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
RICOH THETAとJavaScriptでハコスコ用コンテンツを作るの巻 - aike’s blog
ハコスコは、iPhoneさえあればわずか1000円で実現できてしまうヘッドマウントディスプレイです。ただまだ視聴できるコンテンツがそれほど多くありません。 そんなわけで今回はRICOH THETAを使ってハコスコ用のコンテンツを自作してしまおうという企画です。 THETA用オレオレビューアライブラリthview.jsを最近アップデートしました。iPhoneの加速度センサーの情報を見て傾きに合わせて全天球画像を表示します。HTMLとJavaScriptだけなので、本格的な開発環境は不要でテキストエディタとウェブサーバだけあれば誰でも作れます。 ※WebGLの関係上、iOSのバージョンは8にする必要があります。 デモ1 戸棚の中 HTML的にはこんな感じです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <tit
ブラウザでVJプログラム書くときのフレームワーク作った - aike’s blog
JavaScriptでオーディオとビジュアルの扱い方をおぼえると、人類はみなVJアプリを作るようになります。ぼくの周りの５人くらいの人類はそうでした。 自分もいろいろビジュアライザーアプリを作ってイベントでブラウザVJやったりしました。ただ、ひとつひとつはそれなりに面白い視覚効果のプログラムでも、それだけでは長時間のイベントに対応できません。通常のVJのように、イベントの進行やDJの音楽の緩急に合わせて効果的な視覚効果を選択して次々と切り替えていきたいところです。 そんなわけで、複数の視覚効果をクロスフェードで切り替えられるようなブラウザVJフレームワークを作りました。それぞれの視覚効果や各種の機能をプラグインとして仕様化し、この仕様に合わせれば拡張機能プラグインを自作できるようになっています。 https://github.com/aike/jsdrome http://aikelab.
Webでポリシンセ作るときのテンプレ作った - aike’s blog
もう半年以上前に作ったやつですけどせっかくなので解説。 JavaScriptでプログラミングをやっていると人は誰しもシンセを作りたくなるかと思います。僕も３年くらい前にWeb Audio Synthというのを作りました。 いまはウェブブラウザもオーディオやMIDIのAPIが充実してきてシンプルな単音のシンセを作るのは簡単になりました。でもちょっと和音を弾きたくなってポリシンセに拡張しようと思うとこれがけっこう大変だったりします。 同時発音数6ボイスのポリシンセを作るとなったら、ほんとうにモノシンセを6個分実装する必要があります。さらに、和音を弾いている最中に追加で音を重ねるときなど空いているボイスをさがして割り当てるといったオブジェクトプーリングの仕組みが必要になります。 また、いくつかシンセを作っていると、鍵盤のUIやMIDI入力の対応など定型的で毎回同じ作業があることに気づいてきます。
全天球ビューワーPaView.jsの動作環境とパノラマ飛行動画 - aike’s blog
先日作った全天球ビューワーPaView.jsですが、できるだけ多くのブラウザで表示できるよう調べてみました。 クロスブラウザで問題になるところは、マウスイベント、WebGLで動画のテクスチャマッピングしているところ、対応動画フォーマットあたりです。 ■Windows Windows PCのブラウザは素直なものが多いようで、マウスイベントの処理をブラウザごとに書くくらいで、わりとそのまま動きました。Windows7上のChrome、Firefox、IEで正常に動くことを確認しました。 ■Mac OS Macの場合、Safari用のマウスイベント処理を書いたら正常に動きました。Firefoxは.mp4の動画に対応しておらず（特許関係らしいです）、WebMで表示するようにしてみました。サーバ上に.mp4と同名の.webmのファイルを用意しておけば、.mp4を.webmとJSが読み替えて無理矢理表
MMDの全天球パノラマ動画を作ってみた - aike’s blog
THETAからはじまって最近は動画にいたるまで、このところ全天球パノラマに興味を持っていたところ、先日こんなツイートを見かけました。 GoPro 6台からの映像を合成することで全球映像ができるのであれば、MMDのカメラを6パターンで出力すれば、できるのかな？— なヲタ級flagship - SKB06 (@nawota1105) 2014, 7月 20 通常、全天球パノラマ動画は6台のGoProで実写撮影した動画を、専用のスティッチングソフトを使って手作業で合成していきます。MMDの場合最初から仮想空間のCGなので、わざわざ6本のムービーとして出力して再合成する意味はあんまりないのですが、スティッチングの練習になりそうだし面白そうなのでやってみました。 http://sound.jp/aike/paview/index6.html FL-chan−TYPEアノマロ モデル by アノマロか
ブラウザで波紋エフェクト出すやつ作った - aike’s blog
最近プレゼンとかでウェブベースのアプリを実演する機会がわりとあったりします。そのときちょっと不便なのは、マウスをどのように操作して、どこでどういう風にクリックしたのかがいまいち伝わりにくいということで。まあしょうがないかと思ってたんですが。 そうしたら次期Androidのマテリアルデザインでは波紋エフェクトが使われるようになるとか。あー、その手があったか。そういえば、スマホじゃなくてPCの世界ではそういうのときどき見たことあるな、と思ってJavaScriptで作ってみました。 http://aikelab.net/visibletouch/ https://github.com/aike/VisibleTouch.js 発想の元はマテリアルデザインの波紋エフェクトですが、プレゼン用ということで最終的にいろいろ違った感じになりました。たぶん探せば同じようなツールはすでにたくさんあって101回
片手間のJavaScriptでもテストがしたい！ - aike’s blog
テストしたくないでござる。テストしたくないでござる。 いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。 これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがす
全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。 こんなやつ。 http://home360.co.jp/freedom360.html http://freedom360.us/ 要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。 そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。 そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみ
RICOH THETA画像を表示するJavaScriptライブラリ作った - aike’s blog
絶賛通常営業中。 普段からいろいろプログラムは作っているもののこのところ仕事が立て込んでいてブログが全然書けなかったので休み中に棚卸し的に書いていきます。 RICOH THETAの画像を公開するとなると公式サイトに上げるのが普通なんですがやっぱりそれなりに不満点もあって、全公開になってしまうとか、ファーストビューが指定できないとか、顔や見せたくないところを加工してから公開したいとかそういうことがやりにくくてアップに躊躇したりということもあったり。 そんなわけで、とりあえず自サイトに上げて表示できるようなライブラリをThree.jsを使って作ってみました。まだまだ機能は少ないですが徐々に改善する予定です。 本当はJavaScriptで書けばPCでもスマホでも同じように見せられるかと思って作ったんですがiOSのブラウザはWebGLをフルサポートしてないみたいでだめでした。あと、PCでも現行のS
Web MIDI APIを使ってMIDI鍵盤からブラウザコントロール - aike’s blog
ウェブブラウザにWeb MIDI APIが少しずつ実装されてきて、Mac OS XのChrome Canary版だとプラグインなしで普通に使えるくらいになってきました。 Web MIDI APIを使うとJavaScriptでさまざまなハードウェア音源を鳴らすことができます。ただそれは一側面に過ぎず、重要なのはウェブブラウザ(JavaScript)がついにリアルワールドとつながったということです。WebRTCもウェブと現実世界をつなげる技術ではありますが、MIDIはなにしろ30年も歴史があって、そのシンプルなプロトコル仕様ゆえに当初の演奏情報以外のコントロールにもいろいろ汎用的に使われてたりもします。 また、Web MIDI APIは電子楽器を制御して音を鳴らすだけでなく、MIDI鍵盤やターンテーブル型のDJコントローラーのようなハードウェアからの入力を受け付けることができます。ということは
不思議な円グラフを描くウェブサービス作ったよ - aike’s blog
最近ツイッター界隈で不思議な円グラフを見かけました。 こんなやつです。 ちょっと調べてみると昨年の報道番組からキャプチャした映像のようです。 このグラフを見て、その手があったか！という新鮮な驚きを感じました。これまでの円グラフの常識にとらわれず、円の中心からあえてずらした位置から分割することで飛躍的に表現の幅を向上させています。無味乾燥で機械的なグラフにくらべて製作者の強い思いがぐっと伝わってきます。なんとイノベーティブでなんとワンダーなグラフなのでしょう。 でも、このグラフ、実際に描こうと思うとけっこう面倒です。Excelのグラフ機能をみても中心点の位置をずらす方法はなさそうです。 そんなわけでゆがんだ円グラフを描くウェブサービスを作りました。 ワンダー・グラフ・ジェネレイター 項目の追加変更はもちろん、中心をずらしたり、楕円形にして項目を強調したりできます。円グラフの秘められた表現力を
通勤用シンセにKORG M01D買ったよー - aike’s blog
最近転職して勤務地が遠くなったので毎日高速バスで通勤するという水曜どうでしょうサイコロの旅みたいな生活をしています。そんなわけで移動中の時間にDTM的なものができないかいろいろ考えてました。ノートPCもカバンに入ってるんですがやっぱり隣に人が座っていたりするとひじがぶつかったりしてちょっと狭い。すでに持ってるDS-10か、それともちょうど今月発売のvolca keysかM01Dにしようかと考えてM01Dを買ってみました。 決め手としては、音色作りというより曲のスケッチに向いている点です。なにしろM01Dは割り切り方がすごい。シンセといっても音色関係のパラメータはAttackとReleaseだけ。音色作るのってそれはそれですごく楽しいんだけど、曲を作るって決めたときはこのくらい制限がある方が悩まなくていい感じです。エフェクトは、トラックごとにON/OFFできるものの、全体で1種類リバーブかデ
エクスコムの情報流出はシステム設計というより業務設計がだめな件 - aike’s blog
そんなわけでクレジットカード再発行しました。そうです流出です。今年の3月にアメリカ行ったときに海外旅行者向けWiFiルーターレンタル業者を探してたらエクスコムが安かったので申し込みました。まさかこんなことになろうとは、という感じでくやしかったのでブログのネタにしてみました。 申し込みから返却まで経緯はこんな感じでした。 ■3月5日 申し込み エクスコムのウェブフォームから住所氏名とともにクレジットカード情報を入力して申し込んだら、こんな確認メールが返ってきました。一部省略、伏字にしています。 Subject: レンタルお申し込みありがとうございます Date: 5 Mar 2013 10:46:21 +0900 From: エクスコムグローバル株式会社 この度は、お申込みいただき、誠にありがとうございます。 ご利用に際しては、以下の注意事項をご確認ください。 （略） ━━━━━━━━━━━
Web Audio APIでオシレーターの実装方式いろいろ試してみた - aike’s blog
あなたの好きな波形は何ですか。人はだれしも思い入れのある波形があるかと思います。正弦波や矩形波が好きなかたもいるようですが僕はだんぜんノコギリ波派です。ノコギリ波の優しくて存在感のある音色につつまれているだけでしあわせな気持ちになります。 そんなわけでみなさんこれから多くのシンセをWeb Audio APIで作成するかと思いますが、いくつかあるノコギリ波のオシレーター実装方法について比較してみたいと思います。また、ソフトシンセを作るうえで避けて通れないエイリアスノイズについて方式ごとの差異を聴き比べてみます。 こちらのページで実際に聴きながら読んでください。(Chrome推奨) http://aikelab.net/sawwave/ ■ナイーブな実装 return 1.0 - (this.phase / Math.PI); こんな感じの処理を1サンプルごとに呼ぶとノコギリ波になります。高い
JavaScriptにsleepを実装しようとして気づいたら新言語を作ってた話 - aike’s blog
あのですね、JavaScriptにsleep()とかwait()みたいなのってほしいじゃないですか。で、調べてみると標準にはなくて作れるには作れるけどブラウザ依存だったりビジーループだったりJava Applet併用だったりしてがっかりするじゃないですか。 ぼくは1年半くらい前に「竹内関数で音楽生成」っていうエントリーを書いたんですが、当然これをJavaScriptで計算しながら音を鳴らすページを作りたくなりますよね。ですよね。こう見えても昔はN88-BASICでCMD PLAYとかばりばり使ってたくちなんで、そのくらい簡単だと思うじゃないですか。そしたらもう当時はAudio APIも出たばかりで情報もすくなくてブラウザ依存で、しかもJavaScriptでsleepできないしふんだりけったりで最初の一歩も踏み出せない状態。 そんなわけでなんとか手はないかとこの1年以上ずっと試行錯誤してきて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でワードアートするJSライブラリ作った - aike’s blog
