Question

我正在尝试为“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);

Answer 1

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

请注意，在迭代对象时并不总是保证顺序，但是你无论如何都要随意选择，所以这并不重要。

Answer 2

解决并完善每个单词所需的声音。

看一看：

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

Answer 3

我猜你已经明白了每个人都说的话。对象不能使用数组中的方法，因此您需要另一种方法来随机化它们的属性。在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();

Answer 4

这是一个HTML5解决方案。据说IE9不播放wav文件。此外，来自wav-sounds.com的一些wav文件会抛出解码错误（在FF14中），因为我使用了不同的声音网址。为了简化随机选择，将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>

使用哈希映射分配声音

4 个答案: