不同的按鈕點擊音頻播放/暫停Jquery

Question

這是一個簡單的查詢，但不知怎的，我似乎無法將手指放在似乎出錯的地方。

我有兩個按鈕，即'問題'和'需要'。在點擊前者時，音頻文件1需要被播放，類似地，當稍後被點擊時，音頻文件1應該停止並且音頻文件2被播放。這都是我爲同一編寫的代碼是這樣的：

var playing = false; 

$("#problem").click(function(event) { 
    $("#audio").html(''); 
    $("#audio").html('<source src="audio/expertise/file1.mp3" type="audio/mp3"><source src="audio/expertise/file1.wav" type="audio/x-wav"><source src="audio/expertise/file1.ogg" type="audio/ogg">'); 
    playing = true; 
}); 

$('.need_btn').attr('id', 'need_btn'); 

$("#need_btn").click(function(event) { 
    if (playing == true) { 
     $("#audio").trigger('pause'); 
     playing = false; 

     if (playing == false){ 

      $("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">'); 
      $("#audio").trigger('play'); 
      playing = true; 
     }; 
    } 
    else{ 
     /*$("#audio").trigger('play');*/ 
     }; 
}); 

這工作正常播放文件1，第二個按鈕被點擊暫停文件1時，但不能播放的文件2. 我可以改變什麼使它工作？

Answer 1

我覺得你的情況的問題是這段代碼：

$("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">'); 

我只是通過official documentation去了，好像你是在一個不正確的方式使用.attr。我還沒有試過，我要發佈的代碼，但假設你想設置的source元素的屬性，你可能想嘗試在這些線路上的東西：

$("source").attr({ 
src: "audio/expertise/file2.mp3", 
type: "audio/mp3" 
}); 

現在我明白了，你有.ogg,.wav和.mp3版本。所以我認爲你也可以像file1那樣直接爲ID爲「audio」的元素設置html。我的建議是這樣的：

$("#audio").html('<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">'); 

這將設置html與所需標記對應的元素。我希望這能讓你開始朝正確的方向發展。