使用哈希映射分配聲音

我試圖給「listOfWords」中的每個單詞分配不同的聲音我不知道從哪裏去從這裏打印其中一個隨機播放的聲音剪輯隨着它產生的單詞..使用哈希映射分配聲音

var listOfWords = { 
    "mat": "http://www.wav-sounds.com/cartoon/daffyduck1.wav", 
    "cat": "http://www.wav-sounds.com/cartoon/hankhill1.wav", 
    "dog": "http://www.wav-sounds.com/cartoon/bugsbunny1.wav", 
    "pit": "http://www.wav-sounds.com/cartoon/familyguy2.wav", 
    "pot": "http://www.wav-sounds.com/cartoon/porkypig1.wav" 
}

這裏我有隨機生成到目前爲止我試圖..

var shuffledWords = listOfWords.slice(0).sort(function() { 
return 0.5 - Math.random(); 
}).slice(0, 1);

來源

2012-07-23 m0onio

有什麼問題嗎？播放聲音？挑選一個聲音？ – jbabey 2012-07-23 15:09:16

我編輯它是一個更具體，希望它可以幫助..謝謝@ jbabey – m0onio 2012-07-23 15:14:43

解決和完善你想要的每個單詞的聲音。

請看：

http://jsfiddle.net/oscarj24/7kbNe/

來源

2012-07-23 15:27:56

因此，當我分配的聲音，他們將播放時，按下「點擊我」按鈕？ @OscarJara – m0onio 2012-07-23 16:03:03

@ m0onio查看更新後的鏈接，現在已經解決了。 – 2012-07-23 17:05:51

slice和sort是一個陣列的方法。你有什麼是object。

如果你想抓住該對象的隨機屬性，你必須使用一個循環：

var listOfWords = { 
    "mat": "http://www.wav-sounds.com/cartoon/daffyduck1.wav", 
    "cat": "http://www.wav-sounds.com/cartoon/hankhill1.wav", 
    "dog": "http://www.wav-sounds.com/cartoon/bugsbunny1.wav", 
    "pit": "http://www.wav-sounds.com/cartoon/familyguy2.wav", 
    "pot": "http://www.wav-sounds.com/cartoon/porkypig1.wav" 
}; 

var randomInt = Math.floor(Math.random() * (listOfWords.length + 1)); 
var chosenSound; 

for (var prop in listOfWords) { 
    if (randomInt === 0) { 
     chosenSound = listOfWords[prop]; 
     break; 
    } 

    randomInt--; 
}

注意，遍歷對象時，順序並不總是有保證的，但你的選擇無論如何，這應該無關緊要。

來源

2012-07-23 15:20:25 jbabey

我想你已經明白說什麼大家。對象不能使用數組中的方法，因此您需要另一種方法來隨機選擇其屬性。上Pick random property from a Javascript object

實測一個然後，選擇一個隨機密鑰和它的值。打印按鍵，播放聲音。

// function to pick random property from object 
// from https://stackoverflow.com/questions/2532218/pick-random-property-from-a-javascript-object 
function pickRandomProperty(obj) { 
    var keys = []; 
    for (var prop in obj) { 
     if (obj.hasOwnProperty(prop)) { 
      keys.push(prop); 
     } 
    } 
    return keys[Math.floor(keys.length * Math.random())]; 
} 

var listOfWords = { 
    "mat": "http://www.wav-sounds.com/cartoon/daffyduck1.wav", 
    "cat": "http://www.wav-sounds.com/cartoon/hankhill1.wav", 
    "dog": "http://www.wav-sounds.com/cartoon/bugsbunny1.wav", 
    "pit": "http://www.wav-sounds.com/cartoon/familyguy2.wav", 
    "pot": "http://www.wav-sounds.com/cartoon/porkypig1.wav" 
}; 

var shuffledWords = pickRandomProperty(listOfWords), 
    shuffledSound = new Audio(listOfWords[shuffledWords]); 

// "write" the word (ugly way) 
document.write(shuffledWords); 
// play the sound 
shuffledSound.play();

來源

2012-07-23 15:32:05 Shikiryu

這是一個HTML5解決方案。據說IE9不播放wav文件。此外，來自wav-sounds.com的一些wav文件會引發解碼錯誤（在FF14中），因爲我使用了不同的聲音url。爲了簡化隨機選擇，這將listOfWords聲明爲一個數組數組。希望能幫助到你。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript"> 

     var listOfWords = [ 
      ["mat","http://www.wav-sounds.com/various/applause.wav"], 
      ["cat", "http://www.wav-sounds.com/various/bomb.wav"], 
      ["dog", "http://www.wav-sounds.com/various/bark.wav"], 
      ["pit", "http://www.wav-sounds.com/various/beep.wav"], 
      ["pot", "http://www.wav-sounds.com/various/cashtill.wav"] 
     ]; 

     function playRandom() { 
      var wordWavUrl = listOfWords[Math.floor(listOfWords.length * Math.random())]; 
      var word = wordWavUrl[0]; 
      var url = wordWavUrl[1]; 
      document.getElementById("wordDisplay").innerHTML=word; 
      document.getElementById("audioPlay").src=url; 
      document.getElementById("audioPlay").autoplay="autoplay"; 
     } 
    </script> 
</head> 
<body> 
    <div id="wordDisplay"></div> 
    <button onclick="playRandom();">play random</button> 
    <audio id="audioPlay"> 
    </audio> 
</body> 
</html>

來源

2012-07-23 16:18:41

使用哈希映射分配聲音

回答

相關問題