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

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

2 个答案: