Are m4a's not supported?

[nicolello-dev]

I'm using NextJS v13.5.6, maybe that's the issue. When using a .mp3 file, it all works fine, but when I use a .m4a file it stops working. Specifically, the problem I'm getting is Uncaught (in promise) DOMException: The element has no supported sources. Is this supposed to be the case? If so, is there a workaround for supporting .m4a files?
The specific file I'm testing it with is https://deepscribes.s3.eu-central-1.amazonaws.com/uploads/1701605406836Transcription-test+ENG.m4a.
I have used two .mp3 files to test it and they both work:

1. https://deepscribes.s3.eu-central-1.amazonaws.com/uploads/1701631269367TheDocumentaryPodcast-20231020-UnderstandIsraelAndThePalestinians.mp3
2. https://deepscribes.s3.eu-central-1.amazonaws.com/uploads/1700177734838La-Prima+Guerra+Mondiale+in+5+MINUTI+%23ScuolaZoo.mp3

Edit: I have checked that url is correctly being passed

Second edit: For some reason, even the browser's default <audio> component will not work, hence this is not a problem with amplitude rather my audio. Oddly enough, I can get it from AWS, but it automatically starts downloading. When I get another .m4a audio from AWS, it instead shows me a blank page with just the <audio/> element and it works.
I also tested it with two other .m4a files, one from a random website, and the other one from the same bucket; they both worked.

In case it turns out to be useful, here's my code:

import { Undo2, Play, Volume2, Pause } from "lucide-react";
// @ts-ignore types have not (yet?) been made for this package
import Amplitude from "amplitudejs";
// Amplitude css
import "@/styles/amplitude.css";

export default function AudioPlayer({
  url,
  className,
}: {
  url: string;
  className: string;
}) {
  Amplitude.init({
    songs: [
      {
        name: "Song Name",
        artist: "Artist Name",
        album: "Album Name",
        url: url,
        cover_art_url: "",
      },
    ],
    debug: true,
  });
  return (
    <>
      <div
        className={`${className} flex flex-row p-2 bg-white h-12 gap-x-2 items-center`}
      >
        <Undo2 />
        <div className="cursor-pointer amplitude-play-pause rounded-full bg-black p-2 border border-play-pause-light-border shadow-xl flex items-center justify-center dark:bg-play-pause-dark-background dark:border-play-pause-dark-border">
          <Play id="play-icon" className="fill-white ml-1 w-5" />
          <Pause id="pause-icon" className="fill-white" />
        </div>
        <Undo2 style={{ transform: "scale(-1, 1)" }} />
        <div className="mx-1 flex-1 flex flex-row gap-x-1 items-center">
          <span className="amplitude-current-time text-xs font-sans tracking-wide font-medium"></span>
          <input
            type="range"
            id="song-percentage-played"
            className="amplitude-song-slider flex-1 amp-input"
            step=".1"
          />
          <span className="amplitude-duration-time text-xs font-sans tracking-wide font-medium"></span>
        </div>
        <Volume2 />
        <input type="range" className="w-20 amplitude-volume-slider" />
        <button className="w-8 text-center amplitude-playback-speed">
          <p id="onex">1.0x</p>
          <p id="onefivex" className="hidden">
            1.5x
          </p>
          <p id="twox" className="hidden">
            4.0x
          </p>
        </button>
      </div>
    </>
  );
}