- ベストアンサー
ページ切り替え時に音を鳴らしたいのですが・・・
いつもお世話になっております。 よろしくお願いします。 ホームページを作っているのですが、ＡというページからＢというページに切り替えるときに、4秒くらいの効果音を鳴らしたいです。 私が調べたやり方は 方法１：ページＡにある、Ｂへのリンクをクリックしたときにその音を鳴らす 方法２：ページＢで、１回だけその音を鳴らす という２つの方法でした。 実際やってみると、以下の点が不満でした。 方法１だと、音が鳴り終わるまでまってからページが切り替わってしまう。 方法２だと、他のページからＢに行ったときも毎回音が鳴る（これが相当鬱陶しい）。 出来れば上記不満を解消するいいやり方を教えてもらいたいのです。きっとJavaScriptを使ったやり方でいい方法があるはずと思うのですが、ピッタリ来るものを探しきりませんでした。 どなたかご教授ください。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
●サンプル１ javascriptでreferrer（リンク元）がページＡだった場合のみ音を鳴らす方法です。 当然、javascriptの可否に依存します。またreferrerをブロックされていたりなどもありえます。 ※ページＡのファイル名が「pageA.html」、音声ファイルが「sound.wav」と仮定。 --------------- <html> <head> <bgsound id="enter_sound" loop="1"> <script type="text/javascript"> <!-- function PageEnter() { var pageAURL = "pageA.html"; ★ページＡのファイル名 var prevURL = document.referrer; if (prevURL.slice(-(pageAURL.length)) == pageAURL) { enter_sound.src="sound.wav"; ★音声ファイル名 } } --> </script> </head> <body onload="PageEnter()"> ～～～ </body> </html> --------------- ●サンプル２ ANo.2 の方もおっしゃっている方法で、javascriptで特定のパラメーターつきでアクセスされた場合のみ音を鳴らす方法です。ページＡからじゃなくても自由に制御できます。 サンプル１同様、javascriptの可否に依存します。 このページへのリンクで、「<a href="pageB2.html?sound">～</a>」などと末尾に「?sound」を付けると音が鳴る。付けなければ鳴らない。 --------------- <html> <head> <bgsound id="enter_sound" loop="1"> <script type="text/javascript"> <!-- function PageEnter() { var param = location.search; if (param == "?sound") { enter_sound.src="sound.wav"; ★音声ファイル名 } } --> </script> </head> <body onload="PageEnter()"> ～～～ </body> </html> --------------- ●サンプル３ javascriptもCGIスクリプトも使わない方法としては、フレームを使う方法が考えられます。ANo.1の方の案と似ていますが、音を鳴らしたい場合だけフレームつきでアクセスさせる、という方法です。これもページＡからじゃなくても自由に制御できます。 音を鳴らしたい場合は以下のページにリンクし、鳴らしたくない場合は直接ページＢにリンクする。 --------------- <html> <head> <bgsound src="sound.wav" loop="1"> ★音声ファイル名 </head> <frameset cols="100%"> <frame src="pageB.htm" frameborder="0"> ★ページＢのファイル名 </frameset> </html> ---------------
その他の回答 (6)
- taseki
- ベストアンサー率66% (155/233)
そのエラーから考えられるのは、 <bgsound id="enter_sound" loop="1"> を入れ忘れているか、構文ミスぐらいですかね。 ためしに、今あるHTMLに組み込むのではなく、とりあえず下のサンプルコードをそのまま（★の部分だけ直して）の状態で、動かしてみてはどうでしょう。
お礼
ありがとうございます。 なんとか、なんとかクリア致しました。 皆様のおかげです！
- taseki
- ベストアンサー率66% (155/233)
エラーの件とは別に、念のため捕捉しておきます。 「音を鳴らすかどうか」の判断方法は別として、「音を鳴らす方法」自体は、ブラウザに依存するので注意が必要です。 具体的に言えばタグの対応状況が違います。 たとえばbgsoundタグは確かIE専用、標準HTML的に推奨されるのはobjectタグだと思いますが、プラグインなどに依存したり埋め込み方が面倒であったりします。 embedタグは、標準HTML的には推奨されないかもしれませんが、とりあえず実現したい場合、少しでも多くの環境でおそらく無難、というのを踏まえるなら、選択肢の一つだと思います。 ちなみに、bgsoundタグをそのままの形式でembedに置き換えるだけで使えると思います。 また、サンプルを試したところ、Win＋IEでは問題なく動作しました。ただしreferrerはローカル環境では正常に機能しない場合があるので、サーバーにアップロードして試してみてください。
- taseki
- ベストアンサー率66% (155/233)
> 後者はなぜかうまくいきませんでした。 サンプル１のことですよね？ > IEのステータスバーにエラーのびっくりマーク この、びっくりマークをダブルクリックすると、エラーの内容が表示されますか？ その内容を教えてください。 また、できればHTMLソース（head部分だけでも）も見せていただけると何か分かるかもしれません。
補足
何度もありがとうございます。 取り急ぎエラーの内容だけ伝えさせて頂きます。 ライン：9 文字：1 エラー：オブジェクトを指定してください コード：0 です。 ソースはほとんどいただいたものと同じです。 掲載してもかまわないと思ったのですが、うまくいかなくて一旦削除した状態にしてしまったので、意味が無いかなと思います。 Body部分に背景をランダムに変えるJavaScriptがある位で、後は特別何をしているという事もないページです。
- koutarou504
- ベストアンサー率44% (182/407)
pagea.htm にて、 <a href="./pageb.htm?test">ページＢ</a> として、 pageb.htm に於いて <script type="text/javascript"><!-- if(window.self.location.search=="?test"){ alert("ページＡから呼ばれました。"); } // --> </script> とする事で処理の分岐は出来ます。 あとは document.write で音を出す処を書き出す様にするなり ＃１の方がフレームで行おうとしていた事をページＢだけで行う事も出来ます。 まぁＣＧＩでもないのにパラメータがアドレスにあり 気になるかもしれませんが。 尚、それこそＨＴＭＬなのでアドレスに文字が付加されているだけで他に何も影響はありません。 とりあえずWIN XP SP2 での IE6.0, Mozilla1.7.5, Opera7.54u2 で検証しました。
お礼
回答ありがとうございます。 おまけに動作検証まで・・・。本当にありがとうございます！ #3の方の例にも書きましたとおりブラウザの「戻る」を使った場合ずっとパラメータが残る（のかな？）のが課題となってしまいました。 #1さんの仰るフレームは、別の理由で出来れば使いたくはないんですよね・・・。
- koutarou504
- ベストアンサー率44% (182/407)
技術的に一番簡単なのが、 Ｂその２ というページを作る事です。 ＢとＢその２はほぼ同じ物で音がするかしないかが違うだけです。 これでＡからはＢその２を呼び、他からはそれまでのＢを呼べば音が鬱陶しいのは回避できます。 欠点は更新が面倒・・・。まぁ音の仕掛けを除いて丸ごとコピーですが。 次はＣＧＩの利用。 といっても、実質Ａから呼ばれた時とそれ以外から呼ばれた時に別のＨＴＭＬを書き出す様にするだけで、中身は上記のＢその２を用意するのと同じ。 ただＣＧＩからの書き出しなので元ネタは１つで済むので更新がラク。 欠点はＣＧＩの知識と環境が必要。 ＣＧＩを使わせてもらえないサーバもありますし・・・。 その次はJavaScript。呼び出すＡでフォームでパラメータ付きでＢを呼び出し、 Ｂで自分のアドレスを解釈してパラメータを判別し Ａから呼ばれたと振り分けられた時に音を鳴らす。 欠点は、javascriptが無効だと振り分けられない。 まぁお勧めは最初の２つ用意する事です。 とにかく簡単ですし・・・。
お礼
回答ありがとうございます。既に2件もついているなんて・・・。 2つのページを用意するやり方は、ページ構成上ブラウザの「戻る」を使用される可能性が高いので、せっかくご提案いただきましたがちょっと採用できないです。 残念ながらCGIも使えないのです。 3つ目のやり方がいいなあと思うのですが、それを自力で組み上げる技術は無い状況です。どこかにちょっと加工すればすみそうなサンプルなどございませんでしょうか？質問の上に質問を重ねてすみません。
- ttyp03
- ベストアンサー率28% (277/960)
以前に同じようなことをやりました。 その時はフレームを使いました。 つまり別々のフレームなら非同期に動作します。 まず音専用のフレームを用意します（見えないように）。 これの中身は簡単です。 <html> <head> <bgsound id="bgm" src="" loop=1> </head> </html> そしてＡページのＢへのリンクをクリックしたタイミングで、JavaScriptで次のようにします。 window.top.f1.bgm.src = "audiofile"; f1は音専用のフレーム名です。 audiofileに再生するファイルを指定します。 こんなんでどうでしょうか？
お礼
素早い回答ありがとうございます。 フレームを使うとは考えませんでした。 明日、うまくいくかどうかさっそく試してみます。
お礼
回答ありがとうございます。 皆さんの回答を見て、テストしてみました。 ＃2さん、＃3さんの提示されているパラメータ、 ＃3さんの提示されているリンク元がページAだった場合のやり方を実際やってみました。 前者はうまくいきましたが、ページBにあるメニューから他のページ（例えばページC）を見た後、CにあるリンクでページBに戻る分にはうまくいきました！ ところがブラウザの「戻る」で戻る場合には音が鳴らされるのが継続されてしまいました。そこが残念です。 後者はなぜかうまくいきませんでした。 ページAからページBへのリンクはMAPタグを使って画像の一部をクリックする方式でしたので、その辺に不都合があるのかと思って、普通のハイパーリンクを作って試してもうまくいかず、IEのステータスバーにエラーのびっくりマークがつきます。 じつは後者の方法が1ページだけの編集で済むので、一番よさそうだと思っていたのですが・・・。私の編集がまずかったのでしょうか？ 何か思い当たる節があればご指導ください。