10. MP3の挿入

NextJS

Next.jsでMP3を挿入する場合は、publicディレクトリにMP3ファイルを置くのが簡単です

public
-- audio
   -- sample.mp3

JSX

export default function AAA() {
  return (
    <audio controls>
      <source src='/audio/sample.mp3' type='audio/mpeg' />
    </audio>
  );
}

controlsをつけると再生ボタンが表示されます

<source>のsrcはスラッシュから始めること（publicがルート扱い）

type=’audio/mpeg’ はMP3のMIMEタイプ

複数のMP3を挿入する場合はmap関数

const tracks = [
  { title: "音声1", src: "/audio/sample1.mp3" },
  { title: "音声2", src: "/audio/sample2.mp3" },
];

export default function AudioList() {
  return (
    <div>
      {tracks.map((track, i) => (
        <div key={i}>
          <p>{track.title}</p>
          <audio controls>
            <source src={track.src} type="audio/mpeg" />
          </audio>
        </div>
      ))}
    </div>
  );
}
BACK