MIDIコンテンツのための小窓を作成する方法
- 自分のホームページでMIDIのコンテンツを作成する際、小窓を使用してユーザーが曲を試聴できるようにする方法について知りたいです。
- 通常、小窓を出すためには別のHTMLファイルを用意する必要がありますが、変数や他の方法を使用して、ユーザーが試聴ボタンをクリックするだけで小窓の題名とMIDIが入れ替わる方法を知りたいです。
- 画像のクリックで小窓を表示し、曲名ごとに試聴できるMIDIを再生する方法について、具体的な作り方や参考サイトを教えていただけると助かります。
- ベストアンサー
小窓をだしてMIDIを流すのですが。
自分のホームページでMIDIのコンテンツを作ろうと思ってます。 で、曲名の後ろの「試聴」のボタン（画像）を押したら、小窓が出てその曲名のMIDIがなるようにしたいのです。 Ａの曲の試聴ボタンを押せば、小窓はＡのMIDIが鳴り、Ｂの曲の試聴ボタンを押せばＢのMIDIが鳴るという感じです。（小窓は複数出さないです） こういうjavascriptは、さがしたらいくつかあったのですが、ここからが問題。私が今までみたものはすべて、小窓は別のHTMLファイルを用意しています。Ａの試聴ボタンを押したら、Ａのmidiを鳴らすためのHTMLファイルへリンクしてるのですよ。もし、１０曲試聴してもらおうとしたら、１０個のHTMLファイルを用意しなくてはいけないわけです。 私が、欲しいなぁ・・・と思ってるのは、別HTMLファイルを用意せずに、変数か何かを使って、Ａの試聴ボタンを押したら小窓の題名とMIDIがＡ用に入れ替わって、Ｂの試聴ボタンを押したら小窓の題名とMIDIが入れ替わる・・・みたいなのなのですが。（この説明で分かるかなぁ・・・） コンボボックスならそういうのがあるのは見つけたのですが、画像のクリックでやりたい！と思ってます。いろいろなサイトをまわりましたが、見つかりません。自作しようとも思いましたがまだまだ勉強中の身で、できませんでした。 このようなjavascriptの作り方を知ってる、又は作り方の出ているサイトを知ってる方いましたら、教えていただけますか？
- sanbi
- お礼率86% (59/68)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> http://www.oitaweb.ne.jp/hp/tatsuya/java/bgm3.htm > で、コンボボックスではなくて、ボタンで・・・と考えていました。 なるほど、ウィンドウを開く方から document.write() する、って手もある んですね。 ってことは、ラジオボタン（で良い？）から myGo() を呼び出せば良いだけね。 それなら、もっと簡単。 まずは、<form> のところを以下のような感じに。 <form name="myForm"> ☆☆ お好きな曲を選んでください ☆☆ <br> <input type=radio name=myMenu value=0 onClick="myGo(this)">日曜画家<br> <input type=radio name=myMenu value=1 onClick="myGo(this)">渚のヒロイン </form> それから、関数 myGo() の先頭あたりを以下のような感じに。 function myGo(btn){ mySelect = btn.value; myWin = window.open("" , "bgmwin","width=210,height=160"); // ここは、変わってません いかが？
その他の回答 (1)
- a-kuma
- ベストアンサー率50% (1122/2211)
CGI を起動するときに get で渡すパラメータって、実は HTML でも指定でき、 Javascript で利用することができます。 それを利用して、曲名と URL を渡す例を、簡単に作ってみました。 この例では、小窓で <a> タグで表示していますが、パラメータさえ渡せれば MIDI を鳴らすことはできるのですよね？ ■曲名一覧が有る html <html> <body> <script type="text/JavaScript"> function open_win(title, url) { // 題名は漢字が入るかもしれないから escape しておく u = "sound.htm" + "?title=" + escape(title) + "&url=" + url; window.open(u, "a", "height=100,width=100"); } </script> <form name="X"> <input type=button value=" 曲Ａ " onClick="open_win('曲Ａ', 'a.htm')"> <input type=button value=" 曲Ｂ " onClick="open_win('曲Ｂ', 'b.htm')"> </form> </body> </html> ■渡されたパラメータを使う html （sound.htm） <html> <script type="text/JavaScript"> // パラメータをばらして、title と url の内容を設定する var title; var url; p = location.search; // これがパラメータ（？以降）を表す v = p.substring(1).split("&"); // 一文字目の？の後を、＆で分割する t = v[0].split("="); // ひとつめは title=??? のはず title = unescape(t[1]); // 題名は漢字が入るかもしれない… t = v[1].split("="); // ふたつめは url=??? のはず url = t[1]; </script> <head> <script type="text/JavaScript"> document.write("<title>" + title + "</title>"); </script> </head> <body> <script type="text/JavaScript"> document.write("<a href=\"" + url + "\">"); document.write(title); </script> </a> </body> </html> エラーチェックなんかもばっさり削ってますが、参考になりますか？
補足
お早い回答ありがとうございます。 わざわざ作っていただいて、嬉しいです。 しかし、悲しいことにJavascript幼稚園児の私には、a-kumaさんの回答が漠然としか分かっておりません(;_;)なんとなぁく、分かるという感じでしょうか。 私が考えていたのは http://www.oitaweb.ne.jp/hp/tatsuya/java/bgm3.htm で、コンボボックスではなくて、ボタンで・・・と考えていました。 もう少し、じっくり見せていただいて、勉強します。
関連するQ&A
- 小窓を出したい。
画像が多いHPを作成中です。 １つのページに画像をいくつか入れるよりも、 小さい画像をクリックすると、大きな画像で見れるようにした方がいいと聞きました。 そこで、Java Scriptを使って小窓で見れるようにしたいと思いました。 １ページにテーブルを作り、画像をいくつか入れているのですが、１画像ごとに小窓で見れるようにしたいのです。 Aの画像をクリック→小窓A Bの画像をクリック→小窓B ↑ のように、違う小窓が出てくるようにしたい。 色々と画像が多いHPを作成中です。 １つのページに画像をいくつか入れるよりも、 小さい画像をクリックすると、大きな画像で見れるようにした方がいいと聞きました。 そこで、Java Scriptを使って小窓で見れるようにしたいと思いました。 １ページにテーブルを作り、画像をいくつか入れているのですが、１画像ごとに小窓で見れるようにしたいのです。 Aの画像をクリック→小窓A Bの画像をクリック→小窓B ↑ のように、違う小窓が出てくるようにしたいのです。 Java Scriptを使うのはまったく初めてなのですが、 上記の場合のJava Scriptの書き方えを教えて下さい。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- 小窓の出し方について教えて下さい。(2)
http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 先ほどご回答を頂き、小窓の開き方は解決致しました。 ↓ <script type="text/javascript"><!-- function subwin(imgsrc,imgalt){ sub1=window.open("","subwin","width=230,height=160,resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> body内の、呼び出し部分は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> が、クリックして開く小窓に表示させるHTMLファイルで開かせたい 画像が同じページにあります。（大きさは横５００縦６００） もう１つ教えて頂いた↓ <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=230, height=160"); } //--></script> 以上をhead内に記述して、呼び出し部分は <a href="#" onClick="subwin('読み出すHTMLファイルのURL'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> のwidth=230, height=160をwidth=500, height=600にして上記ソースに加えると（？） 全部の小窓がwidth=500, height=600になってしまいます。 width=230, height=160の画像で開かせる小窓と width=500, height=600のHTMLで開かせたい小窓を 同じページに加えるには、どうしたらよいのでしょうか？ ご回答宜しくお願い致します。
- 締切済み
- JavaScript
- 小窓にパラメータを送る。
javascriptで開く小窓にパラメータを渡したいのですが、中々良い方法が思いつきません。 アドバイスをお願いします。 ・ラジオボタンが２つあり、それぞれA、BというVALUEを持っている。 ・６桁の数字が複数あり、その横に[チェック]というアンカーがついている。 ・Aを選択された状態で[チェック]を押すと小窓が開かれ、[チェック]の隣にある６桁の数字を小窓に受け渡し表示する。 ・Bを選択された状態で[チェック]を押すと別のページに飛び[チェック]の隣にある６桁の数字を受け渡し表示する。 ・６桁の数字は複数ある。 ○Ａ...○Ｂ 111111...[チェック] 222222...[チェック] 333333...[チェック] ○=ラジオボタン [チェック]=アンカー 宜しくお願いします。 ちなみにasp内で使用します。
- 締切済み
- JavaScript
- FlashCS4 ActionScript3.0 小窓を開く
FlashCS4を使用し、ボタンをクリックすると、ウィンドウサイズを指定して新しいウィンドウで開きたいのですが、やり方がわかりません。 まず、Flashでは、にActionScript3.0で何らかのスクリプトを書き込んで、その「swf」ファイルを「HTML」ファイルに入れ、また何らかのコードを編集し、小窓で開くHTML側にも何らかのJavaScriptを入れるそうですが、どのようなコードを入れるのかわかりません。 ActionScript1.0での方法は探せたのですが、3.0での方法が分かりません。どなたかわかる方教えてください。購入したばかりで本当の初心者です。よろしくお願いします。
- 締切済み
- JavaScript
- 小窓の表示方法について
自分の作品をホームページで掲載しているのですが、小窓で開く際、作品Aを開いたら1つの小窓が出てきて、作品Bを開くと、小窓内の作品Aを消して作品Bが表示されるような感じにしたいんです。 要するに、小窓を1つだけ開くようにさせたいんですが、今は作品をそれぞれ違う小窓で開くようにしか出来てません。 どうやれば1つの小窓で作品を開けるようになるのでしょうか。 今入れてるスクリプトとタグです↓ function showSubWindow(url) { var win = window.open ( url,"", "width=500,height=600,scrollbars=yes"); } No.00 <a href="JavaScript:showSubWindow('作品A.html');">作品A</a> No.00 <a href="JavaScript:showSubWindow('作品B.html');">作品B</a> 調べてみたのですが、よく分からなかったため質問させていただきました。 細かく説明されているサイトなどがあれば、それを紹介していただいてもOKです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 小窓の出し方について教えて下さい。
以前質問させていただいて、自分なりに頑張ってみたのですが、どうしても上手くいきませんでした。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=555060 テーブル内に画像が２０入れています。画像１つ１つをクリックしたら小窓が出るようにしたいのです。 小窓の大きさは横２３０縦１６０です。 画像の名前はP_1～P_20まであります。 <head>～</head>内に何を書けばいいのか、 テーブル内の画像タグ <a href="http://www○○/p1.html"><img src="p_1.jpg" border="0" width="70" height="48"></a> に、どうJavaScriptを入れればいいのかが 分かりません。 説明が分かりづらかったらすみません。 申し訳ありませんが、再度ご教授お願い致します。
- ベストアンサー
- JavaScript
- 小窓へのリンク方法
フラッシュに別窓へリンクしているボタンを置きたいのですが その別窓を小窓表示させたいため困っています。 いろいろ検索したのですが、htmlの方式 （リンクをはるページ自体がhtmlのもの）しか見当たらず フラッシュ（.swfファイル）からリンクさせる方法が見つかりませんでした。 またその小窓表示したいページのマージンを０にするなどの方法も試みましたが上手くいきません。 .swfファイルより別窓（これは普通のhtmlのページで、画像だけでなくテキストやプルダウンメニューなども含まれている）を小窓表示させるリンクをはるにはどのようにすればよいでしょうか。 もしくはその別窓に仕組む別の方法があればそれでも構いませんので教えてください。 宜しくお願いいたします。
- ベストアンサー
- Flash
- 小窓について。
現在、クリックすると小窓が開くようにして注意事項等を表示しています。 サイト内で小窓が3カ所あり、全てサイズが違います。 私は開いた小窓を閉じて次のアクションをおこすので気付かなかったのですが、 どうやら開いた小窓をそのままで次のアクションをおこし別の小窓を開く人には「見えない」(実際には開いているけれど、元々のページの下に隠れている。＆小窓のサイズが最初に開いた小窓のままで次に開いた小窓の内容とはサイズが合ってない)という事です。 現在使用中のタグは以下のものです。 どのように訂正すれば快適に表示することができるのでしょうか。 ＝HEAD内＝ <script type="text/javascript"> <!-- function subwin1(){window.open('△△.htm','miniwin', 'resizable=no,menubar=no,status=no,location=no,scrollbars=yes,toolbar=no,width=430,height=620');} --> </script> ＝BODY内＝ <A href="javascript:subwin1()"> 過去ログをどのように調べたらいいかわからなかった(適切な検索語句がわからない)ので新しく質問しました。 もし過去に同じような質問があれば、リンクを張っていただくだけでも構いません。 お手数おかけしますが、よろしくお願いします。
- ベストアンサー
- HTML
- 小窓について
はじめまして、お教え下さい。 goliveでHP作成してますが リンク先にgif画像の小窓を表示させたいのですが 具体的にはどうすればいいのでしょう？ 色々探したら下記のような表示がありましたが、例えばここにgif画像を差し込んで表示するにはどうすればいいのでしょう？ 何卒よろしくお願い致します。 <A href="javascript:w=window.open('アドレス','','scrollbars=yes,Width=250,Height=100');w.focus();">ポップアップ</A>
- ベストアンサー
- JavaScript
- 小窓を開きたい
素人なので質問もきちんと出来ているかわからないのですが、よろしくお願いします。 HPトップページを開くと小窓（New Window)が開くようにしたいのです。 TopPageはフレームで分かれていて、どの部分に書き込めばプログラムが実行されるのかがわかりません。 小窓の大きさは、下記に示したように小さなものでよいのです。 <script Language="JavaScript"><!-- function newWin(){ window.open("開きたいファイルのアドレス","","width=196,height=176","scrollbars=no","location=no","menubar=no"); } //--></script> これを<a href でプログラムを開くようなアドバイスがありましたが、どのようなことなのでしょうか？
- ベストアンサー
- JavaScript
お礼
できました！！ １ヶ月近く、悶々と考えていたことが解決できて、すっきりしました。 本当にありがとうございます。とても嬉しいです。 余談ですが・・a-kumaさんて、ものすごく回答されてますねぇ・・履歴見せていただいて、感心しちゃいました。