螞蟻的 JavaScript: 音樂點播機

2009年2月1日

音樂點播機

此練習使用 EMBED 元素，及 javascrip 作一個音樂點播器。

先將樂曲放在陣列中，包括曲名與網址。
用 javascript 讀取上述陣列，組織一個 TABLE，可以顯示曲號與曲名，並且可以點選。
使用風格表設定 TABLE 的顯示特徵。

<style type='text/css'>
#mscDiv TABLE {border-collapse:collapse;
               font-size:14px;
              }
#mscDiv TD    {border:solid 1px green;
               text-align:right;
               min-width:16px;
              }
</style>
<div id='music'>
<embed width=180 height=20 autostart=false
  src="bell.wav"></embed>
</div>
<div id='mscDiv'></div>
<script type='text/javascript'>
var mscList=[
/*********
['卡農(Canon)', 'http://www.nknu.edu.tw/~chin/aoimg/CANON1.mid'],
['華爾茲舞曲', 'http://www2.japs.tp.edu.tw/webpic/%E5%8F%A4%E5%85%B8%E9%9F%B3%E6%A8%82/danube.mid'],
['春之頌', 'http://www2.japs.tp.edu.tw/webpic/%E5%8F%A4%E5%85%B8%E9%9F%B3%E6%A8%82/spring.mid'],
['莫札特第5號鋼琴協奏曲第一樂章', 'http://www.nknu.edu.tw/~chin/aoimg/KV175A.mid'],
['莫札特第5號鋼琴協奏曲第三樂章', 'http://www.nknu.edu.tw/~chin/aoimg/KV175C.mid'],
['莫札特土耳其進行曲', 'http://www.nknu.edu.tw/~chin/aoimg/KV331.mid'],
['匈牙利舞曲2', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d5.mid'],
['蕭邦的別離曲', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d4.mid'],
['天鵝湖', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/d13.mid'],
['貝多芬第九號交嚮曲', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_26.mid'],
['第五交嚮樂第一樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_19.mid'],
['第五交嚮樂第二樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_20.mid'],
['第五交嚮樂第三樂章.', 'http://sql.jaes.tpc.edu.tw/javaroom/midi/alas/Cl/ac3cl_21.mid'],
********/
['', ''],
['', '']
];
function setMscList()
{
  var lo=document.getElementById('mscDiv');
  var s='<p><table>';
  for( var i=0; i < mscList.length; i++)
  {
    if(mscList[i][0] == '') continue;
    var j=i%9;
    if( j == 0 )  s+='<tr>';
    s+='<td title="' +mscList[i][0]+
       '" onclick="chgMusic(' +i+  ')">' +(i+1);
  }  
  for( j++ ; j < 9; j++)    s+='<td>';
  s+='</table>';
  lo.innerHTML=s;
}
function chgMusic( n )
{
  var mo=document.getElementById('music');
  var s='<embed width=180 height=20 autostart=true src="'
        +mscList[n][1]+ '"></embed>';
  mo.innerHTML=s;
  //embed物件.src=mscList[n][1];
}
setMscList();
</script>

上例原本使用 embed物件.src=mscList[n][1] 來達成點曲的功能，可是此法只有 Firefox 可以執行；IE6, Safari, Chrome 都失敗。改用新的方法後，所有瀏覽器都可以成功執行。
上例在個人電腦測試成功，此處考量著作權，所以不能點選播放，請自行用個人電腦測試。