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

Question

tsuntsuku

90

90もっと見る

300pt

インターネットウェブ制作

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

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

回答の条件

1人3回まで

登録：2007/05/22 19:55:22
終了：2007/05/22 21:08:03

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

GEN111 2007/05/22 23:45:51

ポイント & いるか、ありがとうございます。
もうちょびっとだけ凝ってみました。

<html>
<head>
<script type="text/javascript">
</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>
tsuntsuku 2007/05/23 00:37:19

おおー、ありがとうございます。
早速利用させて頂きました！！！

今気付いたのですが、FireFoxでは作動しないようですね。これは仕方のないことなんでしょうか？FireFoxでも動くようにするには無理がありますか？
GEN111 2007/05/23 01:07:33

http://346zakki.12.dtiblog.com/blog-entry-1.html
Firefox や Opera で MIDI を再生するにはプラグインが必要なようです (Opera はリンクにすると再生できるようですが)。
いくつかあるようですが、QuickTime がメジャーでしょうか。でも、私あまり QuickTime は入れたくないので……今はちょっと試せません。
tsuntsuku 2007/05/23 02:46:12

なるほど。そんなんですか。
本当にいろいろとありがとうございました。
十分満足しております！

また新たに質問した際に、もしお分かりのようでしたら答えてやってください。よろしくお願いしますm(_ _)m
GEN111 2007/05/23 21:14:24

気になったので 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>
tsuntsuku 2007/05/23 22:06:29

何とお礼を申し上げたらいいのやら・・・
本当に何度もありがとうございます！！！

早速、利用させていただきます！
tsuntsuku 2007/05/23 22:11:37

少しで申し訳ないのですが、
ポイント送付させていただきましたm(_ _)m
GEN111 2007/05/23 22:22:22

私も質問をきっかけに勉強しているようなものなので、
たくさんポイントをいただいて申し訳ないです。
lindongsheng 2009/06/23 16:52:22

申し訳ないですが、ホームページ上でフィルをクリックすると1.mp3が再生されます、別のフィルをクリックすると2．mp3が再生されます、、、、、オーディオプレーヤーは表示したくありません。上記のhtmlを利用したので、ぜんぜん旨くいきませんので、教えていただけませんか、よろしくオお願いします。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

GEN111 · Accepted Answer · 2007-05-22T20:27:33+09:00

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

<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>

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

ベストアンサー

GEN111472582007/05/22 20:27:33

コメント（9件)

この質問への反応（ブックマークコメント）