javascriptでwaveファイルの事前読込み

質問

クリックしたときに、音を鳴らしてからURLを移動するタグを利用しているのですが、
どうしても音の再生が遅れてしまいます。

事前にwaveファイルを読み込んで、スムーズに再生をさせるにはどうすればよいので
しょうか？

現在、head内に

$(function(){
$('a.click').click(function(){
$('embed').remove();
$('body').append('<embed src="〇〇〇.wav" autostart="true" hidden="true" loop="false">');
});
});

bodyのリンクを表示させる箇所には
<a href="http://www.example.com" class="click">リンク</a>

のように表記しています。

どうぞよろしくお願いします。

回答No.3

n_a_o_11 · ベストアンサー

Mac
Safari5、Chrome12、Firefox4、Opera11、OK

WIN XP
IE8、OK

Chrome12 、　
autostart="false"に対応してないみたいなので、
<DIV id="sud"></DIV>の下の<object~ ></object>の
先読み部分を削除すればページを開いた時に鳴らない。

Opera11、
objectに対応してないようで、embedだとOK。

Firefox4、
width="0" height="0"に対応しなくなったらしい。
それでstyle="height:0;width:0;"でOK

embedを置いてみたので確認してみて。
http://www.geocities.jp/n_a_o11/test/test26a.html
object
http://www.geocities.jp/n_a_o11/test/test26b.html

お礼

色々とありがとうございました

デモページばっちりとうごきました。

自分で入力したサイトだと何故かＩＥだけ読めないのですが（他のＰＣで見ると再生の途中で打ち切られます。setTimeout('jump("'+el.href+'")',1000)を5000程度に設定しても状況は変わりませんでした。）、これ以上はご迷惑かと思い、ひとまず締め切らせていただきます。

本当にありがとうございました。

回答No.2

n_a_o_11

サウンドファイルを、最初に無音の処が無いように、
なるべくmp3やMIDIファイルのように軽いファイルで
クリックしたら直ぐ鳴るように作り、
クリックするファイルと同じディレクトリーに置く。
クリックして音が鳴ってから
1～2秒後にジャンプするようにすれば良い。

display: noneだと他のブラウザでは音は出ない。
IEでobjectの時のみで、embedの時は出ない。

<script type="text/javascript"> <!--
var sfile = "./g.aiff";
function lnkSound(el,num){
if (document.getElementById) {
var Music = ('<object data=" '+sfile+' " type="audio/mp3" height="0" width="0"><param name="src" value=" '+sfile+' " valuetype="ref" type="audio/mp3"><param name="autostart" value="true"><param name="loop" value="false"><param name="repeat" value="false"></object>');//nobr
document.getElementById("sud").innerHTML = Music;
}
else { return true; }
if (!num) {
setTimeout('jump("'+el.href+'")',1000);//おかしくない位になるべく遅くする(秒)
}
return false;
}

function jump(url){
location.href = url;
//window.open(url,"_blank");//ポップアップブロックではオープンしない
}
//-->
</script>

<div id="sud"></div>
<object type="audio/mp3" data="./g.aiff" height="0" width="0">
<param name="src" value="./g.aiff" type="audio/mp3" >
<param name="autostart" value="false">
<param name="loop" value="false">
<param name="repeat" value="false">
<param name="controls" value="console">
</object>

<a href="../anotherpage.html" onClick="return lnkSound('./g.aiff')">
anotherpage.html
</a>
下記参照
http://www.geocities.jp/n_a_o11/test/test26b.html

お礼

n_a_o_11様

お返事遅くなってしまい、申し訳ありません。

教えていただいた方法ためさせていただきました。（テストページまで作成していただき、どうもありがとうございました。）

各ブラウザでの動作は、以下のようになりました。
〇ＩＥ7.0　動作せず
〇Chrome　ページを開いた瞬間に音がなります。クリック後もなります。
〇Opera　動作せず
〇FireFox　プラグインがクラッシュ（ブラウザ側の問題でしょうか）
〇Safari　正常に作動

私が入力したサイトだけではなく、テストページも同様の状況です。

もしお時間がありましたら、もう少しご教授いただけると幸いです。

どうぞ宜しくお願いします。

回答No.1

think49

jQuery 的には jQuery.ajax() でしょうか…。
http://api.jquery.com/jQuery.ajax/

1. jQuery.ajax()
2. new Audio (※ブラウザがHTML5に対応している必要有り)
3. <embed style="display: none;" autostart="false" src="hoge.wav">

お礼

think49様

投稿ありがとうございます。
ちなみに、そのタグはどの部分に打ち込めば良いのでしょうか？
また、元のタグは消去するのでしょうか？
申し訳ありませんが、全くの初心者なので手ほどきいただけると助かります。