ランダムにBGMを変えるには？

HOME > CSS/JavaScript Tips

| 人が登録

• はじめに
• JavaScriptコード
• JSファイルのソース

はじめに

20世紀末の話ですが、一時期聖飢魔II関係サイト「謎の部屋」を1年間限定で運営していたことがあります。
J-SkyWebやi-Mode対応着メロ紹介サイトだったのですが、JASRACの絡みもあり、聖飢魔IIの曲を全曲制覇させた後、閉鎖させていただきました。

そこで、そのサイトのトップページでは、ランダムにBGMを変化させるということをしていました。
リロードするごとにBGMが変化し、さらに現在流れている曲名も表示させていました。

BGMを強制的に聞かせるというのは、あまり望ましくはありません。
意図として流すという場合は除きますが。

当時、150曲以上のMIDIシーケンスをランダムに流していましたので、外部JSファイルを用いていました。早速その外部ファイル及びJavaScriptのソースをご紹介させていただきます。

配列は0から始まりますので、リストファイルであるbgmlist.jsには[0]から始まっています。
記述を書き換えてあなたのサイトにお役立てください。

ちなみに、JSファイルはメモ帳などテキストエディタで編集し、拡張子を.jsにしてくださいね。

注意事項

■ファイル構成は以下の通りです■

public_html / index.html (トップページ)
      |       bgmlist.js (外部jsファイル)
      |
      +--  mid / 20th.mid
     　　        akaitama.mid
         　　  　apocalypse1.mid
                …(以下略)…

▲Page TOP

JavaScriptコード

<script language="JavaScript" src="bgmlist.js"></script> <script type="text/javascript"><!-- RandomBGM (); //[0から1までの乱数]×[BGMの参照数]の値の小数点未満を切り捨てて整数化にしたものをrandに代入する rand = Math.floor(Math.random()*BGM.length); //ブラウザごとにBGMの鳴らし方を振り分ける if (navigator.appName.substring(0,3)=="Mic" && navigator.appVersion.substring(0,1)<=3) document.write("<BGSOUND SRC=" + BGM[rand] + "loop=-1>"); else document.write("<EMBED SRC=" + BGM[rand] + " autostart=true hidden=true loop=true><br>"); document.write("<p><small>聖飢魔II着メロ試聴MIDIをランダムで繰り返し再生しています<br>",BGM.length,"曲設定してます。好きな曲が流れるかな？<br>"); document.write("現在のBGM：" +LIST[rand]+"</small>"); //曲名表示（LISTの配列より抽出） //--></script>

▲Page TOP

bgmlist.jsのソース

