播放随机声音而不重复

Posted 2023-02-25

【中文标题】播放随机声音而不重复

【英文标题】：Play random sounds without repeat

【发布时间】：2013-11-26 20:26:16

【问题描述】：

我正在寻找一张图片，当点击该图片时，它会播放一个声音片段（来自声音片段列表）而不重复相同的片段（直到用户浏览整个声音列表。）

目前我的代码可以正常运行，但会随机播放我的任何一个声音片段并重复很多次。

如果有人知道如何调整它以使其在重复之前至少播放列表中的每个剪辑一次，那就太棒了！

这是我目前正在使用的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function playSounds() 
    var sounds = [
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL",
        "AUDIO URL"
    ];

    var index = Math.floor(Math.random() * (sounds.length));
    $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");

</script>

<a onclick="playSounds()"><img src="IMAGE URL"  id="ImageButton1"></a>

我猜这与代码的Math.random() 部分有关？

【参考方案1】：

您可以将数组用作播放列表并将播放的声音保存在第二个数组中。检查我的JSfiddle

<a onclick="playSounds()">
   <img src="http://www.stephaniequinn.com/Ani-Piano.gif"  id="ImageButton1">
</a>
<div id="element"></div>
<script>
var sounds = ["http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3",
              "http://www.stephaniequinn.com/Music/Canon.mp3",
              "http://www.stephaniequinn.com/Music/Handel%20Royal%20Fireworks%20-%2007.mp3",
              "http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2009.mp3"],
    oldSounds = [];

var playSounds = function () 
    var index = Math.floor(Math.random() * (sounds.length)),
        thisSound = sounds[index];

        oldSounds.push(thisSound);
        sounds.splice(index, 1);

        if (sounds.length < 1) 
            sounds = oldSounds.splice(0, oldSounds.length);
        

        $("#element").html("<audio autoplay><source src=\"" + thisSound + "\" type=\"audio/mpeg\"><embed src=\"" + thisSound + "\" hidden=\"true\" autostart=\"true\" /></audio>");

</script>

【讨论】：

太棒了，这正是我要找的地方！

嗨，你知道我怎样才能让这段代码也能在平板电脑和移动浏览器上工作吗？它必须是 HTML5 吗？

我也将代码更改为使用 HTML5 音频元素。请记住，并非所有浏览器都支持 MP3。

我该怎么做？抱歉，我对此一无所知！

检查浏览器的音频格式here

【参考方案2】：

我还没有运行以下代码，但大纲应该足够了。这将始终以随机顺序播放声音。步骤是：

循环生成随机索引，直到找到尚未播放的索引 当我们发现一个没有播放过时，将其添加到一个数组中以供将来参考并播放它

当数组的长度等于声音数组的长度时，我们知道我们已经播放了所有声音。此时我们清空数组并继续。

var playedSounds = [];

var sounds = [
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL",
    "AUDIO URL"
];

function hasPlayed(sound) 

    if (playedSounds.length == sounds.length) 

        // We've played all of the sounds. Reset and start again.
        playedSounds = [];
        playedSounds.push(sound);
        return false;

    

    // We haven't played all the sounds yet but check to see whether we've played the current one.
    for (var i = 0; i < playedSounds.length; i++)
        if (playedSounds[i] == sound)
            return true;

    // Note that we've now played this sound.
    playedSounds.push(sound);
    return false;



function playSounds() 

    var index = Math.floor(Math.random() * (sounds.length));

    // Loop until we've found a sound that we've not yet played.
    while (hasPlayed(index)) 

        index = Math.floor(Math.random() * (sounds.length));

    

    $("#element").html("<embed src=\"" + sounds[index] + "\" hidden=\"true\" autostart=\"true\" />");

【讨论】：

您知道如何让此代码在移动设备和平板电脑浏览器上运行吗？

这是我正在使用的代码jsfiddle.net/adamsears/kZF9T - 它不适用于手机/平板电脑

【参考方案3】：

我很想做这样的事情 (JSFiddle example)：

var sounds = [];

// Return the full list of URLs in random order
function getSounds() 
    return [
        'url1',
        'url2',
        'url3'
    ].sort(function () 
        // http://***.com/a/18650169/283078
        return (.5 - Math.random());
    );


// Play the next sound
function playSound() 
    if (!sounds.length) 
        // Get the list of sounds (random order)
        sounds = getSounds();
    

    // Pops a URL every time, ensuring all are played exactly once
    $("#element").html(
        '<embed src="' + sounds.pop() +
        '" hidden="true" autostart="true" />'
    );

    // Once all the URLs have been popped, the process starts again

【讨论】：

太棒了，非常感谢，它成功了！现在唯一的问题是音频剪辑不再在页面加载时自动启动。我该如何解决这个问题？

你试过the updated JSFiddle吗？我已经复制了你的嵌入代码，所以自动启动应该没有任何区别。

您知道如何让此类代码在移动设备和平板电脑浏览器上运行吗？

你需要一个用户交互来启动你的音频，否则它不会自动播放：***.com/questions/13266474/…

我有一张图片，用户点击它可以播放音频剪辑，当他们点击桌面上的图片时，我可以让音频在移动设备上播放吗？ - 我不介意失去移动设备上的自动播放功能