- ベストアンサー
★セレクトボックスで選択した効果音を鳴らしたい★
１～10までの効果音を用意して、セレクトボックスで選べるようにします。 セレクトボックスの下にはボタンがあり、それを押すと選んだ数字の音が鳴るようにしたいです。 その場合のjavascriptのプログラムコードを教えて頂けないでしょうか？ 単純にボタンを押すとひとつの音がなるプログラムは自分で作ることができました。 セレクトボックスを使った選択式の再生方法ができなくて質問させていただいた次第です。 どうかよろしくお願い致しますm(_ _)m
- rockchairsan
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは HTML5のオーディオタグを使う方法もありますが、 いろいろな場面で利用が出来る方法を紹介します。 但しあまりレスポンスはよくありません。 ＃セレクトボックスをフォームタグで囲みます。 ＃フォームタグに適当な名前を付けます。 ＃セレクトボックスにも名前を付けます。これでjavascriptでセレクトボックスの値を受け取れます。 ＃num=document.js.selct.selectedIndex;でセレクトボックスのインデックスを取得できます。 ＃<div id="snd" onclick="sound()">ボタン</div>でボタンを付けます。 ＃<div>タグですのでいろいろな形や色などを付ければボタンと同じになります。 ＃javascriptのなかに音源の名前を配列にしておきます。 ＃音源を鳴らす<embed>タグをまるごとDOMを使って書いてしまいます。 ＃書いた<embed>のsrcに取得したセレクトボックスのインデックスを使って配列の要素を入力します。 以下サンプルです。但し音源は5個しか用意してません。 <body> <form name="js"> <select name="selct"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> </select> <br> </form> <div id="snd" onclick="sound()">ボタン</div> <script type="text/javascript"> //セレクト番号の変数 var num; function sound() { // 音源を配列にする var ar=new Array("m1.mp3","m2.mp3","m3.mp3","m4.mp3","m5.mp3"); //セレクトボックスの値を取得 num=document.js.selct.selectedIndex; //embedタグをDOMで<div id="snd"に書き込む document.getElementById("snd").innerHTML= "<embed src='"+ar[num]+"' hidden=true autostart=true loop=false>"+"ボタン"; } </script> </body> 多分いろいろなブラウザに対応すると思います、実験はしてません。
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
選択時に読み込ませることで遅延は気にならないでしょう（PCブラウザでは大抵読み込んでくれます）。 <select onchange="se=new Audio(this.value)"> <option disabled selected>選択してください <option value="hoge1.wav">A <option value="hoge2.wav">B <option value="hoge3.wav">C </select> <button onclick="se.play()">再生</button>
お礼
ありがとうございます！ 参考になります！
お礼
とてもわかりやすい回答ありがとうございました。 おかげさまでやりたかったことが出来ました。 本当にありがとうございます♪