ブラウザで動く波形編集アプリをReactで作った
リンク 以下の URL から登録不要で起動できます。 目指したもの 誰でも直感的に操作がわかる波形編集アプリ。 機能 複数ファイルのインポート、結合 フェード クリップごとの音量調整 クリップの分割・長さの調整 コンプレッサー EQ リバーブ VU メーター wav ファイルでのエクスポート 技術スタック Typescript React styled-components zustand Tone.js Netlify React とか styled-components について言うことは特に無いので、zustand と Tone.js のみ所感を書きます。 zustand - 状態管理ライブラリ zustand は redux のような状態管理ライブラリです。ただ redux と比べて以下のような特徴があります。 flux アーキテクチャのような縛りがなく、ボイラープレートコードが少
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を使用するという決定をし
JavaScriptでMacに歌ってもらう - Okiraku Programming
最近のChrome, SafariのJavaScriptには音声合成APIが入っています。 使い方は簡単で、JavaScriptコンソール等で var msg = new SpeechSynthesisUtterance('こんにちは!'); msg.lang = "ja-JP"; // 言語指定 window.speechSynthesis.speak(msg); のようにするだけで喋ってくれます。 音声エンジンを変えることも可能です。使える音声の一覧を var voices = speechSynthesis.getVoices(); で取得すると、voicesに音声オブジェクトのリストが返ってくるので、この中のlangやnameを見て使いたいものを msg.voice = voices[3]; などとSpeechSynthesisUtteranceオブジェクトのvoice属性に指定す
Web Audio APIでオシレーターの実装方式いろいろ試してみた - aike’s blog
あなたの好きな波形は何ですか。人はだれしも思い入れのある波形があるかと思います。正弦波や矩形波が好きなかたもいるようですが僕はだんぜんノコギリ波派です。ノコギリ波の優しくて存在感のある音色につつまれているだけでしあわせな気持ちになります。 そんなわけでみなさんこれから多くのシンセをWeb Audio APIで作成するかと思いますが、いくつかあるノコギリ波のオシレーター実装方法について比較してみたいと思います。また、ソフトシンセを作るうえで避けて通れないエイリアスノイズについて方式ごとの差異を聴き比べてみます。 こちらのページで実際に聴きながら読んでください。(Chrome推奨) http://aikelab.net/sawwave/ ■ナイーブな実装 return 1.0 - (this.phase / Math.PI); こんな感じの処理を1サンプルごとに呼ぶとノコギリ波になります。高い
Web Audio APIでファミコンノイズを鳴らしてみる - aike’s blog
おっさんには懐かしいファミコンのノイズ音をWeb Audio APIを使ってウェブブラウザで再現してみます。今聴くとかなり表現力に乏しい感じのノイズですが、当時はこれで宇宙船の推進音や敵機の爆発音、レーザー光線やスネアドラムなど無限にイメージが膨らんだものです。 このファミコンの音源プロセッサRP2A03のノイズは、単純な乱数によるホワイトノイズなどでは再現できません。ノイズ生成のロジックをそのまま実装する必要があります。 RP2A03の詳細やノイズ生成ロジックはニコニコ大百科のFC音源の項に異常に詳しく書いてあります。内容も読み応えがありずっと読んでいられます。僕は何か嫌なことがあったりして気持ちを落ち着けたいときにはこのページをよく読むようにしています。嘘です。 これによるとノイズ生成は以下のC言語プログラムでできるとのこと。ノイズには音程感のほとんどない長周期ノイズと比較的音程感のあ
私がお客様の中のWebシンセプログラマです - 音の鳴るブログ
WebModular の g200kgさんがMIDIメッセージを介してウェブ楽器を連携させるという面白いことを考えてくれたので早起きして便乗しました。 お客様の中にWebシンセプログラマはいらっしゃいませんか http://www.g200kg.com/archives/2012/06/web-1.html 仕組みはとても簡単で window.postMessage で MIDIメッセージ（この音を出して下さいとか止めて下さいという信号）を送る。送られた側は処理して音を出す。これだけです。 これの何が便利なのかというと、インターフェイスと音源が完全に分離できるので、めちゃくちゃ凄いシーケンサーを誰かが書いて音を出すのは別の人の書いたコードを使うとか、あたり一面に様々なシンセサイザーに囲まれて演奏するみたいなことができる。 僕も timbre.js という音を出すライブラリを作っているので対
JavaScript から MML を再生する - JSMML - 2nd life (移転しました)
http://coderepos.org/share/wiki/JSMML テキスケ: ActionScript日記 - サウンドのリアルタイム生成（４） で公開されている、Flash から MML を再生できるライブラリ、 FLMML が素晴らしすぎるので、JavaScript からも再生できるようにブリッジを書いてみました。ライブラリ名は JSMML(まんま)。 JSMML を使うと、SWF を経由して JS な API から MML を再生できるようになります。 <script type="text/javascript" src="JSMML.js"></script> <script type="text/javascript"> JSMML.swfurl = 'JSMML.swf'; // default // onLoad に関数を入れておくと、SWF のロード完了時に呼ばれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ongaq JS