Javascript按钮播放随机声音

时间:2016-09-21 13:07:13

标签: javascript html

所以我是新手,需要一些(可能很多)帮助。我希望能够按下一个按钮并从中随机播放声音。我认为到目前为止我所做的事情是正确的,但我真的不知道如何让它发挥作用。

这是我的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>

3 个答案:

答案 0 :(得分:1)

试试这个

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);

希望这会对你有所帮助。

答案 1 :(得分:1)

以下是我推荐的方式。没有必要使用数组来获取歌曲,你正在不必要地编写额外的代码。

//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>

答案 2 :(得分:0)

你根本不需要开关。只需获取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>