[2026/10/19]

[Astro] #179 ブラウザだけで動くタグエディタ — 歌詞もカバーも、音質を変えずに書き換える

はじめに

前回は、ブラウザだけで動く動画エディタを作りました。

[Astro] #178 ブラウザだけで動く動画エディタ — 1.4GB・27分の動画を、アップロードなしで切って書き出す

ブラウザの中だけで動く動画エディタを作りました。動画はどこにも送られません。切る、つなぐ、文字を入れる、字幕、速度、クロマキー、ぼかしから、MP4 や GIF の書き出しまで入っています。

lain-lab.com

今回は、音楽ファイルのタグエディタです。

最初の版は、ffmpeg.wasm にタグを書かせる、簡単な作りでした。そこに、機能を足して、F1 のヘルプを付けようとして、動かしてみたところ、直すところがたくさん見つかりました。結局、ほとんど作り直しました。

ファイルは、サーバーに送られません。音は再エンコードしないので、音質も変わりません。

画面

全体

左にファイルの一覧と、まとめて設定する欄。右に、タグの編集欄と、カバー画像です。変えた欄は、黄色の枠になります。

保存

保存の画面では、対象（1 件、変更した物、チェックした物、全部）と、保存先（ダウンロード、ZIP、フォルダ、元のファイルに上書き）を選べます。ファイル名を、%track% %title% のような形に変えることもできます。

F1 ヘルプ

動画エディタと同じで、F1 キーで、「やりたいこと → やり方」を検索できます。

作ったもの

読み込みは、ファイルのドロップ、フォルダのドロップ、ダイアログです
タイトル、アーティスト、アルバム、アルバムアーティスト、ジャンル、トラック（3/12 の形）、ディスク、年、コメント、作曲者、歌詞を編集できます
カバー画像は、ドロップ、クリック、Ctrl+V で付けられます。全部のファイルに適用、画像として保存、取り込むときの縮小もできます
まとめて設定、連番、ファイル名からタグを入れる、文字を整える（全角を半角に、など）、検索して置換
変更した欄は黄色、一覧には ● が付きます。「元に戻す」で、保存前なら何度でも戻せます
保存は、ダウンロード、ZIP、フォルダへの書き込み、上書き。Chrome と Edge では、フォルダへの書き込みと上書きもできます
未保存の変更があるまま、ページを閉じようとすると、警告が出ます

対応する形式は、MP3、M4A、FLAC、OGG、Opus、WAV です。

作り方

「変更した項目だけ書く」

いちばん大事にしたのは、これです。

最初の版は、画面にある全部の欄を、そのまま書き込んでいました。すると、読み込めなかった項目が、空のまま書き込まれて、消えてしまいます。タグのないファイルでは、ファイル名が、タイトルとして書き込まれていました。

そこで、読み込んだ時の値を覚えておいて、変えた項目だけを書くようにしました。空にした項目は、ファイルから消えます。触っていない項目は、一切変わりません。

ffmpeg.wasm では、足りなかった

最初は、ffmpeg.wasm の -c copy -metadata で、全部の形式を書いていました。音を再エンコードしないので、速くて、音質も変わりません。

ところが、検証してみると、次のことが分かりました。

MP3 の歌詞（USLT）と評価（POPM）が、保存すると消えます。 歌詞を指定しても、普通の歌詞のフレームではなく、独自のフレーム（TXXX）として書かれます
OGG と Opus のカバー画像が、保存すると消えます
OGG と Opus のタグは、ストリームの側に入っているので、ふつうの -metadata title= では、書き換わりません。-metadata:s:a:0 と書く必要があります

歌詞が消えるタグエディタは、困ります。そこで、MP3、FLAC、OGG、Opus、WAV は、ffmpeg を使わずに、タグを直接書き換えることにしました。

形式	書き換え方
MP3	ID3v2 を直接。変えた項目のフレームだけ差し替える
FLAC	Vorbis comment と PICTURE のブロックを差し替える
OGG / Opus	コメントのヘッダを作り直す。あとのページの番号と CRC も直す
WAV	LIST/INFO のチャンクを作り直す
M4A	ffmpeg.wasm（`-c copy`）

MP3 は、変えた項目のフレームだけを差し替えて、ほかのフレームは、そのまま残します。音の部分は、1 バイトも触りません。歌詞、評価、ReplayGain が残ることは、検証で確認しました。

OGG と Opus は、コメントのヘッダが、ページの中に入っています。ヘッダを書き換えると、ページの数が変わることがあるので、そのあとのページの番号を直して、CRC を計算し直しています。

