2

これはウェブ上で多く取り上げられているトピックであることは知っていますが、今は本当にイライラしています。

ASP 3.5を使用していますが、ユーザーがWebサイトのボタンをクリックしたときにオーディオ.wavファイルを再生したいと思います。非常に単純なはずですよね？

これは私のコードです：

このJavaScript関数はasp：Contentブロックに配置されます。私はそれが正しいことを確認しました、他のjs関数は動作します。

function playSound() {
            document.getElementById("soundDummy").innerHTML = "<embed src='file.wav' autostart=true loop=false volume=100 hidden=true>";
            return true;
        }

soundDummyは、何も含まれていないランダムなdivです。

ただし、ボタンは私のコードビハインドで生成されます。

audioScript = "<input type=\"image\" src=\"images/Audio_Icon_Small.jpg\" onclick=\"playSound('" + person.audioName + ".wav')\" style=\"border-width:0px;\" />";

これを行うのは、さまざまな人の「プロファイル」がたくさんあるWebサイトで、ボタンをクリックして、それらに関連付けられた.wavファイルを聞くことができるようにするためです。

ボタンをクリックすると、ページが更新され、何も再生されません。助言がありますか？

編集：申し訳ありませんが、ボタン内のパラメーターを渡しており、playSound（）がメソッドを使用していないという不一致があります。私はplaySound（）メソッドで遊んでいて、今はパラメーターを受け取らないように変更しましたが、そうなると想像してみてください。

Edit2：もう一度お詫びしますが、audioScriptはResponse.Write（audioScript）を使用してページに書き込まれます

Edit3：わかりました、わかりました！それは私自身の愚かさによるものだと思うので、私を助けようとしたすべての人（特にジョシュ：/）に申し訳ありません

そのため、問題は、ボタンを作成するResponse.Write（audioScript）がsoundDummydivにないことでした。何らかの理由で、ボタンの生成をjavascript関数からhtmlを埋め込んだものとは別のdivに配置できると考えていました。これで、次のようになります。

<div style="text-align: center">
   <p>
      <div id="soundDummy">
         <% Response.Write(audioScript); %>
      </div>

とは対照的に：

<div id="soundDummy"></div>
<div style="text-align: center">
   <p>
       <% Response.Write(audioScript); %>

最初のものが機能する理由を誰かが教えてくれても、2番目のものが機能しない場合は、それは素晴らしいことです！しかし、今のところ、私はそれが最終的に音を出すことを嬉しく思います:)。

4

1 に答える 1

1

その要素をクリックすると、ブラウザはフォームを送信しようとしていると認識します。

イベントがバブルアップするのを防ぐ必要があります。これは、false を返すか、preventDefaultを使用して実行できます。

イベントの伝播を防ぐことは、すべてのブラウザーで一貫して実装されているわけではないため、jQuery を使用することをお勧めしますが、要点を証明する簡単なフィドルを次に示します。

http://jsfiddle.net/jwcarroll/S2vhX/

<form>Will Submit
    <input id="will" type='image' src='' />Won't Submit
    <input id="wont" type='image' src='' />
</form>

(function () {

    function stopDefAction(evt) {
        evt.preventDefault();
    }

    document.getElementById('wont').addEventListener(
        'click', stopDefAction, false);

}());

jQuery を使用して (フォームを送信せずに) サウンドを再生する実際の例を次に示します。

http://jsfiddle.net/jwcarroll/CtFRY/

<form>
    Sword Slash
    <input class="playsound" type='image' src=''  
           data-audio-url='http://noproblo.dayjo.org/ZeldaSounds/LOZ/LOZ_Sword.wav' />
    Shield
    <input class="playsound" type='image' src='' 
           data-audio-url='http://noproblo.dayjo.org/ZeldaSounds/LOZ/LOZ_Shield.wav' />
    <audio id="playTarget" src="" autoplay style="display:none">
</form>

(function () {

    $(".playsound").on("click", function (e) {
        var url = $(this).data("audio-url");

        $("#playTarget").attr("src", url);

        e.preventDefault();
    });

}());
于 2013-03-07T21:48:50.827 に答える