.m3uからurlを取得してaudioで再生する方法

きっかけ

インターネットラジオが好きなんだけど自作のオシャレなプレイヤーを作ってインテリアにしたかった。

ストリーミングするにはどうしたらいい？

SHOUTcastという海外の完全無料のインターネットラジオのサイトを発見。
ここでは.m3uというファイルでストリーミングができるurlを配ってるらしい。
SHOUTcast

リンクに飛ぶ

好きなステーションを見つけたらダウンロードボタンを押して.m3uを選択
新しいタブが開くのでリンクをコピー

コーディング

fetchして中身を取得

urlからfetch、変換して返す

const fetchStreamUrl = async () => {
  const response = await fetch(
    {url}
  );
  const playlistText = await response.text();
  const lines = playlistText
    .split("\n")
    .filter((line) => line.trim() !== "" && !line.startsWith("#"));
  console.log(lines);
  return lines.length > 0 ? lines[0] : "";
};

audio置く

再生するためのaudioをおく
この時に/stereamを忘れない
これで音楽ファイルに潜ることができて再生できる。
筆者はこれにつまづいて2,3時間迷った。

<audio id="audio-player" src={streamUrl+"/stream"}></audio>

再生ボタンの配置

再生停止の関数を作成
これでコントロールする。

const handlePlayPause = () => {
    const audioElement = document.getElementById(
      "audio-player"
    ) as HTMLAudioElement;
    if (!audioElement) {
      console.error("Audio element not found.");
      return;
    }

    if (audioElement.paused) {
      audioElement.play();
      setIsPlaying(true);
    } else {
      audioElement.pause();
      setIsPlaying(false);
    }
  };

終わりに

なかなかマニアックなニーズだと思うがもし似たようなことを考えている人がいたら参考にしてくれると嬉しい。