JavascriptでなんちゃってMusic Serverを作る

(2023-10-31 初稿 - )

これまで、Webサーバーを立ち上げたり、Javascriptで日付や時間、CGIを動かしてきた。

今回は、ラジオボタンで、インターネットラジオ局やラズパイ(Raspberry Pi)等のフォルダ内の楽曲を演奏できるようにする。

ラジオボタンでインターネットラジオ局やフォルダを選ぶ

<label>タグで囲むことにより、ボタンだけでなく行のどこを押してもチェックを入れることができるようになる。

チェックして、Execボタンを押すことによって、次のボタンをクリックしたスクリプトへ移行して、最終的にCGIを実行する。

サンプルなので、自分の好きなラジオ局やフォルダ等に自由に変更してね。

<!-- form radio button music selector -->
<form name="form_ms">
  <h2>Web Radio</h2>
    <p>
      <label><input type="radio" name="station" value="st1">Ameria's Best Ballad</label><br>
      <label><input type="radio" name="station" value="st2">Bay Smooth Jaz</label><br>
      <label><input type="radio" name="station" value="st3">solo piano &amp; guitar</label><br>
    </p>
  <h2>Library</h2>
    <p>
      <label><input type="radio" name="station" value="st4">folder1</label><br>
    </p>
  <h2>Default</h2>
    <p>
      <label><input type="radio" name="station" value="st0" checked>Quit</label>
    </p>
</form>
<input type="button" value="Exec" onclick="clickBtn1()" />

ラジオボタンを押したら、CGIを実行する

Execボタンが押されたら、以下のスクリプトが実行される。

チェックが入ったボタンのValue(例 st1)が文字列 str に代入され、CGI mt_selに環境変数としてValueが引き渡される。

CGIの実行結果は、<iframe>ダグで囲まれた部分に書き込まれる。

<script>
  function clickBtn1() {
    let str = "";
    const st = document.form_ms.station;

    for (let i = 0; i < st.length; i++) {
      if (st[i].checked) {
        str = st[i].value;
        break;
      }
    }
    <!-- document.getElementById("span_ms").textContent = str; -->
    document.getElementById('mserv').src='cgi-bin/mt_sel?' + str;
  }
</script>
<iframe id="mserv" frameborder="0" scrolling="no" width="100%" height="5%"></iframe>

起動するCGI スクリプト

上記のラジオボタンを選んで、Execボタンを押すと、以下のCGI スクリプトが実行される。

htmlからの引数は、環境変数 $QUERY_STRING に保存されて呼び出される。

st_nameがラジオ局の名前、st_urlがそれぞれのURL。ただし、st_nameが0は、特別にQuitとする。

cvlcコマンドでCUIのvlcが起動し、URLを指定すればインターネットラジオ局、フォルダーを指定すればフォルダ内の曲を再生する。なお、フォルダ内の曲を再生する場合、-zオプションをつけると、ランダムな再生になる。

#!/usr/bin/env bash

# const
# st_nameとst_urlの順番は揃える
st_name=("Quit"
"America's best ballad" "Bay Smooth Jaz" "solo piano & guitar" "yt-mix" )
st_url=("" "http://yp.shoutcast.com/sbin/tunein-station.m3u?id=1760430" "http://yp.shoutcast.com/sbin/tunein-station.m3u?id=1852944" "https://yp.shoutcast.com/sbin/tunein-station.m3u?id=99513916" "-Z ../Music/yt-mix" )

# functions
put_html () {
cat << __EOF__
Content-type: text/html;charset=utf-8

<p>Now playing... Music Station : $now_st</p> 
__EOF__
}

now_env=$(echo $QUERY_STRING)
st_num=${now_env//st/}
now_st=${st_name[st_num]}

put_html

# Exec
/usr/bin/killall vlc 
if [[ $st_num -ne 0 ]]; then
    /usr/bin/cvlc ${st_url[st_num]} > /dev/null 2>&1 &
fi

難しいことはやっていないので、好きなように改良して使ってね。

より良く改良をして、楽しいMusicライフを。(^^)/