自分のホームページでMIDIのコンテンツを作ろうと思ってます。
で、曲名の後ろの「試聴」のボタン(画像)を押したら、小窓が出てその曲名のMIDIがなるようにしたいのです。
Aの曲の試聴ボタンを押せば、小窓はAのMIDIが鳴り、Bの曲の試聴ボタンを押せばBのMIDIが鳴るという感じです。(小窓は複数出さないです)
こういうjavascriptは、さがしたらいくつかあったのですが、ここからが問題。私が今までみたものはすべて、小窓は別のHTMLファイルを用意しています。Aの試聴ボタンを押したら、Aのmidiを鳴らすためのHTMLファイルへリンクしてるのですよ。もし、10曲試聴してもらおうとしたら、10個のHTMLファイルを用意しなくてはいけないわけです。
私が、欲しいなぁ・・・と思ってるのは、別HTMLファイルを用意せずに、変数か何かを使って、Aの試聴ボタンを押したら小窓の題名とMIDIがA用に入れ替わって、Bの試聴ボタンを押したら小窓の題名とMIDIが入れ替わる・・・みたいなのなのですが。(この説明で分かるかなぁ・・・) コンボボックスならそういうのがあるのは見つけたのですが、画像のクリックでやりたい!と思ってます。いろいろなサイトをまわりましたが、見つかりません。自作しようとも思いましたがまだまだ勉強中の身で、できませんでした。
このようなjavascriptの作り方を知ってる、又は作り方の出ているサイトを知ってる方いましたら、教えていただけますか?
No.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さんて、ものすごく回答されてますねぇ・・履歴見せていただいて、感心しちゃいました。
No.1
- 回答日時:
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=" 曲A " onClick="open_win('曲A', 'a.htm')">
<input type=button value=" 曲B " onClick="open_win('曲B', '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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(AV機器・カメラ) 電子ピアノに内蔵されているデモ曲を、PCやCDに入れて聴けるようにできますか? 以下、前回質問した内 2 2022/05/02 14:36
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- その他(パソコン・周辺機器) 電子ピアノに内蔵されているデモ曲を、PCやCDに入れて聴けるようにできますか? 古い電子ピアノなので 4 2022/04/27 15:12
- 作詞・作曲 DTM DAWとmidiキーボードについて 1 2022/10/20 16:41
- 楽器・演奏 Korg cx-3 new(2001~のモデル)を中古で購入しました。 しかし、音が出ません。症状と 2 2022/10/24 09:26
- マウス・キーボード キーボード設定で困っています。長文です。 2 2022/12/10 12:44
- 作詞・作曲 iMacでMIDIデータを良い音で再生するための音源をインストールする方法を教えて下さい 4 2022/07/09 17:51
- C言語・C++・C# プログラム内から、MIDIファイルの一部分だけを再生する方法 1 2023/02/15 11:08
- 音楽・動画 spotifyというアプリで音楽を聴いています。自分が選んだ好きな曲を聴いてました。最近ボタン押し間 4 2023/02/07 13:19
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
入力フォームの javascript で ...
-
JavaScript 超初心者です。 Doc...
-
GETをPOSTに変更したところ 送...
-
submitをボタン以外にするには
-
動的にnema属性が変化する場合...
-
セレクトボックスの幅をプルダ...
-
inputタグのclass名にコロン「:...
-
1アクションでPOST・GET、両方...
-
HTMLのフォームタグの送信順に...
-
プルダウンメニューアイテムの...
-
複数のフォームを一括で送信す...
-
リンクをクリックした時にform...
-
CGI動作後に元のページに戻る方法
-
ドロップダウンボックスに・・
-
HTMLのoptionタグ部分に画像を...
-
JavaScriptでフォームへのフォ...
-
送信フォームを2つ用意する方法
-
type="hidden"を使って時刻を送信
-
送信ボタン押下時に値が未入力...
-
・フォームの送信先(action)...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
親ページからインラインフレー...
-
入力フォームの javascript で ...
-
画像をボタンのようにフォーカ...
-
JavaScript の 「showDialog」
-
[onClick]ボタンを押すことで入...
-
パスワードをIPする際見えな...
-
submit時に違うページに飛びたい
-
確認ダイアログ表示後、他のペ...
-
a.href の href を有効か無効に...
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
送信ボタン押下時に値が未入力...
-
複数のフォームを一括で送信す...
-
URL パラメータを使ってフォー...
-
HTMLのoptionタグ部分に画像を...
-
【html】)パスワード認証フォー...
-
フォーム要素以外にもname属性...
-
リンクをクリックした時にform...
-
1つのformで複数のactionを実...
-
GETをPOSTに変更したところ 送...
おすすめ情報