Question

在此處回答了一個類似的問題，即關於帶文本鏈接的單個音頻文件。我需要知道如何在同一個網頁上播放音頻文件列表，每個人只使用「監聽」文本鏈接作爲播放按鈕，在播放時更改爲「暫停」鏈接。這裏是我用來讓一個文件工作的代碼。問題是，當我簡單地使用其他音頻的不同id標籤複製/粘貼相同的代碼時，它不起作用。無論我按哪個鏈接，它都播放一個文件。我的代碼如下所示：

<audio id="clip1" preload='auto'> 
<source src='audio/clip1.mp3' type='audio/mp3' /> 
</audio> 

<audio id="clip2" preload='auto'> 
<source src='audio/door.mp3' type='audio/mp3' /> 
</audio> 

<a href="javascript:null()" id="door-control">Listen</a> 
<a href="javascript:null()" id="bridge-control">Listen</a> 

<script type="text/javascript"> 
var yourAudio = document.getElementById('bridge'), 
ctrl = document.getElementById('bridge-control'); 

ctrl.onclick = function() { 

// Update the Button 
var pause = ctrl.innerHTML === 'Pause'; 
ctrl.innerHTML = pause ? 'Listen' : 'Pause'; 

// Update the Audio 
var method = pause ? 'pause' : 'play'; 
yourAudio[method](); 

// Prevent Default Action 
return false; 
}; 
</script> 
<script type="text/javascript"> 
var yourAudio = document.getElementById('door'), 
ctrl = document.getElementById('door-control'); 

ctrl.onclick = function() { 

// Update the Button 
var pause = ctrl.innerHTML === 'Pause'; 
ctrl.innerHTML = pause ? 'Listen' : 'Pause'; 

// Update the Audio 
var method = pause ? 'pause' : 'play'; 
yourAudio[method](); 

// Prevent Default Action 
return false; 
}; 
</script> 

所以一個鏈接播放文件就好了，但另一個鏈接沒有。它扮演第一個好像它是第一個鏈接。任何解決方案，讓我可以讓他們只播放相應的音頻文件，並在開始時暫停其他播放？謝謝！

Answer 1

嘗試包裝你的腳本到功能（你改變的變量函數內部範圍到地方），做這樣的事情：

(function() { 
    // your code here 
})(); 

對於您的例子是

<audio id="clip1" preload='auto'> 
<source src='audio/clip1.mp3' type='audio/mp3' /> 
</audio> 

<audio id="clip2" preload='auto'> 
<source src='audio/door.mp3' type='audio/mp3' /> 
</audio> 

<a href="javascript:null()" id="door-control">Listen</a> 
<a href="javascript:null()" id="bridge-control">Listen</a> 

<script type="text/javascript"> 
(function() { 
    var yourAudio = document.getElementById('bridge'), 
     ctrl = document.getElementById('bridge-control'); 

    ctrl.onclick = function() { 

     // Update the Button 
     var pause = ctrl.innerHTML === 'Pause'; 
     ctrl.innerHTML = pause ? 'Listen' : 'Pause'; 

     // Update the Audio 
     var method = pause ? 'pause' : 'play'; 
     yourAudio[method](); 

     // Prevent Default Action 
     return false; 
    }; 
})(); 
</script> 
<script type="text/javascript"> 
(function() { 
    var yourAudio = document.getElementById('door'), 
     ctrl = document.getElementById('door-control'); 

    ctrl.onclick = function() { 

     // Update the Button 
     var pause = ctrl.innerHTML === 'Pause'; 
     ctrl.innerHTML = pause ? 'Listen' : 'Pause'; 

     // Update the Audio 
     var method = pause ? 'pause' : 'play'; 
     yourAudio[method](); 

     // Prevent Default Action 
     return false; 
    }; 
})(); 
</script> 

這裏是一個working example 。你也必須改變ID。

Answer 2

如前所述，問題在於您在全局範圍內多次定義相同的變量。當你添加更多的音頻對象時，這會變得混亂，因爲你會冒更多的名稱衝突。您正在使用相同的處理器爲控制對象的假設，我建議重新分解，像這樣的代碼：

// List of audio/control pairs 
var playlist = [{ 
    "audio": document.getElementById('bridge'), 
    "control": document.getElementById('bridge-control') 
}, { 
    "audio": document.getElementById('door'), 
    "control": document.getElementById('door-control') 
}]; 

for (var i = 0; i < playlist.length; i++) { 
    var obj = playlist[i]; 
    var audio = obj.audio; 
    var control = obj.control; 
    // returns a closure 
    var listener = function (control, audio) { 
     return function() { 
      var pause = control.innerHTML === 'Pause'; 
      control.innerHTML = pause ? 'Listen' : 'Pause'; 
      // Update the Audio 
      var method = pause ? 'pause' : 'play'; 
      audio[method](); 
      // Prevent Default Action 
      return false; 
     } 
    }; 
    control.addEventListener("click", listener(control, audio)); 
} 

您可以輕鬆地添加更多的音頻對象，沒有必要重複你的處理程序定義。

Fiddle