M4A は、まだ ffmpeg を使っています。評価や、並び替え用の名前などの独自タグは、消えることがあります。

読み取り

MP3 と M4A は、jsmediatags を使っています。FLAC、OGG、Opus、WAV は、自分でパーサを書きました。OGG と WAV が読めないと、タイトルが、ファイル名のままになってしまうためです。

実機で確認できたこと

MP3 の読み込み、コメントの編集、保存は、問題なく動きました
保存したファイルを、foobar2000 系のダイアログ、iTunes、Winamp で開いて、コメント、作曲者、カバー画像、年、ReplayGain が残っていることを確認しました
歌詞は、iTunes（「カスタムの歌詞」）と Winamp で、表示できました

環境は、Windows 11、Chrome です。

詰まったこと

元のコードの問題

作り直す前の版を、本物の ffmpeg.wasm で動かしてみたところ、次のことが分かりました。

MP3 で、カバー画像が二重に入る
OGG のタグが、書き換わらない
アルバムアーティスト、ディスク、コメント、年が、読み込めていない
欄を空にしても、タグが消えない。カバー画像も消せない
カバーの枠に、ドロップできない
M4A の書き出しが壊れる

M4A の壊れる原因は、特定できていません。ffmpeg だけで同じ処理をすると、正常に書き出せるので、元のページの流れの側に、原因があります。既存のカバーと、新しいカバーを、両方マップしているのが怪しいのですが、確かめてはいません。作り直した版では、M4A も、検証で正常でした。

iTunes が書いたファイルで、タイトルが空になった

実機で、iTunes を使って、タグを書き換えたファイルを、このツールで開いたところ、タイトルとアーティストが、空になりました。

ファイルの中身を、バイナリで調べました。

ID3v2 に、タイトル（TIT2）とアーティスト（TPE1）の、フレームがありませんでした
タイトルとアーティストは、ファイルの末尾にある、古い形式のタグ（ID3v1 と APEv2）にだけ、残っていました
このツールは、ID3v2 だけを見ていたので、空に見えていました

データは、消えていませんでした。ただ、使う人から見ると、消えたのと同じです。

そこで、ID3v2 に無い項目は、APEv2、ID3v1 の順で補って、表示するようにしました。補った項目は、黄色の「変更あり」になって、保存すると、ID3v2 にも書き込まれます。画面にも、補ったことの注意書きが出ます。

直したあと、実機でも、補った項目が、黄色で表示されることを確認しました。

iTunes が、なぜ ID3v2 に書かなかったのかは、分かっていません。

ID3v1 と APEv2 は、書き換えない

ID3v1 と APEv2 は、読むだけで、書き換えていません。ID3v1 しか読まない古い機器では、更新前の値が出ることがあります。

未確認のこと・制限

M4A、FLAC、OGG、Opus、WAV は、実機で試していません。 ヘッドレスブラウザ（画面なしのテスト環境）で、ffprobe、mutagen、ffmpeg での再生で、確認した段階です
フォルダへの書き込みと、元のファイルへの上書きは、本物のファイルダイアログでは、試していません。テストでは、ブラウザの内部ストレージ（OPFS）で代用しました
日本語のファイル名での保存と、ファイル名の変更は、検証環境の都合で、英数字の名前でしか確認していません
Safari と Firefox では、確かめていません。フォルダへの書き込みと、上書きは、Chrome と Edge だけです
大きなファイルは、確かめていません。OGG と Opus は、ファイル全体をメモリに載せます
M4A は、評価や、並び替え用の名前などの、独自タグが消えることがあります。保存する時に、ネットから ffmpeg（約 30MB）を読み込みます
WAV は、カバー、作曲者、歌詞、アルバムアーティスト、ディスクを、保存できません
古い日本語のタグ（Shift_JIS の ID3v2）の、文字化けは、直せません。打ち直せば、直ります

おわりに

最初は、ffmpeg.wasm に任せれば、全部の形式を、1 つの方法で書けると思っていました。でも、歌詞が消えると分かって、形式ごとに、タグの書き方を、自分で作ることになりました。

実機で動かして、見つかった不具合も、ありました。iTunes が書いたファイルは、検証で使った、ffmpeg が作ったファイルとは、中身が違いました。実際のファイルで動かさないと、気づけませんでした。

今は、v1 です。ほかの形式も、実機で動かしながら、見つけたバグを、直していきます。