我怎样才能制作图像以便我可以单击它并播放声音

Question

我正在尝试制作一张图片，一旦我点击它就可以播放 .wav 文件，有点像这样 http://www.nooooooooooooooo.com/

（请原谅模因）

这是我当前的设置

<!doctype html>
<html>
<head>
<title>xxx</title>
<meta charset="utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<header>
   <nav>
      <h1> My Projects </h1>
         <ul>
            <li><a href="Homepage.html">Home</a></li>
            <li><a href="#">Memes</a></li>
     </ul>
   </nav> 
</header> 
<main>
   <p>This is a page for Dank Memes.</p>
   <img src="meme1.jpg" width="600" height="420" alt=""/> <img src="meme2.jpg" width="500" height="390" alt=""/>
<img src="meme3.jpg" width="600" height="420" alt=""/> <img src="meme4.jpg" width="600" height="432" alt=""/> 
<img src="tupac.png" width="600" height="420" alt=""/> 
<script>



</script>
</main>      
<footer>
  <p> Made By xxx </p>
</footer>
</body>
</html>

感谢您提供的任何帮助。

Answer 1

答案在他们的源代码片段中：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="darthvadernobutton">
      <audio id="nooo">
        <source src="nooo.ogg" type="audio/ogg">
        <source src="nooo.mp3" type="audio/mpeg">
        <source src="nooo.mp4" type="audio/mp4"> 
        <script language="javascript">
          if(AC_FL_RunContent == 0) {
            alert("This page requires AC_RunActiveContent.js.");
          } else {
            AC_FL_RunContent(
            'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
            'width', '550',
            'height', '400',
            'src', 'button',
            'quality', 'high',
            'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
            'align', 'middle',
            'play', 'true',
            'loop', 'true',
            'scale', 'showall',
            'wmode', 'window',
            'devicefont', 'false',
            'id', 'button',
            'bgcolor', '#ffffff',
            'name', 'button',
            'menu', 'true',
            'allowFullScreen', 'false',
            'allowScriptAccess','sameDomain',
            'movie', 'button',
            'salign', ''
            ); // end AC code
          }
        </script>
        <noscript>
          <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="400" id="button" width="550">
            <param name="allowScriptAccess" value="sameDomain">
            <param name="allowFullScreen" value="false">
            <param name="movie" value="button.swf">
            <param name="quality" value="high">
            <param name="bgcolor" value="#ffffff">
            <embed allowfullscreen="false" height="400" src="button.swf" type="application/x-shockwave-flash" width="550">
          </object>
        </noscript>
      </audio>
      <div>
        <button id="no-button"></button> 
        <script>
          var a = document.createElement('audio');
          canAudio = !!(a.canPlayType && (a.canPlayType('audio/mpeg;') || a.canPlayType('audio/ogg;') || a.canPlayType('audio/mp4;')));
          if(!canAudio) {
            document.getElementById('no-button').style.display = 'none';
          }
          document.getElementById('no-button').onclick = function(){
            document.getElementById('nooo').play();
          }
        </script>
      </div>
    </div>
  </body>
</html>

这是您要查找的代码段：

<div>
  <button id="no-button"></button>
  <script>
    var a = document.createElement('audio');
    canAudio = !!(a.canPlayType && (a.canPlayType('audio/mpeg;') || a.canPlayType('audio/ogg;') || a.canPlayType('audio/mp4;')));
    if(!canAudio)
      document.getElementById('no-button').style.display = 'none';
    document.getElementById('no-button').onclick = function(){
      document.getElementById('nooo').play();
    };
  </script>
</div>

Answer 2

你要找的是这段代码：

var a = document.createElement('audio');
canAudio = !!(a.canPlayType && (a.canPlayType('audio/mpeg;') || a.canPlayType('audio/ogg;') || a.canPlayType('audio/mp4;')));
if (!canAudio)
  document.getElementById('no-button').style.display = 'none';
document.getElementById('no-button').onclick = function() {
  document.getElementById('nooo').play();
}

它负责播放声音，它还会检查是否支持在该浏览器中播放曲目。

我简化了该代码段，使其更易于阅读和理解：

var audio = document.createElement("audio");
canPlayAudio = !!(audio.canPlayType && (audio.canPlayType("audio/mpeg;") || audio.canPlayType("audio/ogg;") || audio.canPlayType("audio/mp4;")));
if (!canPlayAudio) {
  document.getElementById("no-button").style.display = "none";
}
document.getElementById("no-button").onclick = function() {
  document.getElementById("nooo").play();
};

希望对你有所帮助，祝你好运。

我怎样才能制作图像以便我可以单击它并播放声音

How can i make an image so i can click on it and it plays a sound

html

javascript

css

audio

dreamweaver