はてなブックマーク

Web Audio APIを使えばブラウザでも簡単に音楽プログラミングができる！と思いたいのですが、どうやらAPIがあるだけでは不十分で少しばかりは音楽プログラミングの知識が必要そうです。ということで、この記事では世界で最も有名な効果音「コインの音」を題材に楽譜のパラメータ化とWeb Audio APIでの実装をできるだけ丁寧に解説します。 楽譜 楽譜を手軽に探すには「coin sheet music」などで画像検索します。コインの音は商標出願されていますので、今回はそれを参考にします。（画像は商標プラットフォームのスクリーンショットです。） この楽譜からは次の点が読み取れます。 テンポが180 最初の音が十六分音符の「シ」で次の音は「ミ」 全体の長さは四分音符が3つぶん 楽譜がまったく読めないという場合は、音階（ドレミファソラシド）と音長（四分音符とか）が読める程度に覚えれば良いと思いま

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

2016.09.08 追記 AudioWorkerは編纂中の仕様から削除されました。Web Audio API先生の次回作AudioWorkletにご期待ください！！ Web Audio API には ScriptProcessorNode という、JavaScript で信号処理を記述するための部品があります。Web Audio API で用意されている部品の組み合わせではやりようがない処理をしたいときに重宝するのですが、最新のドラフト仕様では DEPRECATED となっていて将来的には廃止されるようです。 そして廃止される ScriptProcessorNode に変わって提案されているのが AudioWorker という仕組みで、ScriptProcessorNode との大きな違いとしてメインスレッドで行っていた信号処理をワーカースレッドで行うようになります。また、任意の Aud

この記事は Node.js Advent Calendar 2015 3日目の記事です。 ちょうどひと月前、10月24日から11月3日にかけて 奈良・町家の芸術祭はならぁと というイベントがあり、そこで ADSR展 というインスタレーション作品群の制作に携わりました。 そのシステムを Node.js を使って構築したので、その構成について書きます。 作品概要 どこか懐かしく美しい町の空間に、光と音による体験型作品を点在させる。体験者は夕刻に街並みを歩いていると、ふと風景の中に、微小に、時にダイナミックに変化する音や灯火の存在に気づくことになる。目前の風景（空間）が楽譜化され、音と光のパターンが立ち現れる。この音は、スマートフォンを用いて、光の変化に完全同期して生成される。 技術よりの視点から情緒なく説明すると、町のいくつかの場所に設置された電球と音の鳴るガジェット(モーター式オルガンや電磁

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Web Audio API の仕様は日々 GitHub上で議論 されていて、ある程度同意が得られたものは ドラフトページ で公開されています。仕様のブラッシュアップのほかに追加される API や変更のある API があり、それらはちらほらとブラウザに実装もされてきているので、簡単な説明とサポート状況、ポリフィルについてまとめました。 この記事に書いてあるポリフィルは下記のリポジトリにまとめてあります。 また、各API対応状況は下記のページでも確認できます。 http://mohayonao.github.io/web-audio-api-shim/test/impl.html http://compatibility.shwups-cms.ch/en/home Microsoft Edge / Safari 9 の対応状況が調べられていないので、どなたか情報ください！！ 新しく追加されるA

WebWorker の作り方を4つ紹介するついでに、ライブラリ作るマンから見た それぞれの所感 と node.js でも動かせる & テストしやすい インラインワーカーの技法 について書きます。 1. 外部のワーカーファイルを読み込む 基本のやり方。 一番わかりやすいので良いけど、ライブラリとして配布することを考えると複数ファイルの管理をする/してもらうのが面倒い。ライブラリの中で書くならワーカーのパスは設定で変更できるようにしたほうが良い。 シンプルでわかりやすい 管理が面倒い var worker = new Worker("worker.js"); worker.onmessage = function(e) { console.log(e.data); // (3) hello!! }; worker.postMessage("hello"); // (1)

Taming the asynchronous beast with ES7 babel の experimental に ES7 の Async/Await が入ったというので、さっそく導入してみた。対象は画像を点字を変換するわりかしどうでも良いモジュール。 seurat - JavaScript utility to generate a braille text from an image 導入前 ファイル読み込みや画像の変換に非同期処理を多用しており、node.js スタイルの 非同期API(コールバックを渡すやつ) を prominence というユーティリティ関数で Promise 化していたが、行ごとに then が出てきたり、複数の値を渡すために Promise.all を使ったりと、あまり読みやすいとは言えないコードだった。(コールバック地獄になるよりはマシだと思うけど.

というのを考えたので紹介します。 2015.09.04 内容が古くなっていたので修正 リンティングツールを jshint から eslint に変更 テストでの power-assert 用のオプション指定方法の変更 概要 基本的にはこの記事 ライブラリをES6で書いて公開する所から始めよう (必読) と同じで、それにいくつかのタスクを追加しています。やることと使用しているライブラリは以下の通りです。 ES6のコードをES5ベースに変換する / babel ブラウザ用コードを生成する / browserify ミニファイする / UglifyJS テストする / mocha, power-assert カバレッジレポートを作る / isparta リンティング / eslint ディレクトリ構成 build: ブラウザ用にビルドされたコード bower install されたときに読み込ま

Web Audio API を中心に音を扱うライブラリや記事をざっとまとめました。 サウンドファイルの再生に特化したやつ ゲーム用途とかならこのあたりで十分っぽい howler.js SoundJS 簡単に演奏できるやつ beeplay / 記事 メソッドチェーンで音をつなげていく abeck ABC記譜法 で書ける テンプレート的なやつ TemplateSynth / 記事 ポリシンセ用のテンプレート mml-emitter MMLをイベントとして発火する 信号処理するやつ Tone.js 必要な機能がひととおり揃っている tuna Web Audio API 用のエフェクター flocking 音の構造をJSONで書く。node.jsでも動く。 neume.js jQueryっぽく書けるインターフェースが特徴だけど色々雑い。 pico.js Web Audio API, flash f

WebKit (Chrome, Opera, Safari) リポジトリ WebKit/webkit インターフェース https://github.com/WebKit/webkit/tree/master/Source/WebCore/Modules/webaudio 音響処理はここに書かれている https://github.com/WebKit/webkit/tree/master/Source/WebCore/platform/audio Gecko (Firefox) リポジトリ mozilla/gecko-dev インターフェース https://github.com/mozilla/gecko-dev/tree/master/dom/media/webaudio 音響処理はblinkから持ってきている https://github.com/mozilla/gecko-dev

JavaScriptで定期的な処理を行う場合、window.setIntervalを使いますが、ChromeやFirefoxのwindow.setIntervalは別タブを選択すると精度（実行間隔）が落ち、例えばゲームや音声処理などで精度を保ちたい場合に問題になることがあります。 WebWorkersを使ってバックグラウンドでタイマーを動作させると、別タブを選択しても精度の落ちないタイマーを作ることができます。 var MutekiTimer = (function() { var MutekiTimer = function() { initialize.apply(this, arguments); }, $this = MutekiTimer.prototype; var TIMER_PATH = (function() { var BlobBuilder, URL, builder

builder = BlobBuilder(); builder.append(src); blog = builder.getBlob();

背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }