Question

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

我正在使用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）将audioScript写入页面

Edit3：好的，想通了！我认为这是由于我自己的愚蠢，所以那些试图帮助我的人都很抱歉（特别是Josh：/）

所以问题是我的Response.Write（audioScript）让我的按钮不在我的soundDummy div中。我出于某种原因认为我可以将我的按钮生成放在与我从javascript函数中嵌入html的div不同的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); %>

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

Answer 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();
    });

}());

从ASP.NET中的按钮播放声音

1 个答案: