INDIE INDEX

レベル:入門

jsfxr とは|ブラウザだけで8ビットの効果音を作れる無料のツール

公開 2026-09-12更新 2026-10-18jsfxr(sfxr.me)

jsfxr は、ブラウザだけで8ビットの効果音を作れるツールです。無料の版でも商用利用に制限はなく、WAV での書き出しができます。書き出す形式を増やした有料の Pro 版もあります。

分類
音楽・効果音
日本語対応
日本語非対応
費用
無料
公式サイト
https://sfxr.me/確認日 2026-09-12
このページの目次
  1. jsfxr の概要
  2. jsfxr の特徴
  3. jsfxr の費用とライセンス
  4. jsfxr を使い始める手順
  5. 情報源

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 の書き出し—できます
クラウドへの保存と同期—できます
表1

jsfxr は公式サイトでそのまま動きます。Pro 版の案内も同じ公式サイトに置かれています。

公式の置き場(リポジトリ)のソースコードは Unlicense(著作権法上の権利をパブリックドメインに置くと宣言する条件)で公開されています。

jsfxr を使い始める手順

jsfxr の公式の置き場(リポジトリ)の README の「Library」の節に書かれている段は次のとおりです。

  1. Node では、npm i jsfxr で入れます。
  2. import で読み込む ES Modules / Bundlers の形では import { sfxr } from "jsfxr";、CommonJS(部品を require で読み込む書き方)の形では const sfxr = require("jsfxr").sfxr; で読み込みます。
  3. ブラウザでは、ページに riffwave.js と sfxr.js のスクリプトを含めます。含めると、sfxr の名前空間(名前の入れ物)を、読み込みの書き方なしでそのまま使えます。
  4. あらかじめ用意された型の名前(例:pickupCoin)を preset に入れ、sfxr.generate(preset) で音を作り、sfxr.play(sound) で鳴らします。
  5. 公式サイトの画面で作った音を使うときは、画面の「serialize」(音の設定を書き出す)ボタンを押し、出てくる JSON のコードをコピーします。
  6. コピーした JSON を sound として持ち、var a = sfxr.toAudio(sound); a.play(); で鳴らします。

情報源

jsfxr の条件を一覧で見る

音楽・効果音の一覧に、jsfxr の費用・商用利用・クレジット表記・利用報告の条件が並んでいます。

音楽・効果音

jsfxr のページに出た言葉

jsfxr と同じ分類のほかのツール音楽・効果音 全35件

音楽・効果音の一覧を見る

このページの内容の誤りは、問い合わせの窓口で受け付けています。