Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
Amplitude.js - HTML5のリッチなUIのオーディオプレイヤー MOONGIFT
HTML5で音楽ファイルを扱うことができるようになりましたが、素の状態では殆どUIが提供されていません。そんな状態で提供しても全く魅力的ではないでしょう。別途UIを作り込む必要があります。 今回紹介するオープンソースソフトウェアはAmplitude.js、HTML5のオーディオプレイヤーです。これを使えば格好良いUIで提供できるでしょう。 Amplitude.jsの使い方 上の再生部分がプレイヤーになります。 マウスオーバーで再生、停止に表示が変わります。 こんな感じです。 サムネイルだけでなく、アルバムの拡大表示もできます。 プレイリストにも対応。 SoundCloudも再生できます。 ビジュアライズも。 シンプルも良いですが、もっとリッチなプレイヤーにもできます。 Amplitude.jsを使えばリッチで使い勝手の良いHTML5のオーディオプレイヤーが簡単に提供できるようになります。も
wavesurfer.js - HTML5で音楽の波形を表示 MOONGIFT
Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave
Vesper - 格好良いデザインのHTML5音楽プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、audio/videoなどマルチメディアを操作するタグが追加されました。それによってFlashなどのプラグインを使わなくともWebブラウザだけで音楽や動画が再生できるようになっています。 問題はそれらのタグは最低限の表現しか提供しておらず、より使いやすくしようと思うと独自の実装が必要と言うことでしょう。そこで今回は一例としてVesperを紹介します。 Vesperの使い方 Vesperは以下のようなHTMLタグを書きます。 <audio id="player" src="music/sample.mp3" controlls="controlls" ontimeupdate="zTimeUpdate()"></audio> 0:00 <progress id="
Webでポリシンセ作るときのテンプレ作った - aike’s blog
もう半年以上前に作ったやつですけどせっかくなので解説。 JavaScriptでプログラミングをやっていると人は誰しもシンセを作りたくなるかと思います。僕も３年くらい前にWeb Audio Synthというのを作りました。 いまはウェブブラウザもオーディオやMIDIのAPIが充実してきてシンプルな単音のシンセを作るのは簡単になりました。でもちょっと和音を弾きたくなってポリシンセに拡張しようと思うとこれがけっこう大変だったりします。 同時発音数6ボイスのポリシンセを作るとなったら、ほんとうにモノシンセを6個分実装する必要があります。さらに、和音を弾いている最中に追加で音を重ねるときなど空いているボイスをさがして割り当てるといったオブジェクトプーリングの仕組みが必要になります。 また、いくつかシンセを作っていると、鍵盤のUIやMIDI入力の対応など定型的で毎回同じ作業があることに気づいてきます。
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
