Assigning sounds using hash map

Question

I am trying to assign a different sound to each word in the "listOfWords" I dont know where to go from here in regards to printing one of the words randomly with the sound clip playing as it is produced..

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"
}

Here I have the random generation I have tried so far..

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

having trouble with what? playing the sounds? picking a sound? — jbabey, Jul 23 '12 at 15:09
I have edited it to be a bit more specific, hope it helps.. thanks @jbabey — m0onio, Jul 23 '12 at 15:14

score 1 · Answer 1 · answered Jul 23 '12 at 15:20

slice and sort are methods of an array. what you have is an object.

If you want to grab a random property of that object, you'll have to use a loop:

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

Note that order is not always guaranteed when iterating over objects, but you're choosing at random anyways so that should not really matter.

Oscar Jara · Accepted Answer · 2012-07-23T17:29:15.687

1

Solved and working perfect with the sound you want for each word.

Take a look:

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

edited Jul 23 '12 at 17:29

answered Jul 23 '12 at 15:27

Oscar Jara

14,129
10
62
94

So when I assign the sounds they will play when the "click me" button is pressed? @OscarJara – m0onio Jul 23 '12 at 16:03

score 1 · Answer 3 · edited May 23 '17 at 10:09

I guess you already understood what everyone said. Object can't use method from array, so you need another way to random their attributes. Found one on Pick random property from a Javascript object

Then, select a random key and its value. Print the key, play the sound.

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

score 0 · Answer 4 · answered Jul 23 '12 at 16:18

This is a HTML5 solution. IE9 is said not to play wav files. Additionally, some wav files from wav-sounds.com throw an decoding error (in FF14), for sample i used different sound url's. To ease the random selection this declares listOfWords as an array of arrays. Hope it helps.

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

Assigning sounds using hash map

4 Answers4