htmlで音楽ファイル再生をする機会があったので忘れないよう記録
いくつか音楽ファイルのある中、一つを選択して再生するにはセレクトボックス等で選択するのが場所も取らず簡単でいけそうです。
しかし選曲数が増えるとジャンル分けして選択数を少なくしたほうが曲も探しやすいでしょう。
セレクトボックスを2つ使い、最初のセレクトボックスは分類に使いもう一つは動的にその分類の曲を表示するようなとてもシンプルな雛形を作成しました。
一応JavaScriptを使っていますが、わかりやすいように最小限でhtmlの中に納めています。
これを参考にいろいろ変化させていけそうです。
index.htm
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<TITLE>音楽ファイル再生</TITLE>
</head>
<!-- スタイルシート -->
<style type="text/css">
h1 { color: #006600; font-size: 1.2em; padding: 1px 1px 1px; margin: 0px; }
h1 em { font-style: normal; color: #999; }
body { color: #666; font-family: sans-serif; line-height: 1.4; }
a { color: #888; text-decoration: none; }
.bgmControl {
/* BGMが選択されているとき */
/* width: 148px; height: 40px; */
margin: 0px; padding: 0px;
}
.noBgmControl {
/* BGMが選択されていないとき */
width: 148px;
margin: 0px; padding: 0px;
text-align: left;
color: #66CC00;
font-size: 16px; line-height: 18px;
font-weight: bolder;
}
/* _/_/_/ Form 用表示設定 _/_/_/ */
.bgmSelected {
color: #662200;
background-color: #FFEECC;
}
</style>
<body>
<center>
<P><FONT color="#ff0000"><FONT size="+3">音楽ファイル再生</FONT></FONT><BR>
<BR>
<h1>音楽をあなたに！ </h1>
<em>Copy right shotechs2022(c)</em>
<p><br>メニューで曲を選択できます。<br></P>
<!-- 1つめのセレクトボックス。これは静的に（最初から表示内容を固定して）生成している -->
<select id="kind" class="bgmSelected">
<option value="">---♪♪ ジャンル選択 ♪♪---</option>
<option value="jazz">Jazz</option>
<option value="nutrition">心の栄養</option>
<option value="musicbox">オルゴールの世界</option>
<option value="others">その他</option>
</select>
<!-- 2つめのセレクトボックス。1つめで選んだジャンルに応じて、動的に選択肢を変化させ追加する -->
<select id="music" class="bgmSelected">
<option value="">---♪♪ 曲名を選択 ♪♪---</option>
</select>
<!-- 以下のdivに曲再生の指令HTMLを動的に挿入する場所として用意 -->
<div id="musicArea"></div>
</center>
</body>
</html>
<!-- JavaScriptで2つ目のセレクトボックスを動的に生成する -->
<script type="text/javascript">
<!-- 1つ目のセレクトボックスの一番最初の要素(jazz)に対する２つ目のセレクトボックスの要素 -->
var array = new Array();
array[''] = new Array({cd:"0", label:"---♪♪ 曲名を選択 ♪♪---"});
<!-- label:"曲名タイトル" fname:"の場所を含めたファイル名" -->
<!-- 下記例はmp3フォルダの中のファイルを指定（URLでもOK）" -->
array["jazz"] = new Array(
{cd:"0", label:"---♪以下選択してください♪---"},
{cd:"1", label:"GIRL TALK",fname:"mp3/jazz1.mp3"},
{cd:"2", label:"WHEN WE'RE ALONE",fname:"mp3/jazz2.mp3"},
{cd:"3", label:"OUR DREAM COME TRUE",fname:"mp3/jazz3.mp3"},
{cd:"4", label:"KISSIN'IN THE DARK",fname:"mp3/jazz4.mp3"},
{cd:"5", label:"WATCH WHAT HAPPENS",fname:"mp3/jazz5.mp3"},
{cd:"6", label:"DEJA VU",fname:"mp3/jazz6.mp3"},
{cd:"7", label:"YOUR SPECIAL",fname:"mp3/jazz7.mp3"},
{cd:"8", label:"[演奏停止]"}
);
<!-- 1つ目のセレクトボックスの２番目の要素(心の栄養)に対する２つ目のセレクトボックスの要素 -->
array["nutrition"] = [
{cd:"0", label:"---♪以下選択してください♪---"},
{cd:"1", label:"HIKARI",fname:"mp3/hikari.mp3"},
{cd:"2", label:"KAGERI",fname:"mp3/kageri.mp3"},
{cd:"3", label:"MINATO",fname:"mp3/minato.mp3"},
{cd:"4", label:"KASUMI",fname:"mp3/kasumi.mp3"},
{cd:"5", label:"MIZORE",fname:"mp3/mizore.mp3"},
{cd:"6", label:"KAEDE",fname:"mp3/kaede.mp3"},
{cd:"7", label:"[演奏停止]",fname:""}
];
<!-- 1つ目のセレクトボックスの３番目の要素(オルゴールの世界)に対する２つ目のセレクトボックスの要素 -->
array["musicbox"] = [
{cd:"0", label:"---♪選択してください♪---"},
{cd:"1", label:"君をのせて",fname:"mp3/01.mp3"},
{cd:"2", label:"天空の城ラピュタ",fname:"mp3/02.mp3"},
{cd:"3", label:"海の見える街",fname:"mp3/03.mp3"},
{cd:"4", label:"旅立ち",fname:"mp3/04.mp3"},
{cd:"5", label:"となりのトトロ",fname:"mp3/05.mp3"},
{cd:"6", label:"まいご",fname:"mp3/06.mp3"},
{cd:"7", label:"鳥の人",fname:"mp3/07.mp3"},
{cd:"8", label:"ナウシカ・レクイエム",fname:"mp3/08.mp3"},
{cd:"9", label:"アドリアの海へ",fname:"mp3/09.mp3"},
{cd:"10", label:"帰らざる日々",fname:"mp3/10.mp3"},
{cd:"11", label:"[演奏停止]",fname:""}
];
<!-- 1つ目のセレクトボックスの４番目の要素(その他)に対する２つ目のセレクトボックスの要素 -->
array["others"] = [
{cd:"0", label:"---♪選択してください♪---"},
{cd:"1", label:"",fname:""},
{cd:"2", label:"",fname:""},
{cd:"3", label:"",fname:""},
{cd:"4", label:"",fname:""},
{cd:"5", label:"[演奏停止]",fname:""}
];
<!-- 曲再生のリストを動的に挿入 -->
document.getElementById('kind').onchange = function(){
music = document.getElementById("music");
music.options.length = 0
var changedPref = kind.value;
for (let i = 0; i < array[changedPref].length; i++) {
var op = document.createElement("option");
value = array[changedPref][i]
op.value = value.fname;
op.text = value.label;
music.appendChild(op);
}
<!-- 選択した曲の場所を取り出す -->
document.getElementById('music').onchange = function(){
music = document.getElementById("music");
var changedPref = music.value;
<!-- 再生命令のHTMLをdivの位置に動的に挿入 -->
var musicArea = document.getElementById("musicArea");
musicArea.innerHTML = "<audio controls autoplay src='" + changedPref + "'></audio>";
}
}
</script>