クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

Tone.js

【Tone.js & Next.js】Tone.jsでシンセジェネレーターを作った

Tone.jsでシンセサイザーの音作りができるシンセジェネレーターを作りました。シンセサイザーの音の作り方を理解したい&Tone.jsでシンセサイザーの音作りがどこまでできるのかを検証する目的です。当初思い描いていたものは一通り実現できました!

【React & Tone.js】スケールプレイヤーを作った(いろいろなスケールを調べて音も聴けるアプリ)

Reactアプリの続きです。前々回はビート・プレイヤー、前回はコードプレイヤーを作りました。今回は音楽系の第三弾、スケール・プレイヤーを作りました。これで音楽3要素(メロディ、ハーモニー、リズム)が揃います。今回もTone.jsを使っています。それでは…

【React & Tone.js】コードプレイヤーを作った(鍵盤でいろいろなコードを調べるアプリ)

Reactアプリの続きです。前回はTone.jsを使ってビートプレイヤーを作りました。今回も音楽アプリでコードプレイヤーを作りました。以前CodePenで作成したコードプレイヤーをReact/Next環境に移植し、新機能を追加しました。それではいきましょう!

【React & Tone.js】ビートプレイヤーを作った(ビートとBPMを変更可能)

Reactアプリの続きです。前回は配色ジェネレーターを作りました。今回からTone.jsを使った音楽アプリ編に入ります。以前CodePenで作成したビートプレイヤーをReact/Next環境に移植してみました。それではいきましょう!

【Tone.js】いろいろなリズムが鳴らせるビート・プレイヤーを作った(BPM切り替え可能)

Tone.jsの続きです。前回はTone.Part()を使ってシャッフル、16ビートなどのリズムを作りました。今回はこれまで作ったリズムを合体させて、BPMとリズムの切り替えができるビート・プレイヤーを作りました!演奏練習用、BPM(曲の速度)調査など実用的なプレ…

【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※12〜32拍子&シャッフル編

Tone.jsの続きです。前回はTone.Part()を使って1〜8拍子を打ち込みました。今回も引き続きTone.Part()を使って16ビートなどのより細かいリズムを打ち込んで見ます。跳ねた感じのシャッフルビートにもトライ。それではいきましょう!

【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編

Tone.jsの続きです。前回はTone.Part()で細かいタイミングのエイトビートを鳴らしました。今回はエイトビート以外のリズムも鳴らしてみたく思います。今回は1〜8拍子編です。奇数拍子や変拍子も作ってみました。それではいきましょう!

【Tone.js】Tone.Part()で細かいタイミングのエイトビートを鳴らす

Tone.jsの続きです。前回はTone.Loop()を使ってエイトビートを鳴らしました。ただ、この方法だと細かいタイミングでリズムを変えることが出来なそうなので、今回は以前、マリオのゲームオーバー音の時に使ったTone.Part()で打ち込んでみました。予想通り細か…

【Tone.js】Tone.Loop()でエイトビートを鳴らす

Tone.jsリズム編の続きです。前回までドラムパッドからリズム音を鳴らしていましたが、今回からはTone.Loop()メソッドを使ってドラムのフレーズを打ち込んでみます。まずはドラムの基本、エイトビートから。それではいきましょう!

【Tone.js】ドラムパッドにエンベロープ(ADSR)とエフェクトを設定する

Tone.jsの続きです。前回はリズム系のシンセ音でドラムパッドを作りました。今回は、パッドの音色に手を加えたく、エンベロープ設定とエフェクトを加えてみました。それではいきましょう!

【Tone.js】リズム系のシンセ音でドラムパッドを作った

Tone.jsの続きです。前回はシンセでリズム音を流す方法を調べました。今回はこれをもとにドラムパッドを作ってみました。それではいきましょう!

【Tone.js】シンセでリズム音を作る方法を調べた

