- ベストアンサー
★セレクトボックスで選択した効果音を鳴らしたい★
１～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>
お礼
ありがとうございます！ 参考になります！
関連するQ&A
- テキストボックスとセレクトボックスの選択肢の連携
この度はお世話になります。 １個のテキストボックスに入力された文字列により、その後の１個の セレクトメニューの選択肢を変更することってできるのでしょうか？ 具体的には以下のような動作です。 ・デフォルトではテキストボックスに文字列が入力された場合は、 その後のセレクトボックスには「トマト、きゅうり、ほうれんそう」 の選択肢が入る。 ・テキストボックスに「あいうえお」と入力された時のみ、その後の セレクトボックスが「りんご、みかん、ぶどう」の選択肢に変わる。 ・テキストボックスに「かきくけこ」と入力された時のみ、その後の セレクトボックスに「あじ、さば、かつお」の選択肢に変わる。 こんな感じですが、よろしくお願い致します。 当方、只今javascriptを勉強しており、条件式に苦戦しております。 サンプルプログラムを見せていただけるとありがたく思います。
- ベストアンサー
- JavaScript
- セレクトボックス ＨＴＭＬ javascript
セレクトボックス ＨＴＭＬ javascript php セレクトボックスの複数選択についてですがご教授よろしくお願いいたします。たとえばセレクトボックスを二つ作り 一つ目のセレクトボックスを ・フルーツ ・寿司 ・カレー フルーツを選択すると二つ目のセレクトボックスの中が ・りんご ・みかん ・なし 寿司を選択すると二つ目のセレクトボックスが ・いくら ・まぐろ ・うに このように 一つ目のセレクトボックスの選択によって 二つ目のセレクトボックスの中身を変えるにはどのようなコードを組めば よろしいのでしょうか。 現在 php javascript mysqlの勉強しています。 ご教授いただければ幸いです。
- ベストアンサー
- HTML
- テクストボックスからセレクトボックスへ
１．テキストボックスにテキストを入力 ２．追加ボタンを押す ３．セレクトボックスに表示 ４．セレクトボックスに追加した項目を選択し削除ボタンで削除できる 以下のようなプログラムを教えていただけますでしょうか？
- ベストアンサー
- JavaScript
- javascriptでのセレクトボックスについて。
javascriptを使ったセレクトボックスについて教えてください。 教えてgooのカテゴリ選択のように、セレクトボックスでjavascripを使い、 一つめのselectボックスでは ・１ ・２ ・３ のオプションを選択可能に 二つめのselectボックスでは、 １が選択されたら ・１の１ ・１の２ ・１の３ のオプションを選択可能に ２が選択されたら ・２の１ ・２の２ ・２の３ を選択可能に ３が選択されたら ・３の１ ・３の２ ・３の３ を選択可能に と言う風にはどうすれば出来るでしょうか？ 教えてください、お願いします。
- 締切済み
- JavaScript
- セレクトボックスで警告
Javascriptの初心者です。 セレクトボックスが二つ(a,b)あるとして、 セレクトボックスa中の項目いずれかを選択肢すると、 セレクトボックスbのどの項目をも選択できないようにするため、 警告をだしたいのですが、 よい方法をご教授していただけなでしょうか。 よろしくお願いいたします。
- 締切済み
- JavaScript
- セレクトボックスの選択肢を直前の選択で変動させたい
お世話になります。 バイク王 http://www.8190.co.jp/ セレクトボックスを上記サイトのように 選択肢リストを直前の選択肢によって変化させて さらに、セレクトボックス横のボタンのリンクも変更させたいのですが、 どのように設定すればできますか？ サイトのheadタグ内に下記の記述があるのですが、 3つ目のセレクトボックスの選択肢を設定しているのがどのファイルなのかわかりません。 上記サイトと全く同じでなくても、 セレクトボックスが3つあって、 1つ目と2つ目の選択肢によって3つ目の選択肢リストが変わり、 ボックス横のボタンのリンクも変化するフォームの作成方法を ご存じでしたら、ぜひ教えていただけないでしょうか。 よろしくお願いいたします。 <script language="javascript" type="text/javascript"> function models_gen() { if ((document.sateiform.maker_id.selectedIndex > 0)&&(document.sateiform.engine_size_id. selectedIndex > 0)){ var uri = '/online/modellist/'+document.sateiform.maker_id.value+'/'+document.sateiform.engine_size_id.value; new Ajax.Updater('placebikelist', uri, { method: 'get'}); } } function satei_prepare() { if((document.sateiform.maker_id.selectedIndex > 0) &&(document.sateiform.engine_size_id.selectedIndex > 0) &&(document.sateiform.model_id.selectedIndex > 0)){ return true; } else{ alert('バイクを選択してください'); return false; } } --> </script>
- ベストアンサー
- JavaScript
- セレクトボックスの「選択してください」選択しても、未選択として扱いたい
メールフォームを作成しています。 CGIのメールプログラムを使って、セレクトボックス「A」を必須入力項目としたのですが、一番上のものが「選択されている」とみなされてしまい、改めて選択しなくても、メールが送信できてしまいます。 <select name="A"> <option value="選択してください"> 選択してください</option> <option valui="1">1</option> <option valui="2">2</option> <option valui="3">3</option> <option valui="4">4</option> </select> どうしたらいいでしょうか。 助けて下さる方、お待ちしております。
- ベストアンサー
- HTML
- セレクトボックスのデータをリストボックスへ書き出す
javascript初心者です。よろしくお願いします。 まず年月日を３つのセレクトボックスで作成する。 追加ボタンを押すと、選択した年月日のデータをリストボックスに書き出すことができる。 ※ここでリストボックスのサイズは３に指定しておき、項目が３以上の場合はスクロールさせる。 さらに削除ボタンを作成し、リストからデータを削除できるようにする。 以上のような仕組みを作りたいのですが．．． どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 複数のセレクトボックスで
二つのセレクトボックスがあり、それぞれ ボックス1⇒1、2 ボックス2⇒1、2、3 と選択項目があります。 ボタンは一つで、それぞれの組み合わせによって別々のURLに飛ばすもの作りたいのですが、どうしたらいいんでしょう？
- ベストアンサー
- PHP
- セレクトボックスの初期選択と選択保持
セレクトボックスで選択した日付でカレンダーの検索を行いたいです。 起動したときは当日日付を表示させ、検索後は選択した日付をそのまま表示させておきたいのですがうまくいきません。 javascriptを使用するのではないかと思うのですが、初心者のため記述の仕方がよくわかりません。 どなたかご教授いただけるとうれしいです。よろしくおねがいします。
- ベストアンサー
- JavaScript
お礼
とてもわかりやすい回答ありがとうございました。 おかげさまでやりたかったことが出来ました。 本当にありがとうございます♪