function RandomBGM () { //MIDIシーケンスファイルの設定 BGM = new Array(); BGM[0]= "mid/20th.mid"; //20世紀狂詩曲 BGM[1]= "mid/akaitama.mid"; //赤い玉の伝説 BGM[2]= "mid/apocalypse1.mid"; //THE FINAL APOCALYPSE BGM[3]= "mid/arashi.mid"; //嵐の予感 BGM[4]= "mid/arcadia.mid"; //ARCADIA BGM[5]= "mid/century.mid"; //CENTURY OF THE RAISING ARMS BGM[6]= "mid/darkness.mid"; //NEVER ENDING DARKNESS BGM[7]= "mid/doom.mid"; //DOOMS' DAY BGM[8]= "mid/eldorado1.mid"; //EL.DO.RA.DO BGM[9]= "mid/fake.mid"; //A FAKE OF MYSELF BGM[10]= "mid/fire.mid"; //FIRE AFTER FIRE BGM[11]= "mid/fromhere.mid"; //FROM HERE TO ETERNITY BGM[12]= "mid/goahead.mid"; //GO AHEAD! BGM[13]= "mid/hanazono.mid"; //秘密の花園 BGM[14]= "mid/jack.mid"; //JACK THE RIPPER BGM[15]= "mid/japanese.mid"; //闘う日本人 BGM[16]= "mid/just.mid"; //JUST LET ME GO BGM[17]= "mid/kaiki.mid"; //怪奇植物 BGM[18]= "mid/kimigayo.mid"; //KIMIGAYOは千代に八千代の物語 BGM[19]= "mid/kiseki.mid"; //白い奇蹟 BGM[20]= "mid/kurofuku.mid"; //黒服のあいつ BGM[21]= "mid/kutizuke.mid"; //世界一のくちづけを BGM[22]= "mid/libido.mid"; //精神の黒幕～LIBIDO～ BGM[23]= "mid/mahiru.mid"; //真昼の月～MOON AT MID DAY～ BGM[24]= "mid/makai4.mid"; //魔界舞曲 BGM[25]= "mid/masquerade.mid"; //MASQUERADE BGM[26]= "mid/maze.mid"; //虚空の迷宮 BGM[27]= "mid/mephist.mid"; //メフィストフェレスの肖像 BGM[28]= "mid/mission.mid"; //THE OUTER MISSION BGM[29]= "mid/morningtea.mid"; //モーニングティーを二人で BGM[30]= "mid/nobunaga.mid"; //織田信長 BGM[31]= "mid/oni.mid"; //鬼 BGM[32]= "mid/rain.mid"; //緑色の雨 BGM[33]= "mid/rendezvous1.mid"; //RENDEZVOUS 60 MICRONS' BGM[34]= "mid/roh-ningyo.mid"; //蝋人形の館 BGM[35]= "mid/sanbika.mid"; //悪魔の賛美歌 BGM[36]= "mid/saveyour.mid"; //SAVE YOUR SOUL～美しきクリシェに背を向けて～ BGM[37]= "mid/shizuku.mid"; //空の雫 BGM[38]= "mid/stairway.mid"; //地獄への階段 BGM[39]= "mid/still.mid"; //STILL ALIVE BGM[40]= "mid/teenage.mid"; //TEENAGE DREAM BGM[41]= "mid/voyage.mid"; //DANGEROUS VOYAGE～失楽園への旅～ BGM[42]= "mid/winner.mid"; //WINNER! BGM[43]= "mid/winning.mid"; //WINNING GATE BGM[44]= "mid/yasashi.mid"; //やさしさが人を殺める BGM[45]= "mid/stormy.mid"; //STORMY NIGHT BGM[46]= "mid/sarome.mid"; //サロメは還って殺意をしるし BGM[47]= "mid/otona.mid"; //オトナやめたいわ BGM[48]= "mid/neverdie.mid"; //敗れざる者たち BGM[49]= "mid/noroi.mid"; //呪いのボンテージ BGM[50]= "mid/ningengari.mid"; //人間狩り BGM[51]= "mid/battler.mid"; //BATTLER BGM[52]= "mid/burning.mid"; //BURNING BLOOD BGM[53]= "mid/xmas1.mid"; //悪魔のメリークリスマス BGM[54]= "mid/lunatic1.mid"; //LUNATIC PARTY BGM[55]= "mid/sakura.mid"; //サクラちってサクラ咲いて BGM[56]= "mid/egao.mid"; //エガオノママデ BGM[57]= "mid/majesty2.mid"; //地獄の皇太子は2度死ぬ BGM[58]= "mid/revolution.mid"; //REVOLUTION HAS COME BGM[59]= "mid/gaisen1.mid"; //魔王凱旋 BGM[60]= "mid/majesty.mid"; //地獄の皇太子 BGM[61]= "mid/soseiki.mid"; //聖飢魔IIミサ曲第II番「創世記」 BGM[62]= "mid/soseiki1.mid"; //「創世記」Special Version BGM[63]= "mid/seikima2.mid"; //THE END OF THE CENTURY BGM[64]= "mid/demon1.mid"; //DEMON'S NIGHT BGM[65]= "mid/death.mid"; //DEATH LAND BGM[66]= "mid/kingdom.mid"; //ROCK IN THE KINGDOM BGM[67]= "mid/sakebi1.mid"; //心の叫び BGM[68]= "mid/dead.mid"; //DEAD SYMPHONY BGM[69]= "mid/prisoner.mid"; //ROCK'N'ROLL PRISONER BGM[70]= "mid/bigtime.mid"; //BIG TIME CHANGES BGM[71]= "mid/stainless.mid"; //STAINLESS NIGHT BGM[72]= "mid/ratsbane.mid"; //RATSBANE BGM[73]= "mid/adam.mid"; //アダムの林檎 BGM[74]= "mid/nightmare.mid"; //悪夢の叫び BGM[75]= "mid/withlove.mid"; //FROM HELL WITH LOVE BGM[76]= "mid/moai.mid"; //モアイ BGM[77]= "mid/aphrodite.mid"; //APHRODITE BGM[78]= "mid/crimson.mid"; //CRIMSON RED BGM[79]= "mid/badagain.mid"; //BAD AGAIN BGM[80]= "mid/departure.mid"; //DEPARTURE TIME BGM[81]= "mid/digital.mid"; //デジタリアン・ラブソティ BGM[82]= "mid/fullmoon.mid"; //満月の夜 BGM[83]= "mid/brandnew.mid"; //BRAND NEW SONG BGM[84]= "mid/gloria1.mid"; //GLORIA GLORIA BGM[85]= "mid/heavymetal.mid"; //HEAVY METAL IS DEAD BGM[86]= "mid/silence.mid"; //SILENCE OR VIOLENCE? BGM[87]= "mid/donadona.mid"; //戦慄のドナドナ BGM[88]= "mid/thisworld.mid"; //THIS WORLD IS HELL BGM[89]= "mid/love.mid"; //LOVE≒defence of your complex BGM[90]= "mid/concerto.mid"; //死の協奏曲 BGM[91]= "mid/renaissance.mid"; //ROCK'N RENAISSANCE BGM[92]= "mid/firebird.mid"; //火の鳥 BGM[93]= "mid/nogood.mid"; //NO GOOD NEWS TODAY BGM[94]= "mid/youguy.mid"; //有害 BGM[95]= "mid/restaurant.mid"; //恐怖のレストラン BGM[96]= "mid/devotion.mid"; //GREAT DEVOTION BGM[97]= "mid/whokills.mid"; //WHO KILLS DEMON? BGM[98]= "mid/loveflight.mid"; //LOVE FLIGHT BGM[99]= "mid/kemono.mid"; //害獣達の墓場 BGM[100]="mid/5000.mid"; //5000光年の彼方まで BGM[101]="mid/earth.mid"; //THE EARTH IS IN PAIN BGM[102]="mid/planet1.mid"; //不思議な第3惑星 BGM[103]="mid/xqjonah.mid"; //X.Q.JONAH BGM[104]="mid/ana.mid"; //悪魔の穴 BGM[105]="mid/kill.mid"; //KILL THE KINGGHIDORAH BGM[106]="mid/holy.mid"; //HOLY BLOOD～闘いの血統～ BGM[107]="mid/1999.mid"; //1999 SECRET OBJECT BGM[108]="mid/kizuna.mid"; //スキャンダラスな絆 BGM[109]="mid/game.mid"; //人生ゲーム BGM[110]="mid/emperor.mid"; //無冠の帝王～EMPEROR WITHOUT A CROWN～ BGM[111]="mid/yaju.mid"; //野獣 BGM[112]="mid/frozen1.mid"; //凍てついた街 BGM[113]="mid/blues.mid"; //悪魔のブルース BGM[114]="mid/eartheater.mid"; //EARTH EATER BGM[115]="mid/frog.mid"; //FROG NIGHT BGM[116]="mid/yaburenu.mid"; //破れぬ夢の中で BGM[117]="mid/creeping.mid"; //CREEPING TWILIGHT BGM[118]="mid/angel1.mid"; //ANGEL SMILE BGM[119]="mid/1000.mid"; //千年香妃花 BGM[120]="mid/guns.mid"; //GUNS'N' BUTTER BGM[121]="mid/romance.mid"; //ロマンス BGM[122]="mid/stick.mid"; //A STICK AND HONEY BGM[123]="mid/requiem.mid"; //THE REQUIEM BGM[124]="mid/king.mid"; //KING OF THE STEAK BGM[125]="mid/white.mid"; //ふたりのWHITE NITES BGM[126]="mid/chinese.mid"; //CHINESE MAGIC HERB BGM[127]="mid/totsugeki.mid"; //地獄へ突撃！ BGM[128]="mid/guillotine.mid"; //ギロチン男爵の謎の愛人 BGM[129]="mid/breakdown.mid"; //BREAKDOWN INNOCENCE BGM[130]="mid/vampire.mid"; //吸血鬼の増殖 BGM[131]="mid/genba.mid"; //殺しの現場！！ BGM[132]="mid/terrorist.mid"; //テロリスト BGM[133]="mid/schwarz.mid"; //SCHWARZ KASTELL BGM[134]="mid/goodnight.mid"; //GOOD NIGHT MELODIES BGM[135]="mid/hey.mid"; //ファラオのように BGM[136]="mid/rosa.mid"; //ROSA BGM[137]="mid/thunder.mid"; //THUNDER STORM BGM[138]="mid/cinderella.mid"; //シンデレラ外伝 BGM[139]="mid/pinky.mid"; //ピンクの恐竜 BGM[140]="mid/dog.mid"; //犬のようになめろ BGM[141]="mid/heroine.mid"; //ヒロイン・シンドローム BGM[142]="mid/ass.mid"; //Ass hole! BGM[143]="mid/mosaic.mid"; //モザイクのLOVE MAZE BGM[144]="mid/kairiki.mid"; //怪力熊男 BGM[145]="mid/joker.mid"; //JOKER～非力河童人間～ BGM[146]="mid/gold.mid"; //MR.GOLDEN LAND BGM[147]="mid/summer.mid"; //夏休み BGM[148]="mid/densetsu.mid"; //伝説のチャンバー・ライダー BGM[149]="mid/blackbass.mid"; //BLACKBASS BGM[150]="mid/time.mid"; //TIME STALKER BGM[151]="mid/sanctuary.mid"; //SANCTUARY //曲名リスト（必ずMIDIシーケンスファイルの配列番号と一致させること） LIST = new Array(); LIST[0]= "20世紀狂詩曲"; LIST[1]= "赤い玉の伝説"; LIST[2]= "THE FINAL APOCALYPSE"; LIST[3]= "嵐の予感"; LIST[4]= "ARCADIA"; LIST[5]= "CENTURY OF THE RAISING ARMS"; LIST[6]= "NEVER ENDING DARKNESS"; LIST[7]= "DOOMS' DAY"; LIST[8]= "EL.DO.RA.DO"; LIST[9]= "A FAKE OF MYSELF"; LIST[10]= "FIRE AFTER FIRE"; LIST[11]= "FROM HERE TO ETERNITY"; LIST[12]= "GO AHEAD!"; LIST[13]= "秘密の花園"; LIST[14]= "JACK THE RIPPER"; LIST[15]= "闘う日本人"; LIST[16]= "JUST LET ME GO"; LIST[17]= "怪奇植物"; LIST[18]= "KIMIGAYOは千代に八千代の物語"; LIST[19]= "白い奇蹟"; LIST[20]= "黒服のあいつ"; LIST[21]= "世界一のくちづけを"; LIST[22]= "精神の黒幕～LIBIDO～"; LIST[23]= "真昼の月～MOON AT MID DAY～"; LIST[24]= "魔界舞曲"; LIST[25]= "MASQUERADE"; LIST[26]= "虚空の迷宮"; LIST[27]= "メフィストフェレスの肖像"; LIST[28]= "THE OUTER MISSION"; LIST[29]= "モーニングティーを二人で"; LIST[30]= "織田信長"; LIST[31]= "鬼"; LIST[32]= "緑色の雨"; LIST[33]= "RENDEZVOUS 60 MICRONS'"; LIST[34]= "蝋人形の館"; LIST[35]= "悪魔の賛美歌"; LIST[36]= "SAVE YOUR SOUL～美しきクリシェに背を向けて～"; LIST[37]= "空の雫"; LIST[38]= "地獄への階段"; LIST[39]= "STILL ALIVE"; LIST[40]= "TEENAGE DREAM"; LIST[41]= "DANGEROUS VOYAGE～失楽園への旅～"; LIST[42]= "WINNER!"; LIST[43]= "WINNING GATE"; LIST[44]= "やさしさが人を殺める"; LIST[45]= "STORMY NIGHT"; LIST[46]= "サロメは還って殺意をしるし"; LIST[47]= "オトナやめたいわ"; LIST[48]= "敗れざる者たち"; LIST[49]= "呪いのボンテージ"; LIST[50]= "人間狩り"; LIST[51]= "BATTLER"; LIST[52]= "BURNING BLOOD"; LIST[53]= "悪魔のメリークリスマス"; LIST[54]= "LUNATIC PARTY"; LIST[55]= "サクラちってサクラ咲いて"; LIST[56]= "エガオノママデ"; LIST[57]= "地獄の皇太子は2度死ぬ"; LIST[58]= "REVOLUTION HAS COME"; LIST[59]= "魔王凱旋"; LIST[60]= "地獄の皇太子"; LIST[61]= "聖飢魔IIミサ曲第II番「創世記」"; LIST[62]= "「創世記」Special Version"; LIST[63]= "THE END OF THE CENTURY"; LIST[64]= "DEMON'S NIGHT"; LIST[65]= "DEATH LAND"; LIST[66]= "ROCK IN THE KINGDOM"; LIST[67]= "心の叫び"; LIST[68]= "DEAD SYMPHONY"; LIST[69]= "ROCK'N'ROLL PRISONER"; LIST[70]= "BIG TIME CHANGES"; LIST[71]= "STAINLESS NIGHT"; LIST[72]= "RATSBANE"; LIST[73]= "アダムの林檎"; LIST[74]= "悪夢の叫び"; LIST[75]= "FROM HELL WITH LOVE"; LIST[76]= "モアイ"; LIST[77]= "APHRODITE"; LIST[78]= "CRIMSON RED"; LIST[79]= "BAD AGAIN"; LIST[80]= "DEPARTURE TIME"; LIST[81]= "デジタリアン・ラブソティ"; LIST[82]= "満月の夜"; LIST[83]= "BRAND NEW SONG"; LIST[84]= "GLORIA GLORIA"; LIST[85]= "HEAVY METAL IS DEAD"; LIST[86]= "SILENCE OR VIOLENCE?"; LIST[87]= "戦慄のドナドナ"; LIST[88]= "THIS WORLD IS HELL"; LIST[89]= "LOVE≒defence of your complex"; LIST[90]= "死の協奏曲"; LIST[91]= "ROCK'N RENAISSANCE"; LIST[92]= "火の鳥"; LIST[93]= "NO GOOD NEWS TODAY"; LIST[94]= "有害ロック"; LIST[95]= "恐怖のレストラン"; LIST[96]= "GREAT DEVOTION"; LIST[97]= "WHO KILLS DEMON?"; LIST[98]= "LOVE FLIGHT"; LIST[99]= "害獣達の墓場"; LIST[100]="5000光年の彼方まで"; LIST[101]="THE EARTH IS IN PAIN"; LIST[102]="不思議な第3惑星"; LIST[103]="X.Q.JONAH"; LIST[104]="悪魔の穴"; LIST[105]="KILL THE KINGGHIDORAH"; LIST[106]="HOLY BLOOD～闘いの血統～"; LIST[107]="1999 SECRET OBJECT"; LIST[108]="スキャンダラスな絆"; LIST[109]="人生ゲーム"; LIST[110]="無冠の帝王～EMPEROR WITHOUT A CROWN～"; LIST[111]="野獣"; LIST[112]="凍てついた街"; LIST[113]="悪魔のブルース"; LIST[114]="EARTH EATER"; LIST[115]="FROG NIGHT"; LIST[116]="破れぬ夢の中で"; LIST[117]="CREEPING TWILIGHT"; LIST[118]="ANGEL SMILE"; LIST[119]="千年香妃花"; LIST[120]="GUNS'N' BUTTER"; LIST[121]="ロマンス"; LIST[122]="A STICK AND HONEY"; LIST[123]="THE REQUIEM"; LIST[124]="KING OF THE STEAK"; LIST[125]="ふたりのWHITE NITES"; LIST[126]="CHINESE MAGIC HERB"; LIST[127]="地獄へ突撃！"; LIST[128]="ギロチン男爵の謎の愛人"; LIST[129]="BREAKDOWN INNOCENCE"; LIST[130]="吸血鬼の増殖"; LIST[131]="殺しの現場！！"; LIST[132]="テロリスト"; LIST[133]="SCHWARZ KASTELL"; LIST[134]="GOOD NIGHT MELODIES"; LIST[135]="ファラオのように"; LIST[136]="ROSA"; LIST[137]="THUNDER STORM"; LIST[138]="シンデレラ外伝"; LIST[139]="ピンクの恐竜"; LIST[140]="犬のようになめろ"; LIST[141]="ヒロイン・シンドローム"; LIST[142]="Ass hole!"; LIST[143]="モザイクのLOVE MAZE"; LIST[144]="怪力熊男"; LIST[145]="JOKER～非力河童人間～"; LIST[146]="MR.GOLDEN LAND"; LIST[147]="夏休み"; LIST[148]="伝説のチャンバー・ライダー"; LIST[149]="BLACKBASS"; LIST[150]="TIME STALKER"; LIST[151]="SANCTUARY"; }

▲Page TOP

総合

• ホームページを作る前に
• Web素材集
• カラーコード表
• FFFTPの使い方
• CGI Room
• アクセスアップ対策講座
• CSS/JavaScript Tips
• Web Design FAQ
• ひとことぼーど

Expression Web

• Expression Web
• Expression Web Survey

FrontPage

• FrontPage 2003(初級編)
• FrontPage 2003(中級編)
• FrontPage 2003(上級編)
• FrontPage 2002
• FrontPage 2000
• FrontPage Express
• FrontPage Survey

その他

• Word 2000
• Word 97/98

Microsoft MVP for Expression
(Apr 2008 - Mar 2009)
/ FrontPage
(Apr 2005 - Mar 2008)