单击超链接的图像/文本时如何播放声音仍然将您带到超链接的网页

问题描述

我正在进行SDD评估，并且正在制作类似网站的游戏。这将是您自己选择的冒险游戏，我正在尝试合并JavaScript。我有3个按钮，这些按钮会将用户带到不同的页面，我希望每个按钮在单击时都能发出声音。这些按钮是文本，上面有剑的图像，所以我想播放剑的声音。但是，我对JavaScript没有经验。我在https://www.daniweb.com/programming/web-development/threads/286059/play-sound-when-a-link-is-clicked找到了一些代码但这对我来说没有任何意义，因为我不知道如何使用它。有人可以向我解释它的含义以及如何使其适应我的HTML和CSS吗？

这是我的HTML代码

<html>
            <head>
                <Meta charset="UTF-8">
                <title>SDD Minor Project Code</title>
                <link rel="stylesheet" type="text/css" href="style.css">
                <link rel="stylesheet" type="text/js" href="script.js">
            </head>

            <body>
                <div class="home_sword">
                    <a href="https://trinket.io/html/c11627b947?outputOnly=true&runMode=autorun">
                    <img id="home_button_img" src="button_underline_sword_left.png">
                    <h2><i>Home</i></h2> 
                    </a>
                  </a>
                </div>
                <div>
                  <img class="left_shield" src="shield_title_bookend.png">
                  <h1 class="story_title"><i>Viking Attack</i></h1>
                  <img class="right_shield" src="shield_title_bookend.png">
                </div>
                  <img class="scroll" src="story_scroll.png">
                <div class="narrative">
                  <p>Hello,World!</p>
                </div>
        
            </body>
        </html>

解决方法

这是我在学习JavaScript时在一个项目中所做的一个例子

<script>
function soundAlarm() {
          let amount = 3; // count of sound you want here is set on 3 but you can change it as much you want
          let audio = new Audio("Timer_Sound_Effect.mp3"); //here variable for the src of the sound

          function playSound() {     // function that plays the sound 
              audio.pause();
              audio.currentTime = 0;
              audio.play();
          }

          for (let i = 0; i < amount; i++) {   // loop to play as many times you asked in "let amount "
            setTimeout(playSound,1200 * i);  // 1200 = 1200 mseconds between each times the sound plays.
          }

  }
</script>

在html中，只需将其作为属性即可播放：

<html>
<head>
</head>
<body>
            <div>
              <img class="left_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
              <h1 class="story_title"><i>Viking Attack</i></h1>
              <img class="right_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
            </div>
</body>
</html>

这是经过修改的代码：）：

  <html>
        <head>
            <meta charset="UTF-8">
            <title>SDD Minor Project Code</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <link rel="stylesheet" type="text/js" href="script.js">
        </head>

        <body>
            <div class="home_sword">
                <a href="https://trinket.io/html/c11627b947?outputOnly=true&runMode=autorun">
                <img id="home_button_img" src="button_underline_sword_left.png"> 
                <h2><i>Home</i></h2> 
                </a>
              </a>
            </div>
                </a>
              </a>
            </div>
            <div>
              <img class="left_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
              <h1 class="story_title"><i>Viking Attack</i></h1>
              <img class="right_shield" src="shield_title_bookend.png" onclick="soundAlarm()"> <!-- function called on the click to play the sound-->
            </div>
              <img class="scroll" src="story_scroll.png">
            <div class="narrative">
              <p>Hello,World!</p>
            </div>
    
        </body>
        <script>
function soundAlarm() {
          let amount = 3; // count of sound you want here is set on 3 but you can change it as much you want
          let audio = new Audio("Timer_Sound_Effect.mp3"); //here variable for the src of the sound,change it by the path of your file,or directly by your file name if in same folder.

          function playSound() {     // function that plays the sound 
              audio.pause();
              audio.currentTime = 0;
              audio.play();
          }

          for (let i = 0; i < amount; i++) {   // loop to play as many times you asked in "let amount "
            setTimeout(playSound,1200 * i);  // 1200 = 1200 mseconds between each times the sound plays.
          }

  }
    </script>
    </html>

html html5-audio javascript