2

我知道这是一个在网络上涉及很多的话题，但我现在真的很沮丧。

我正在使用 ASP 3.5，当用户单击我网站上的按钮时，我想播放音频 .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;\" />";

我这样做是因为它是一个有很多不同人“个人资料”的网站，可以这么说，我希望一个人能够点击一个按钮并听到一个与他们相关的 .wav 文件。

当我单击按钮时，页面只是刷新，没有播放。有什么建议么？

编辑：抱歉，我在按钮内传递参数存在一些差异，并且我的 playSound() 没有采用方法。我在玩 playSound() 方法并对其进行了更改，因此它现在不需要参数，但想象一下它确实如此。

Edit2：再次道歉，但使用 Response.Write(audioScript) 将音频脚本写入页面

Edit3：好的，想通了！我认为这是由于我自己的愚蠢，对所有试图帮助我的人感到抱歉（尤其是乔希：/）

所以问题是我的 Response.Write(audioScript) 使我的按钮不在我的 soundDummy div 中。出于某种原因，我认为我可以将我的按钮生成放在一个不同的 div 中，而不是我从我的 javascript 函数中嵌入 html 的那个。所以现在它看起来有点像这样：

<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); %>

如果有人能告诉我为什么第一个有效，而第二个无效，那就太好了！但就目前而言，我很高兴它终于发出了声音:)。

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 回答