music-metadata-browserがブラウザで動かなかったのが解決した

javascriptで音楽ファイルのメタデータを読み込めるmusic-metadata-browserというnpmパッケージがあります。これはmusic-metadataのブラウザ版らしいです。

これをviteでバンドルしたWebアプリケーションで使おうとしたのですが、そのままだとブラウザで実行したときにいろいろエラーが出ました。そして今日、ついにエラーなく動作したので対応したことを書きたいと思います。

解決

3つのパッケージを追加しました。

package.json

{
  "dependencies": {
    "music-metadata-browser": "^2.5.6",
+   "buffer": "^6.0.3",
+   "events": "^3.3.0",
+   "process": "^0.11.10",
  }
}

music-metadata-browserパッケージより先に次のコードを読み込んで実行しました。

typescript.ts

import { Buffer } from "buffer";
import process from "process";

if (typeof window.global === "undefined") {
  window.global = window;
}

if (typeof window.Buffer === "undefined") {
  window.Buffer = Buffer;
}

if (typeof window.process === "undefined") {
  window.process = process;
}

ReferenceError: global is not defined

最初に出たエラーはReferenceError: global is not definedでした。これはGoogle検索すればすぐに情報が出て、次のコードを追加することで対応できるそうでした。

if (typeof window.global === "undefined") {
  window.global = window;
}

実際にこのコードを追加してみると、このエラーは出なくなりました。

TypeError: Stream is undefined

最初のエラーが出なくなると、新しいエラーが出るようになりました。今度のエラーはGoogleでいろいろ検索してもうまく情報が出ませんでした。そこで、エラーが出たファイルを見ると次のようなコードを見つけました。

node_modules/readable-stream/lib/_stream_readable.js

 42|var Stream = require('./internal/streams/stream');
...|
184|  Stream.call(this);

node_modules/readable-stream/lib/internal/streams/stream.js

module.exports = require('stream');

私はこれを見てnodejsのモジュールのstreamがブラウザには無いからエラーが出るのだと考え、browserifyのstream-browserifyパッケージを追加してエイリアスを設定してみましたが、変わらずエラーは出てきました。どうやらrequire('./internal/streams/stream')ではstream.jsではなく、stream-browser.jsが読み込まれていたようです。

node_modules/readable-stream/lib/internal/streams/stream-browser.js

module.exports = require('events').EventEmitter;

試しにbrowserifyのeventsパッケージを追加してみると、このエラーが出なくなりました。

ReferenceError: Buffer is not defined

3つ目のエラーが出ました。このエラーはwebpackでは解決に便利なプラグインがあるみたいですが、viteの良いプラグインは見つかりませんでした。エラーが出たファイルには使用している場所はありましたが定義している場所はありませんでした。これはエラーメッセージが似ている1つ目のエラーと同じように解決できないかと考え、まず次のコードを追加しました。

if (typeof window.Buffer === "undefined") {
  window.Buffer = Buffer;
}

次にBufferについて調べるとnodejsのライブラリに含まれているようです。browserifyのbufferパッケージを追加してインポートしました。

import { Buffer } from "buffer";

これで3つ目のエラーも出なくなりました。

ReferenceError: process is not defined

4つ目のエラーです。
3つ目のエラーとエラーメッセージが似ています。processについて調べるとこれもnodejsのライブラリに含まれていました。
browserifyのprocessパッケージと次のコードを追加しました。

import process from "process";
if (typeof window.process === "undefined") {
  window.process = process;
}

4つ目のエラーも出なくなりました。

解決

4つのエラーを解決したら音楽ファイルのメタデータの読み込みが正常に実行されるようになりました。