Question

我的网页上有图片，点击后会发出声音。

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>

我目前正在使用以下Javascript代码暂停并在点击时播放一个声音：

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

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

Answer 1

当您将this传递给onclick中的该功能时，您正在为每个元素创建一个新的MP3播放器。

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

为每个人保留一个单独的玩家（正如你现在所做的那样）的好处是每个玩家都保留其进度，这样当你再次点击它时它就会恢复，这就是我将留下的例子。 / p>

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

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();
    }
}

HTML中的多个音频文件，如果点击两个，则较旧的音频文件应停止播放

1 个答案: