按下按钮时显示声音名称

Question

所以我有一个按钮，按下它会播放随机的声音。我希望能够根据播放的声音显示一定的文字。我需要一些帮助，因为我对这些东西很陌生。

这是HTML

<a href="#" onclick="mySounds()" id="soundbutton" class="button button1"></a>
<script type="text/javascript" src="meme.js"></script></div>

这是JavaScript

var sounds = ["Titanic.mp3",
"biggiecheese.mp3",
"mcscuseme.mp3",
"orgasm.mp3",
"broccoli.mp3",
"crab.mp3",
"sniffing.mp3",
"criminal.mp3",
"suicidal.mp3",
"arrow.mp3",
"r2d2.mp3",
"carlwheezer.mp3",
"banana.mp3",
"blaster.mp3"

/*".mp3",*/
];
var sound;
//function used to create a random number
function generateRandomNumber(max) {
  return Math.floor(Math.random() * max);
}
function playSound() {
  //create a random number and assign to x
  var x = generateRandomNumber(sounds.length - 1);
  var soundSrc = sounds[x];
  //create a new instance of the audio object
  if (sound) {
      sound.pause();
  } else {
  sound = new Audio();
  }
  sound.src = soundSrc;
  //play the sound
  sound.play();
}
document.getElementById('soundbutton').addEventListener('click', playSound);

Answer 1

只需在onclick侦听器上设置带有声名的任何元素。

<span id='myspan'></span>
<script>
    function playSound() {
      ...
      document.getElementById('myspan').innerHTML = sound.src;
    }
</script>

另外，正如Brimstone所述，您不需要最后一行，因为该链接与定义中的侦听器绑定。

document.getElementById('soundbutton').addEventListener('click', playSound);