jsfxr とは|ブラウザだけで8ビットの効果音を作れる無料のツール
jsfxr は、ブラウザだけで8ビットの効果音を作れるツールです。無料の版でも商用利用に制限はなく、WAV での書き出しができます。書き出す形式を増やした有料の Pro 版もあります。
- 分類
- 音楽・効果音
- 日本語対応
- 日本語非対応
- 費用
- 無料
- 公式サイト
- https://sfxr.me/確認日 2026-09-12
jsfxr の概要
jsfxr(ジェイエスエフエックスアール)は、ブラウザの中で動く8ビットの効果音を作るツールです。レトロな効果音を作るのに必要なものはウェブブラウザだけです。
DrPetter が作った sfxr を JavaScript に移したもので、Eric Fredricksen が作り、Chris McCormick が手を加えています。ソースコードは公開されています。
jsfxr は JavaScript のライブラリとしても使えます。sfxr の効果音を、自分のゲームの中で鳴らしたり、音のデータにしたりできます。
jsfxr の特徴
jsfxr には、作りたい音の種類を選ぶボタンが並んでいます。
| ボタン | 何の音か |
|---|---|
| Random | でたらめに決める |
| Pickup/coin | 拾う音・コインの音 |
| Laser/shoot | 光線・射撃の音 |
| Explosion | 爆発の音 |
| Powerup | 強くなる音 |
| Hit/hurt | 当たる音・傷つく音 |
| Jump | 跳ぶ音 |
| Click | 押す音 |
| Blip/select | 選ぶ音 |
| Synth・Tone | 合成音・単音 |
| Mutate | 音を変化させる |
手で調整できる項目は、波の形(Square・Sawtooth・Sine・Noise)、Envelope(音の立ち上がりと消え方)、Frequency(高さ)、Vibrato(揺らぎ)、Arpeggiation(高さの階段)、Duty Cycle(波の幅)、Retrigger(鳴らし直し)、Flanger(うねり)、Low-Pass Filter(高い音を削る)、High-Pass Filter(低い音を削る)です。
書き出しは sfx.wav、設定の保存は sfx.json です。サンプルレートは 44k・22k・11k・8k(Hz)から、サンプルサイズは 16 bit と 8 bit から選べます。作った音は permalink(そのまま開けるリンク)にもできます。
コマンドラインで WAV に変換するための sfxr-to-wav という nodejs のスクリプトもあります。
ライブラリとして使うときは、あらかじめ用意された型の名前として pickupCoin・laserShoot・explosion・powerUp・hitHurt・jump・blipSelect・synth・tone・click・random が使えます。音の設定は、短い URL の形に縮めた文字列でも sfxr.toAudio() に渡せます。sfxr.toBuffer() で音のサンプルの配列を取り出すこともでき、既定では 44100 のサンプルレートで描かれた音が入ります。
jsfxr の費用とライセンス
jsfxr には無料の版と有料の Pro 版があります。無料の版でも次のことができます。
| 無料の版でできること | 記述 |
|---|---|
| 8ビットの効果音の生成 | 数の制限なし |
| WAV での書き出し | できます |
| 数値でのパラメータの編集 | できます |
| 単音・和音の再生 | できます |
| 商用利用 | 制限なし(Unrestricted commercial use) |
| 個人のデータ | 集めていません |
| 広告・追跡の仕組み | ありません |
| 暗い配色 | 使えます |
Pro 版で増えるものは、mp3・ogg・sfxr の形式での書き出し、細かく調整するための JSON の編集画面、クラウドへの保存と機器の間の同期、音をパックにまとめる機能などです。
jsfxr の無料の版と Pro 版
| 項目 | 無料 | Pro |
|---|---|---|
| WAV の書き出し | できます | できます |
| 商用利用 | 制限なし | 制限なし |
| mp3・ogg・sfxr の書き出し | — | できます |
| クラウドへの保存と同期 | — | できます |
jsfxr は公式サイトでそのまま動きます。Pro 版の案内も同じ公式サイトに置かれています。
公式の置き場(リポジトリ)のソースコードは Unlicense(著作権法上の権利をパブリックドメインに置くと宣言する条件)で公開されています。
- jsfxr を手に入れるhttps://sfxr.me/
jsfxr を使い始める手順
jsfxr の公式の置き場(リポジトリ)の README の「Library」の節に書かれている段は次のとおりです。
- Node では、
npm i jsfxrで入れます。 importで読み込む ES Modules / Bundlers の形ではimport { sfxr } from "jsfxr";、CommonJS(部品をrequireで読み込む書き方)の形ではconst sfxr = require("jsfxr").sfxr;で読み込みます。- ブラウザでは、ページに
riffwave.jsとsfxr.jsのスクリプトを含めます。含めると、sfxrの名前空間(名前の入れ物)を、読み込みの書き方なしでそのまま使えます。 - あらかじめ用意された型の名前(例:
pickupCoin)をpresetに入れ、sfxr.generate(preset)で音を作り、sfxr.play(sound)で鳴らします。 - 公式サイトの画面で作った音を使うときは、画面の「serialize」(音の設定を書き出す)ボタンを押し、出てくる JSON のコードをコピーします。
- コピーした JSON を
soundとして持ち、var a = sfxr.toAudio(sound); a.play();で鳴らします。
情報源
- jsfxr — 公式サイト(about jsfxr・Jsfxr Pro の一覧・書き出しの設定)https://sfxr.me/確認日 2026-10-18
- jsfxr — 公式の置き場の README(部品としての使い方・型の名前・API・ライセンス)https://github.com/chr15m/jsfxr確認日 2026-10-18
- jsfxr — 公式の置き場の UNLICENSE(Unlicense の条文)https://github.com/chr15m/jsfxr/blob/master/UNLICENSE確認日 2026-10-18