使用文本链接播放多个音频文件

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>

这是一个工作示例 。 您也必须更改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));
}

您可以轻松添加更多音频对象，而无需重复您的处理程序定义。

小提琴