Javascript HTML格式的多个音频文件，如果单击两个，则旧的音频文件应停止播放

我的网页上有图像，点击后会播放声音

HTML如下所示：

<span div="2" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_correct_v2.mp3');">
    <img src="../../images/rainforest/letter_m/activity_1/a1_monkey.png" width="324px" height="274px" alt="Monkey" onclick="showPanelGroup_2();" />
</span>

<span div="3" class="sound" onclick="playSound(this,'sounds/activity_1/letter_m_a_1_incorrect_b.mp3');">
    <img src="../../images/rainforest/letter_m/activity_1/a1_butterfly.png" width="324px" height="274px" alt="Butterfly" />
</span>

---

如果两个图像都被单击，声音将重叠。我需要在单击第二个图像后立即停止播放第一个声音，并播放第二个声音。

当您将此

传递到
onclick中的函数时，您正在为每个元素创建一个新的MP3播放器

您需要使用单个元素来固定播放机，在这种情况下，您可以覆盖每次单击时播放的内容，或者需要让每次单击都将暂停信号发送给页面上的所有其他播放机

为每个玩家保留一个单独的玩家的好处（正如您现在所做的）是每个玩家都保留其进度，这样当您再次单击它时，它将恢复，所以这就是我将继续使用的示例

下面是一个当您单击其他玩家中的任何一个时暂停所有其他玩家的示例：

function pauseOthers(elements, me) {
    Array.prototype.forEach.call(elements, function(el) {
        if (el == me) { return; }

        if (el.mp3) {
            el.mp3.pause();
        }
    });
}

function playSound(el, soundfile) {
    var allPlayers = document.getElementsByClassName('sound');
    pauseOthers(allPlayers, el);

    if (el.mp3) {
        if(el.mp3.paused) el.mp3.play();
        else el.mp3.pause();
    } else {
        el.mp3 = new Audio(soundfile);
        el.mp3.play();
    }
}

当您将
此
传递给
onclick中的函数时，您正在为每个元素创建一个新的MP3播放器

您需要使用单个元素来固定播放机，在这种情况下，您可以覆盖每次单击时播放的内容，或者需要让每次单击都将暂停信号发送给页面上的所有其他播放机

为每个玩家保留一个单独的玩家的好处（正如您现在所做的）是每个玩家都保留其进度，这样当您再次单击它时，它将恢复，所以这就是我将继续使用的示例

下面是一个当您单击其他玩家中的任何一个时暂停所有其他玩家的示例：

function pauseOthers(elements, me) {
    Array.prototype.forEach.call(elements, function(el) {
        if (el == me) { return; }

        if (el.mp3) {
            el.mp3.pause();
        }
    });
}

function playSound(el, soundfile) {
    var allPlayers = document.getElementsByClassName('sound');
    pauseOthers(allPlayers, el);

    if (el.mp3) {
        if(el.mp3.paused) el.mp3.play();
        else el.mp3.pause();
    } else {
        el.mp3 = new Audio(soundfile);
        el.mp3.play();
    }
}

什么是
div=“…”
？这不是格式良好的HTML。你是说
id=“…”
？什么是
div=“…”
？这不是格式良好的HTML。你是说
id=“…”
？它起作用了！谢谢Moshe，当点击第二个项目时，声音会暂停。我很感激你的帮助，听到这个消息我很高兴。如果答案对您有效，请单击旁边的复选标记，以帮助未来的访问者看到这是正确的解决方案。它有效！谢谢Moshe，当点击第二个项目时，声音会暂停。我很感激你的帮助，听到这个消息我很高兴。如果答案对您有效，请单击它旁边的复选标记，以帮助未来的访问者看到这是正确的解决方案。