2016-09-21 199 views
0

所以我是新来的,需要一些(也许很多)的帮助。我希望能够按下一个按钮并从中随机播放声音。我认为我到目前为止所做的是正确的,但我真的不知道如何使它工作。Javascript按钮播放随机声音

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

下面是我建议的做法。没有必要使用数组来获取歌曲,您正在不必要地编写额外的代码。

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

好,但是如果一个Audio()已经实例化了,你需要跟踪,导致点击10次会让你有10个音频在同一时间播放。在下一个随机只需更改来源并再次播放。不创建新的音频播放器。 –

+1

@DincaAdrian检查更新 –

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> 
+0

我不认为'sound.stop'起作用,我认为它是'sound.pause()'。至少它给我丢了错误 –