Question

我正在创建一个页面，将图像作为触发音频源的按钮。现在我有两个“图像按钮”，如下所示：

<div class="sixteen columns" style="margin-top:230px">
  <button class="fairy" id="fairy1">
          <img class="scale-with-grid" src="anggrunningDOUBLE.png">

        </button>
        <audio id="loop1" preload="auto" loop>
            <source src="loop1.ogg" type="audio/ogg"  />
            <source src="loop1.mp3" type="audio/mpeg" />
        </audio>


        </div>

  <div class="sixteen columns" style="margin-top:230px">
  <button class="fairy" id="fairy2">
          <img class="scale-with-grid" src="anggstairs.png">

        </button>
        <audio id="loop2" preload="auto" loop>
            <source src="loop2.ogg" type="audio/ogg"  />
            <source src="loop2.mp3" type="audio/mpeg" />
        </audio>


        </div>

我找到了一些JS（我实际上是从这里开始）来使图像工作。我认为这是我遇到问题的地方，但我真的不知道足够的JS来调试。这就是我的意思：

  <script>
      window.player = document.getElementById('loop1');
      document.getElementById('fairy1').onclick = function () {
    if (player.paused) {
        player.play();
        this.innerHTML = '<img class="scale-with-grid" style="opacity:0;" src="anggrunningDOUBLE.png">';
    } else {
        player.pause();
        this.innerHTML = '<img class="scale-with-grid" src="anggrunningDOUBLE.png">';
    }
}

window.player = document.getElementById('loop2');
      document.getElementById('fairy2').onclick = function () {
    if (player.paused) {
        player.play();
        this.innerHTML = '<img class="scale-with-grid" style="opacity:0;" src="anggstairs.png">';
    } else {
        player.pause();
        this.innerHTML = '<img class="scale-with-grid" src="anggstairs.png">';
    }
}

  </script>

我认为按钮有一些CSS可以忽略不计。并控制背景图像。

无论如何，问题似乎是两个图像，两个按钮只触发最后一个音频源。理想情况下，我希望“fairy1”触发“loop1”和“fairy2”来触发“loop2”等等。

在Chrome和iOS Safari中测试过。

在同一页面上触发不同的音轨

0 个答案: