音声の切り出しを、ブラウザの中だけで行う道具です。ファイルはサーバへ送信されません。 このページでは、その仕組みと、それをご自分で確かめる方法を説明します。
音声の読み込み・波形の表示・切り出し・書き出しは、すべてお使いのブラウザの中で行われます。 サーバがしているのは、この画面を作るためのファイル（HTML・JavaScript・CSS）を配ることだけです。
音声データがこの枠から出ることはありません。
HTML・JavaScript・CSS を配るだけ。
ファイルを受け取る窓口がありません。
音声を受け取る仕組みを「作らない」ようにしているのではなく、そもそも存在しません。 無いものは動きません。これが、この道具のいちばん大事なところです。
「送っていません」という文章を信じていただく必要はありません。 ブラウザに付いている開発者ツールで、通信をそのまま見ることができます。
blob: で始まる行wav.worker）lamejs）。WAV だけなら読み込まれませんサーバ側にファイルを受け取る窓口が無いことも、外から確かめられます。 実際に何かを送りつけてみると、受け取りを拒まれます。
curl -i -X POST --data-binary @音声.wav https://tebako.ncgv.jp/audio/405 Method Not Allowed が返ります。読み取り（GET）以外は受け付けません。 本文の大きさも 1 キロバイトまでに制限してあり、音声が入る余地がありません。
この画面は Content-Security-Policy という決まりをブラウザに渡しています。 フォームでの送信は禁止、外部の JavaScript の読み込みも禁止です。 仮にこちらの作りに間違いがあっても、ブラウザの側で止まります。
読み込みはブラウザの機能をそのまま使っています。 そのため、対応はお使いのブラウザによって変わります。 読み込めない場合でも、ファイルが壊れているわけではありません。
| 形式 | 対応 | |
|---|---|---|
| WAV | ○ | |
| MP3 | ○ | |
| M4A / AAC | ○ | 多くの環境で読めます |
| OGG / Opus | △ | ブラウザによります |
| FLAC | △ | ブラウザによります |
| WMA | × | 対応していません |
| 形式 | 選べるもの | 音質 |
|---|---|---|
| WAV | 16 bit / 24 bit / 32 bit float | 読み込んだ音をそのまま残せます（32 bit float が無劣化） |
| MP3 | 128 / 192 / 256 / 320 kbps | 作り直すため、少し落ちます |
元が MP3 のファイルを MP3 で書き出すと、音質はさらに落ちます。 そのままの音を残したい場合は WAV を選んでください。
3通りあります。区間はいくつでも置けます。
| クリック | 1回目で開始、2回目で終了が決まります。すでに区間があるときは、いちばん近い端がクリックした位置へ動きます。 |
|---|---|
| ドラッグ | 波形の上をなぞると、区間が1つ増えます。端をつまんで調整できます。 |
| 数値で入力 | 「1:23.500」でも「83.5」でも入力できます。色の濃い区間にかかります。 |
区間を2つ以上置くと、書き出しは個別のファイルになります。
| 切り出し | 選んだ区間を書き出します。区間を選ばなければ全体が対象です。 |
|---|---|
| 削除 | 選んだ区間を取り除き、前後をつなぎます。「元に戻す」で戻せます。 |
| 無音カット | 静かな部分を探して、まとめて取り除きます。先に「何か所・何秒消すか」を表示します。いきなり消したりはしません。 |
| フェード | 始まりと終わりを、指定した秒数でなめらかに出し入れします。 |
| 音量・正規化 | 全体の音量を変えるか、いちばん大きい音を目標の高さに揃えます。 |
| 元に戻す | 削除と無音カットを取り消せます。何度でも戻せます。 |
書き出しが終わると、画面右上の玉手箱の蓋が閉じます。 ここで作業が完結したという合図です。中身は外へ出ていません。
不便な点も先にお伝えします。
波形の表示に wavesurfer.js（BSD-3-Clause）、画面の組み立てに Preact（MIT）、 MP3 の書き出しに lamejs（LGPL-3.0）を、いずれも改変せずに使っています。 音の読み解きと再生は、ブラウザに備わっている Web Audio API です。