Question

我目前正在制作一个用于教育目的的页面。现在我正在制作一个包含多个按钮的页面，这些按钮包含当你点击它们时它们将播放音乐的功能。现在我需要其中的10个。但我有10种不同的声音碎片。如果我把10个不同的脚本放在彼此之下，这将造成绝对的混乱，我想知道是否可以将这些脚本放在另一个文件中。或者有更简单的方法吗？我有这个想法，这可以更容易。

这是我使用的脚本和html。

    <script>

        function playMusic (){
            var audio = document.getElementById("geluidsopname");
            audio.play();   
        }
    </script>   

         <button id="voortgang-button" onclick="playMusic()" value="button">    
         <img id="afspeelbutton"   src ="../../../image/afspeelbutton1.png">                    </img>Ik heet Marie.    
         <audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>
    </button>

Answer 1

您不一定需要为每个元素分配唯一的id，您可以通过不同的方法访问它们。例如，请查看document.querySelector。

从HTML事件属性中调用JS函数 fine ，但不建议这样做。直接在JS代码上注册事件要清晰得多。

您可能希望在body关闭之前放置一个脚本，或者最终将其放在head中并在DOMContentLoaded上执行。

<button class="myBtn" id="button1">
  <img src="url">
  <audio>
    <source src="url" type="audio/mpeg">
    Your browser does not support the audio feature.
  </audio>
</button>

<script type="text/javascript">
  for (var aud in document.querySelectorAll('.myBtn')) {
      aud.addEventListener('click', function() {
        aud.querySelector('audio').play();
      }, false);
  }
</script>

当然，您只需将controls属性添加到audio元素，并将所有与音频控件相关的事件都由浏览器处理：

<button class="myBtn">
  <img src="url">
  <audio controls>
    <source src="url" type="audio/mpeg">
    Your browser does not support the audio feature.
  </audio>
</button>

Answer 2

这是代码的plunker。我已经修改了一些演示的html结构。仍然有想法：你的脚本使用参数。

// Code goes here

     function playMusic ( target ){
        console.log(target.getAttribute("target_audio"))
        var audio = document.getElementById( target.getAttribute("target_audio") );
        audio.play();   
    }

和html：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input type="button" id="voortgang-button" target_audio="geluidsopname" onclick="playMusic( this )" value="button">
    <img id="afspeelbutton"   src ="../../../image/afspeelbutton1.png">Ik heet Marie.    
    <audio id="geluidsopname" src="../../../voice-recording/Marie.mp3"></audio>

  </body>

</html>

如果您愿意，可以将id作为字符串传递给处理程序方法。那你甚至不需要得到属性的值。

使用我的页面的外部脚本页面，需要多个脚本

2 个答案: