If you're having trouble accessing Google Search, pleaseclick here, or sendfeedback.

ブラウザからビートが生まれる。MIDI対応でパッドでもプレイできるRolandのTRライクなドラムマシン ここ最近、ブラウザ上で音楽を作れるウェブアプリがリリースされ話題を集めていますが、またしても話題になりそうなアプリの登場です。音声を処理・合成するためのWebアプリ向けJavaScript APIのWeb Audio APIで作られた「WebX0X」は、シーケンサー機能を搭載したドラムマシンで、ブラウザ上でドラムの打ち込みを楽しむことができます。 見た目からもお分かりの通りWebX0Xは、Rolandのドラムマシンにインスパイアされていて、TR-606とTR-808を基にしたオシレータにより発振されます。4ボイスのWebX0Xでは、キック、スネア、ハイハット、カウベルの4つのサウンドのパターンを作成できます。 オシレータ、フィルター、エンベロープなどのシンプルな構成で、本家Roland
こんにちは。フロントエンドエンジニアのつっちーです。 前回、前々回では、音源として音声ファイルを扱いました。 次は音源もWebAudioAPIで生成してみましょう。 ・この記事を読むときは、お使いのブラウザの他のタブ、ウインドウでWebAudioAPIが使用されていないことをご確認願います。 ・コードプレビューのJS全体が即時関数で囲われている場合、その即時関数は実際には不要であると考えてください。 Webブラウザは同時に存在できるAudioContextオブジェクトの数に制限をかけています。 通常、AudioContextオブジェクトが1アプリケーションに複数必要となることはなく、この制限に困ることはありません。 ただし、複数のタブ、ウインドウ、iframeでWebAudioAPIが使用される場合にはエラー発生の可能性があるため、本記事では処理を即時終了させることで対策を行っております。
こんにちは。フロントエンドエンジニアのつっちーです。 前回は、WebAudioAPIを使って、Webブラウザで動作するピアノを作成しました。 みなさんのブラウザでも弾くことができましたでしょうか。 ピアノの実装では音源と最終出力を直接接続しましたが、次は中間処理を挟んでみましょう。 この中間処理こそ、WebAudioAPIならではの機能であり、HTMLのAudio要素との最大の違いと言える部分です。 雨音を再生し続けてくれるサイト リラックスや集中のためのBGMとして、雨音を延々と再生し続けてくれる、そんなWebサイトがいくつも公開されています。 たとえばこちら。 Rainy Mood http://www.rainymood.com/ 天気としては鬱陶しい雨ですが、こうして音だけ聴くと心地よく感じませんか? 今回は、WebAudioAPIの中間処理を使って、このような雨音再生機能に音質変
はじめまして。フロントエンドエンジニアのつっちーです。 あれやこれや、いろいろできちゃうwebブラウザ、楽しいですよね。 canvas要素でゲームや3DCGを表現できたり、WebRTCでブラウザ間のP2P通信なんかも可能になっていたり。 そんな中でも、最近は音声を扱うものに興味があります。そこで今日は、webブラウザで音を扱う「WebAudioAPI」について、お話したいと思います。 「WebAudioAPI」とは? “a high-level JavaScript API for processing and synthesizing audio in web applications” 引用元:Web Audio API – W3C 翻訳すると、「webアプリケーション上で音声を処理・合成するための高レベルなJavaScript API」となります。 「Web Audio API」を用
・この記事を読むときは、お使いのブラウザの他のタブ、ウインドウでWebAudioAPIが使用されていないことをご確認願います。 ・コードプレビューのJS全体が即時関数で囲われている場合、その即時関数は実際には不要であると考えてください。 Webブラウザは同時に存在できるAudioContextオブジェクトの数に制限をかけています。 通常、AudioContextオブジェクトが1アプリケーションに複数必要となることはなく、この制限に困ることはありません。 ただし、複数のタブ、ウインドウ、iframeでWebAudioAPIが使用される場合にはエラー発生の可能性があるため、本記事では処理を即時終了させることで対策を行っております。 音源の情報を解析し視覚化するWebサイト Loop Waveform Visualizer https://airtightinteractive.com/demo
こんにちは! フロントエンドエンジニアのほりでーです。 今回はマウスだけで本格的な3DCG映像をプログラミングできるAppleの隠れたツール、Quartz Composerについてご紹介します。 Quartz Composerとは Quartz Composerとは、リアルタイムなグラフィック表現に特化したMac OS Xの開発環境で、誰でも無料でダウンロードできるようになっています。 特徴1. マウスでプログラミングする 普通、JavaScriptやPHPといったプログラミング言語では、テキストエディタなどを使い、その言語のルールに従って「コード」を書く必要があります。 しかし、Quartz Composerでのプログラミングは基本的にマウスで行います! 上図のように「パッチ」と呼ばれる小さな機能を持ったパーツを組合せることで表現を作ることができるのです。 コードを書くことに慣れてない人
これは何? Unityは、2D、3D、物理、アニメーション、最新の高度な技術も使いやすい、とても便利な統合開発ツールですね。Processingは、MITメディアラボから開発が始まったシンプルな開発環境で、メディアアートや初心者のプログラミング学習によく利用されている、プログラムによる電子スケッチブック的なものです。 そしてこの記事で紹介するuProcessingはUnityとProcessingを悪魔合体し、Unity上でProcessing的な書き方をできるようにしてみた誰得なアセットです。 ちなみにこの記事は、Unityのアセットを8月中毎日紹介するという、Unity アセット真夏のアドベントカレンダー 2014 Summer!の8/26の記事です。前日の記事は、カッコイイエフェクトでおなじみaki(frontakk)さんの「購入したパーティクルアセットをカスタマイズしてみよう」とい
人間の想像力には制限がない。いつの時代も、想像力の足枷となるのはテクノロジーの限界だ。『Rez Infinite』では、ようやく技術の限界が人の想像力に追いついてきたことで、当初思い描かれていた真の姿を表現することができたようだ。 映像表現と音楽表現をゲームプレイと融合させた革新的なゲーム『Rez』。2001年にPlayStation 2とドリームキャスト向けに、2008年にはXbox 360で『Rez HD』として発売された作品が、PS VRローンチタイトル『Rez Infinite』として帰ってくる。1080p、60fps、3Dオーディオ対応、さらにVR対応と進化を遂げたシリーズ最新作は、ただ単にこれまでの作品のリマスター版では終わらない。新たに追加されたステージ「Area X」で描かれるのは、これまでのフレームで構成された電脳世界の海とは違うもの。その新しい世界はまるで煌めく星々や銀
Jonathan Mackenzieは無料のiPadアプリ「scriptSONIC Free」を発表しました。これはリアルタイムにプログラミングをする「ライブ・コーディング」という手法で音楽を作るiPadアプリ「scriptSONIC」の機能制限バージョンです。 ライブ・コーディングという言葉は聞き慣れないかもしれませんが、動画を見るとその雰囲気が伝わってきます。リアルタイムにJavaScriptに似た言語でコードを書いて、音楽を制作しています。 出典:YouTube ライブ・コーディングは、徐々に注目を集めていて、皆さんにも馴染みのあるDAWディベロッパー「Ableton」 が主催するカンファレンス「Loop」でも大々的に取り上げられていました。 日本では東京藝術大学などで教鞭をとられている田所氏のウェブサイトでわかりやすく説明されています。 音楽の形は、演奏から演奏の録音へ、さらに演奏
#動画 #LeapMotionでフィードバックエフェクト 2016年5月15日に行われた 「第12回エフェクターミニハッカソン」と「第14回Pure Dataパッチングサークル東京」共同開催 で作ったものの紹介です。 #パッチのダウンロード 8tapdelayliapmotion.zip #遊び方 第14回Pure Dataパッチングサークル東京で作成したパッチです。 master.pdを起動します。 leapmotionのPureDataパッチを取得し http://puredatajapan.info/?page_id=1514 leap_motion_help.pdを起動、 metroを動かします。 fingersのpositionをチェック入れます。 leapmotionをつないで、指をかざすと数値が変化します。 master.pdの input_volumeとamplitude
(訳注:2016/9/28、頂きましたフィードバックを元に記事を修正いたしました。) はじめに 本稿では、高速で汎用的なハッシュテーブルを作るために行う、設計についての多くの意思決定事項を紹介します。最終的に、私の emilib::HashSet とC++11の std::unordered_set の間のベンチマークが出来上がりました。もし、ハッシュテーブルに興味があって、自分で設計したいなら(どのプログラミング言語かに関わらず)、本稿がヒントになるかもしれません。 ハッシュテーブル は、素晴らしい発明です。 ならし計算量O(1) ( O(√N)時間 )で、挿入、削除、検索を行うことができます。ならし計算量とは、ハッシュテーブルの計算に平均でO(1)の計算量がかかることを意味しますが、時々、これよりも多くの時間がかかる場合があります。具体的には、ハッシュテーブルに空きがない場合で、挿入の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く