Javascript按钮播放随机声音

Javascript button plays random sound

本文关键字：声音 随机 播放 按钮 Javascript      更新时间：2023-09-26

所以我是新手，需要一些(也许很多)帮助。我想要一个能够按下一个按钮，并有一个随机的声音播放。到目前为止，我认为我所做的是对的，但我真的不知道如何使它起作用。

这是我的Javascript

function mySounds()
  {
  var x = Math.floor((Math.random() * 10) + 1);
  var sound = ["sound1", "sound2", "sound3", "sound4", "sound5", "sound6",  "sound7", "sound8", "sound9", "sound10"];
  }
sound1 = 1;
sound2 = 2;
sound3 = 3;
sound4 = 4;
sound5 = 5;
sound6 = 6;
sound7 = 7;
sound8 = 8;
sound9 = 9;
sound10 = 10;
if (x === sound1){
  function sound1play(){
    var sound1 = new Audio();
    sound1.src = "Pokemon.mp3";
    sound1.play();
  }
}
if (x === sound2){
  function sound2play() {
    var sound2 = new Audio();
    sound2.src = "Wonderwall.mp3";
    sound2.play();
    }
  }
if (x === sound3){
  function sound3play() {
    var sound3 = new Audio();
    sound3.src = "Tacobell.mp3";
    sound3.play();
    }
  }
if (x === sound4){
  function sound4play() {
    var sound4 = new Audio();
    sound4.src = "Starwars.mp3";
    sound4.play();
    }
  }
if (x === sound5){
  function sound5play() {
    var sound5 = new Audio();
    sound5.src = "Mcdonalds.mp3";
    sound5.play();
    }
  }
if (x === sound6){
  function sound6play() {
    var sound6 = new Audio();
    sound6.src = "KFC.mp3";
    sound6.play();
    }
  }
if (x === sound7){
  function sound7play() {
    var sound7 = new Audio();
    sound7.src = "Salvia.mp3";
    sound7.play();
    }
  }
if (x === sound8){
  function sound8play() {
    var sound8 = new Audio();
    sound8.src = "Allstar.mp3";
    sound8.play();
    }
  }
if (x === sound9){
  function sound9play() {
    var sound9 = new Audio();
    sound9.src = "Funtime.mp3";
    sound9.play();
    }
  }
if (x === sound10){
  function sound10play() {
    var sound10 = new Audio();
    sound10.src = "Clothes.mp3";
    sound10.play();
    }
  }
document.getElementById('soundbutton').addEventListener('click', soundplay);

我的HTML

 <a href="#" id="soundbutton">Press</a>
<script type="text/javascript" src="popup.js"></script>

试试这个

function mySounds() {
  var x = Math.floor((Math.random() * 10) + 1);
    var sound = new Audio();
  switch (x) {
    case 1:
         sound.src = "Pokemon.mp3";
         break;
    case 2:
         sound.src = "Wonderwall.mp3";
         break;
    case 3:
         sound.src = "Tacobell.mp3";
         break;
    case 4:
         sound.src = "Starwars.mp3";
         break;
    case 5:
         sound.src = "Mcdonalds.mp3";
         break;
    case 6:
         sound.src = "KFC.mp3";
         break;
    case 7:
         sound.src = "Salvia.mp3";
         break;
    case 8:
         sound.src = "Allstar.mp3";
         break;
    case 9:
         sound.src = "Funtime.mp3";
         break;
    case 10:
         sound.src = "Clothes.mp3";
         break;
  }
    sound.play();
}
document.getElementById('soundbutton').addEventListener('click', mySounds);

我建议这样做。没有必要使用数组来获取歌曲，您正在编写不必要的额外代码。

//declare a sound variable
var sound;
//function to generate a random number
function generateRandomNumber() {
   return Math.floor((Math.random() * 2) + 1);
}
function playSound(){
   //assign random number to x
   var x = generateRandomNumber();
   //if the sound exists pause, otherwise 
   //create a new instance of the sound object
   if (sound) {
      sound.pause();
   } else {
      sound = new Audio();
   }
   if(x == 1) {
      sound.src = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3";
   } else if( x == 2 ) {
      sound.src = "http://www.stephaniequinn.com/Music/The%20Entertainer.mp3";
   }
   //play sound
   sound.play();
}
document.getElementById('soundbutton').addEventListener('click', playSound);
<a href="#" id="soundbutton">Press</a>

你根本不需要开关。只需要得到一个介于0和你拥有的声音文件数之间的随机数，然后将其用作这些声音文件数组的索引。

var sounds = [
    "Pokemon.mp3",
    "Wonderwall.mp3",
    "Tacobell.mp3",
    "Starwars.mp3",
    "Mcdonalds.mp3",
    "KFC.mp3",
    "Salvia.mp3",
    "Allstar.mp3",
    "Funtime.mp3",
    "Clothes.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);

<a href="#" id="soundbutton">Press</a>
相关文章：