Problem streaming legacy FLAC files with IDv3 tags in Firefox

[whorfin]

Version

cloned from master and tested with modified example demo, also with 4.24.1 served with https://github.com/navidrome/navidrome

Description

Legacy FLAC files, eg those ripped with EAC before Vorbis comments, do not play with react-music-player in Firefox. They play fine in chrome, but not in Firefox. Tested v88.0.1 and v89.0 on Linux, Windows and macOS.
The situation with the files is well described here [the bug report itself is not relevant but the description of the issue and motivation is illustrative]:
dhowden/tag#58

If I use dev tools->Network in Firefox, I can see that Content-Type is correctly set, eg audio/flac in navidrome (changing to audio/x-flac in the included "demo" example with a mini-media server on the side does not help).
BUT the Firefox "type" column says "mpeg".
Navidrome adds "X-Content-Type-Options: nosniff", but still the media does not play.

If I directly enter the media URL into a firefox window, it plays fine with the inbuilt media player! In such a case, the "type" column says "flac" or "unknown", but not the disastrously wrong "mpeg". Somehow, react-music-player is causing Firefox to misinterpret the media type.

Note that while such .flac media files are correctly identified by ffprobe, regular Linux file command incorrectly calls them MPEG-1 Layer 3 with ID3v2

Steps

Find a legacy FLAC file with ID3v2 tags in the beginning. An example can be found here:
https://github.com/dhowden/tag/files/3873999/01.-.Lookee.Here-trimmed.zip
I can provide a full track from a legacy EAC session if helpful, but prefer to do that directly to the author, not publicly.

Either serve the file in navidrome, or quickly and easily to test, replace one of the "musicSrc" links in the example/example.js file in the player demo.

$ npm run demo

On chrome, everything is fine.
On firefox, you will see that:

1. The file might be skipped if you added it in a multi-element playlist eg audioList1
2. The file "hangs" with a spinning pinwheel and the album art does not rotate, in a single-element playlist like audioList2. This hanging/stuck artwork is the observed navidrome behavior.

The Firefox javascript error console shows audio decode errors:

Media resource http://server:port/01%20-%20Lookee%20Here-trimmed.flac could not be decoded.
Media resource http://server:port/01%20-%20Lookee%20Here-trimmed.flac could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

[whorfin]

...i just tried these other webplayers

1. Airsonic Refix
2. Jamstash
3. Subfire

and they all behave similarly, so ... some combination of however these players work, Firefox and legacy FLAC is bad...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.