Tone.jsの続きです。前回までは和音楽器を作っていました。今回はリズム編に入って行きたく。Tone.jsのシンセ音でドラムの音をどうやって作るのか、CodePenの作品を参考に研究していきます。それでは行きましょう!

【Tone.js】和音楽器に五和音(テンションコード)他を追加する

Tone.jsの続きです。前回は和音楽器に四和音(セブンス、シックスス)を追加しました。今回は五和音(テンションコード)などを追加してみます。それでは行きましょう!

【Tone.js】和音鍵盤に四和音(セブンス、シックスス)を追加する

Tone.jsの続きです。前回はようやく三和音(トライトーン)の別のコードを増やしました。今回は四和音(セブンスコードとシックスス)にトライ。それではいきましょう!

【Tone.js】和音鍵盤に三和音(トライアド・コード)を追加する

Tone.jsの続きです。前回は、コードタイプを増やしやすいようにリファクタリングをしました。今回はいよいよコードタイプを増やしていきたく思います。それではいきましょう!

【Tone.js】コード音が読みやすくなるようにリファクタリング

久々にTone.js再開!前回はコード切り替えボタンと鍵盤を連携しました。これからコードを増やしていくにあたり、今の書き方だとコード名とコード音の把握が分かりにくくなりそうな気がします。今回はコードのリファクタリングをメインにしてみたく思います。…

【Tone.js】コード切り替えボタンと鍵盤の連携

Tone.jsの続きです。前回はコード切り替えボタンを設置しました。が、まだ鍵盤の音とは連携できていません。今回はその連携にチャレンジ。それではいきましょう!

【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)

Tone.jsシリーズの続きです。前回は一箇所の打ち換えでメジャーコードとマイナーコードを切り替えできました。次は画面上で切り替えられるようにするために、ラジオボタンを設置しました。

【Tone.js】3コード楽器を1オクターブに拡張する

Tone.jsシリーズ、前回は3コード楽器のコードを拡張しやすいようにリファクタリングしました。今回は鍵盤を1オクターブ分に拡張しました。また、和音の一箇所を打ち替えるだけでメジャー調をマイナー調に変更することにも成功。それではどうぞ!

【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)

Tone.jsの続きになります。前回作った3コード楽器のコードに重複している部分があったのでリファクタリングしました。クリックイベントをfor文でループしたら思うようにうごかず手こずりました。目指せ全音階&全和音楽器!への布石になった回。それではどう…

【Tone.js】PolySynth()で和音を鳴らす(3コード楽器を作る)

Tone.jsの続きです。前回はTone.Part()でメロディのタイミング、長さ、音量を調整しました。今回は和音に挑戦。3コードを奏でる楽器を作った。それではいきましょう!

【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲームオーバー音)

Tone.jsの続きです。前回はメロディ再生、シンセ音源加工、エフェクター接続を行いました。マリオの地上面メロディを打ち込みました。今回は「Tone.Part()」とうメソッドを使ってもう少し細かくメロディのタイミング、長さ、音量を調節しました。マリオのゲ…

【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続(マリオを打ち込んだ!)

Tone.jsシリーズ、前回まではTone.jsに用意されているシンセ音源たちを見ていきました。今回はメロディの再生、シンセ音源加工、エフェクター接続を行います。それではいきまSHOW!

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その2)

ブラウザで音を出そう「Tone.js」シリーズの続きです。前回はTone.jsに用意されたシンセ音の半分を紹介しました。今回は後編です。それではいってみましょう!

【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_

「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います!

【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した

ブラウザで音を鳴らせるJSライブラリ「tone.js」の続きになります。 前回は一音鍵盤を作りましたが、一音だと少々飽きてくるので1オクターブに拡張しました! 鍵盤を増やしながらコードが冗長になっていくことに気づき、このままではフルキーボードの頃には…

はじめの一音!tone.js事始める

以前ご紹介したWeb Audio APIの続きになります。 ブラウザで音を出す便利なライブラリ、tone.jsを利用して、はじめの一音鳴らしてみたいと思います! ※注:このページは音が鳴ります!