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