【JavaScript】で音楽の再生・停止をしたいのですが、具体的なスクリプトを教えてください。

★高ポイント&イルカ差し上げます。
********************
音楽1の再生
音楽2の再生
音楽3の再生
音楽の停止
********************
「音楽1の再生」をクリックすると「1.mid」が再生される。「音楽2の再生」をクリックすると「2.mid」が再生される。「音楽の停止」を押すと再生ストップといった具合です。オーディオプレーヤーは表示したくありません。ひとつのページで全て行いたいのですが可能でしょうか?

回答の条件
  • 1人3回まで
  • 登録:2007/05/22 19:55:22
  • 終了:2007/05/22 21:08:03

ベストアンサー

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/05/22 20:27:33

ポイント300pt

こんな感じでどうでしょう。

<html>
  <head>
    <script type="text/javascript"><!--
      soundlist = ['01.mid', '02.mid', '03.mid'] ;

      function soundPlay(n) {
        var option = '"' ;
        option += ' autostart = "true"' ; // 自動再生
        option += ' loop = "true"' ; // ループ再生
        document.getElementById('player').innerHTML = '<embed src="' + soundlist[n-1] + option + ' />' ;
      }

      function soundStop() {
        document.getElementById('player').innerHTML = '' ;
      }
      //-->
    </script>
  </head>

  <body>
    <form>
      <button type="button" onclick="soundPlay(1)">音楽1</button>
      <button type="button" onclick="soundPlay(2)">音楽2</button>
      <button type="button" onclick="soundPlay(3)">音楽3</button>
      <button type="button" onclick="soundStop()">停止</button>
    </form>

    <div id="player" style="display:none"></div>
  </body>
</html>
id:tsuntsuku

GEN111さん、先日に続き本当にありがとうございます。早速試してみたのですが、どうも上手くいきません・・・なぜでしょう・・・もう少し試してみます。

すみません。ローカル環境で試していたからでした。上手くいきました!本当にありがとうございます!!またイルカもらってください。

2007/05/22 21:07:00
  • id:GEN111
    ポイント & いるか、ありがとうございます。
    もうちょびっとだけ凝ってみました。

    <html>
    <head>
    <script type="text/javascript"><!--
    soundlist = ['01.mid', '02.mid', '03.mid'] ;
    path = './' ; // 音楽ファイルのパス

    function soundPlay(n) {
    var option = '"' ;
    option += ' autostart = "true"' ; // 自動再生
    option += ' loop = "true"' ; // ループ再生
    document.getElementById('player').innerHTML = '<embed src="' + path + soundlist[n-1] + option + ' />' ;
    document.getElementById('stopbutton').disabled = false ;
    }

    function soundStop() {
    document.getElementById('player').innerHTML = '' ;
    document.getElementById('stopbutton').disabled = true ;
    }
    //-->
    </script>
    </head>

    <body>
    <form>
    <button type="button" onclick="soundPlay(1)">音楽1</button>
    <button type="button" onclick="soundPlay(2)">音楽2</button>
    <button type="button" onclick="soundPlay(3)">音楽3</button>
    <button type="button" id="stopbutton" onclick="soundStop()" disabled="true">停止</button> ← 停止ボタンを再生中だけ有効に
    </form>

    <div id="player" style="display:none"></div>
    </body>
    </html>
  • id:tsuntsuku
    おおー、ありがとうございます。
    早速利用させて頂きました!!!

    今気付いたのですが、FireFoxでは作動しないようですね。これは仕方のないことなんでしょうか?FireFoxでも動くようにするには無理がありますか?
  • id:GEN111
    http://346zakki.12.dtiblog.com/blog-entry-1.html
    Firefox や Opera で MIDI を再生するにはプラグインが必要なようです (Opera はリンクにすると再生できるようですが)。
    いくつかあるようですが、QuickTime がメジャーでしょうか。でも、私あまり QuickTime は入れたくないので……今はちょっと試せません。
  • id:tsuntsuku
    なるほど。そんなんですか。
    本当にいろいろとありがとうございました。
    十分満足しております!

    また新たに質問した際に、もしお分かりのようでしたら答えてやってください。よろしくお願いしますm(_ _)m
  • id:GEN111
    気になったので QuickTime 入れて試してみました。上のでは鳴らなかったのでちょっと手直し。
    これで Firefox や Opera でも設定ができていれば鳴るはず。

    <html>
    <head>
    <script type="text/javascript">
    soundlist = ['1.mid', '2.mid', '3.mid'] ;
    path = './midifiles/' ; // ファイルのあるディレクトリのパス

    function soundPlay(n) {
    var option = '"' ;
    option += ' autostart = "true"' ; // 自動再生
    option += ' loop = "true"' ; // ループ再生
    option += ' style = "position:absolute;bottom:100%;"' ; // スタイル
    document.getElementById('player').innerHTML = '<embed src="' + path + soundlist[n-1] + option + ' />' ;
    document.getElementById('stopbutton').disabled = false ;
    }

    function soundStop() {
    document.getElementById('player').innerHTML = '' ;
    document.getElementById('stopbutton').disabled = true ;
    }
    </script>
    </head>

    <body>
    <form>
    <button type="button" onclick="soundPlay(1)">音楽1</button>
    <button type="button" onclick="soundPlay(2)">音楽2</button>
    <button type="button" onclick="soundPlay(3)">音楽3</button>
    <button type="button" id="stopbutton" onclick="soundStop()" disabled="true">停止</button>
    </form>

    <div id="player"></div>
    </body>
    </html>
  • id:tsuntsuku
    何とお礼を申し上げたらいいのやら・・・
    本当に何度もありがとうございます!!!

    早速、利用させていただきます!

  • id:tsuntsuku
    少しで申し訳ないのですが、
    ポイント送付させていただきましたm(_ _)m
  • id:GEN111
    私も質問をきっかけに勉強しているようなものなので、
    たくさんポイントをいただいて申し訳ないです。
  • id:lindongsheng
    申し訳ないですが、ホームページ上でフィルをクリックすると1.mp3が再生されます、別のフィルをクリックすると2.mp3が再生されます、、、、、オーディオプレーヤーは表示したくありません。上記のhtmlを利用したので、ぜんぜん旨くいきませんので、教えていただけませんか、よろしくオお願いします。
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません