2013-03-07 171 views
2

我知道這是一個在網絡上涉及很多的話題,但我現在非常沮喪。從ASP.NET中的按鈕播放聲音

我使用ASP 3.5,當用戶點擊我網站上的按鈕時,我想播放音頻.wav文件。應該很簡單吧?

這是我的代碼:

此JavaScript功能被放置在一個asp:內容塊。我已經驗證它是正確的,其他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;\" />"; 

我這樣做是因爲它的一個網站,有很多不同的人「曲線」因此T說,我想一個人能夠按一下按鈕,聽到與之相關的.wav文件。

當我點擊按鈕,頁面刷新,沒有播放。有什麼建議麼?

編輯:對不起,我在傳遞按鈕中的參數有一些差異,並且我的playSound()沒有采用方法。我正在玩playSound()方法,並改變它,所以它現在不需要參數,但想象它的確如此。

EDIT2:再次道歉,但audioScript寫入到使用的Response.Write(audioScript)

EDIT3頁面:好了,想通了!我認爲這是由於我自己的愚蠢,對所有那些試圖幫助我(尤其是喬希:/)的人感到抱歉

所以問題是我的Response.Write(audioScript)讓我的按鈕不在我的soundDummy 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); %> 

如果有人能告訴我爲什麼第一個工作,但第二個沒有,那太棒了!但就目前而言,我只是很高興它終於發揮了聲音:)。

+0

是否有''元素在那裏我們看不到? – Josh 2013-03-07 21:49:55

+0

當你右鍵點擊>在你的網頁上查看源代碼時,元素的ID實際上是「soundDummy」還是像master_content_soundDummy? – RandomUs1r 2013-03-07 21:50:19

+0

對不起,我一直在編輯,因爲我剛剛意識到<>中的東西沒有出現。元素的ID實際上是soundDummy,主對象的內容是動態生成對象時發生的事情嗎? – user2146181 2013-03-07 21:53:27

回答

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

}()); 
+0

我試着改變它返回false;雖然沒有任何反應:/ return false;防止回傳正確?我試着運行方法onClientClick =「playSound(); return false;」那也不行。 – user2146181 2013-03-07 21:54:40

+0

使用提交按鈕時,頁面刷新是正常行爲。這是什麼type ='圖像'基本上是...一個圖形提交按鈕。您必須防止將頁面提交回服務器的默認行爲。 – Josh 2013-03-07 21:55:55

+0

好的,陷阱。我如何去防止這種情況?返回假;在javascript函數的結尾似乎仍然會刷新(也沒有聲音播放)。 – user2146181 2013-03-07 22:00:17