"Media resource could not be decoded" in extensions

Hello everyone.

One of my extension needs to play an audio file in response to some events but it sometimes fails to do so. When that happens, the following messages are logged in the console:

Media resource moz-extension://c2e41295-cd60-48cd-bee0-e62a562d3d43/audio/success.mp3 could not be decoded.Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable.
Media resource moz-extension://c2e41295-cd60-48cd-bee0-e62a562d3d43/audio/success.mp3 could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

The code I’m using to play the audio file looks something like:

const audio = new Audio('audio.mp3');
audio.play()

But the same thing also happens with an <audio> tag.

Please see this minimal extension I created to investigate the issue:
test-extension.zip (9.0 KB)

Once you install the extension, click the action icon to open the test page. The test page simply renders 40 <audio> elements that load the same mp3 file. If you open the console and keep refreshing the page, you will eventually see the messages above.

Note that it happens no matter how many <audio> tags there is, I made it 40 just to increase the chance of hitting the issue.

The same page using the same code but loaded via HTTP doesn’t have this problem.

Does anyone have an idea about why this is happening? Any help would be appreciated.

I got it to work by updating manifest.json to specifically allow “web_accessible_resources”.

{
  "manifest_version": 3,
  "name": "Test Extension",
  "version": "0.1",
  "description": "For Testing Only",
  "icons": {
    "48": "icons/quicknote-48.png"
  },
  "permissions": [],
  "action": {
    "default_icon": {
      "32": "icons/quicknote-32.png"
    },
    "default_title": "Test Extension"
  },
  "background": {
    "scripts": ["background.js"],
    "service_worker": "background.js"
  },
  "web_accessible_resources": [
    {
      "resources": ["audio/success.mp3"],
      "matches": ["<all_urls>"]
    }
  ]
}

Thank you for your reply!

Unfortunately adding web_accessible_resources doesn’t seem to work on my end. I still see the same warning messages in the console once every few refreshes.

The mp3 file is being accessed in an extension page. As far as I know, this isn’t classified as “web access”. So it doesn’t make much sense to add it to web_accessible_resources. It doesn’t explain why it only fails sometimes either.

Agreed and honestly I don’t have enough experience to explain. There are several people here that will likely be able to fill in the gaps or provide better explanations or solutions.

With your default project I got the following and the same errors you saw:

After the manifest change and reloading the extension, I got the following without any errors:

Did you refresh the page? Sometimes it takes tens of refreshes to hit the issue.

I just tried this and it did take several/many times, but I was able to reproduce it. :frowning:

Given the behavior that it works most of the time, but fails infrequently tells me it is likely a Firefox issue. Let’s see what others have as suggestions on this topic.

Oh … and did want to say that I think you are right about the manifest.json change. It isn’t needed. I just tried with the original version and see the same behavior. Sorry about that.

No problem. I appreciate your replies.

This is quite curious. Thanks for putting together a minimal reproduction case, @monyxie. I was also able to reproduce the bug locally on macOS 15.4.1 using Firefox Nightly 140.0a1 (2025-05-11).

If you haven’t already, please file a new WebExtensions bug for this issue.

Thank you for your help. I have filed #1965971 just now.

1 Like