javascript - 单击图像内部时播放音频文件,单击图像外部时播放不同的音频文件

标签 javascript html image audio onclick

我正在通过自己做一些小练习来学习 HTML-CSS-JS。我创建了一个小代码,当我单击图像时播放 mp3 音频:

 <html>
  <head>
    <title>Image audio exercise</title>
  </head>
  <body>
    <script>
      function play(){
         var audio = document.getElementById("audio");
         audio.play();
      }
    </script>
    <img src="img.gif" onclick="play()">
    <audio id="audio" src="sound.mp3" ></audio>
  </body>
 </html> 

我希望当点击位于图像外部时能够播放不同的音频文件。有简单的方法吗?也许是 if-else 语句?

最佳答案

你可以做这样的事情。只需简单检查一下您是否单击了图像或文档。

<html>
  <head>
    <title>Image audio exercise</title>
  </head>
  <body>

    <img id="theImage" src="img.gif">
    <audio id="audio" src="sound.mp3" ></audio>

    <script>
      var audio = document.getElementById("audio");
      var img = document.getElementById("theImage");

      document.addEventListener("click", function(e){
         if( e.target === img ){
           audio.src = "sound.mp3";
           audio.play();
         }
         else{
           audio.src = "sound2.mp3";
           audio.play();
         }
      },false);
    </script>

  </body>
</html>

关于javascript - 单击图像内部时播放音频文件,单击图像外部时播放不同的音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42855542/

相关文章:

javascript - 我如何抽象/概括执行类似但略有不同任务的功能? (大部分不同且稍微复杂的选择器)

html - 为什么这个简单的 html 和 css 代码没有显示任何内容?

图像不在循环 Vue.js 中显示

ios - UIGraphicsGetImageFromCurrentImageContext 泄漏

html - IE 移动 CSS 和图像不加载重定向

javascript - 拖动项目时更改变量的值AngularJS JQuery-UI

javascript - 在另一个属性中引用元素属性

javascript - 带有大量 "or' 的正则表达式”

html - css Flex div 随着子文本区域的增长而增长(无jquery)

JavaScript 代码在 Firefox 中无法运行,但在其他浏览器中运行良好