随机播放 HTML 中的音频

Question

希望在这里得到一点帮助。我有这个 HTML 代码可以播放本地文件夹中的音频文件。我想添加更多音频文件并让它播放数组中的随机文件。我一直在搜索并尝试不同的东西，但我还没有找到任何适合我的应用程序的东西。

下面是我目前用于一个音频文件的代码，效果很好。对于草率的脚本，我真的很抱歉，HTML 不是我的专长，我是从其他地方拿来的：

<div>

   <audio id='music' volume='0.1' autoplay controls>

       <source src="myfile.mp3" type="audio/mpeg">
       Your browser does not support the audio element.    

   </audio>

           <script>
               var audio = document.getElementById("music");
               audio.volume = 0.4;
           </script>        

</div>

根据我发现的关于加载随机图像的内容，我知道我正在尝试做什么，但我只是想不出如何将相同的方法合并到我的音频文件中。我知道我要求有人基本上为我写这个但是有没有办法使用下面的方法但是我的 HTML 文件中的音频？

<head>
    <script type="text/javascript">
    ImageArray = new Array();
    ImageArray[0] = 'image1.jpg';
    ImageArray[1] = 'iamge2.jpg';
    ImageArray[2] = 'iamge3.jpg';
    ImageArray[3] = 'iamge4.jpg';



function getRandomImage() {
    var num = Math.floor( Math.random() * 11);
    var img = ImageArray[num];
    document.getElementById("randImage").innerHTML = ('<img src="' + 'images/random/' + img + '" 
width="250px">')

}
</script>
</head>

Answer 1

希望对您有所帮助

<audio id="music" volume="0.1" autoplay controls>
</audio>

<script type="text/javascript">
    function addAudio() {
        fileArray = ["file1.mp3", "file2.mp3", "file3.mp3"]
        var num = Math.floor(Math.random() * fileArray.length);
        var x = document.getElementById("music");
        x.innerHTML = "";
        x.innerHTML += '<source src="audio/' + fileArray[num] + '" type="audio/mpeg">';

        x.play(); 
    }
    addAudio();
</script>

编辑：在浏览器自动执行某些操作之前，它需要用户采取一些操作！我的建议是制作第一个屏幕，在交互后调用下一个屏幕开始播放音乐。这里给大家举个例子。

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

    <div id="screen" onclick="addAudio();secondScreen();" style="position: absolute; top:0px; right: 0px; bottom: 0px; left: 0px;">
        Some Firts Screen (click)
    </div>

    <audio id="music" volume="1">
    </audio>

    <script type="text/javascript">
        function addAudio() {
            fileArray = ["file1.mp3", "file2.mp3", "file3.mp3"]
            var num = Math.floor(Math.random() * fileArray.length);
            var x = document.getElementById("music");
            x.innerHTML = "";
            x.innerHTML += '<source src="audio/' + fileArray[num] + '" type="audio/mpeg">';

            x.play(); 
        }

        function secondScreen() {
            document.getElementById("screen").innerHTML = "Second Screen"
        }
    </script>

</body>
</html>

Answer 2

这是最终为我工作的确切代码，此 HTML 文件再次作为加载屏幕加载到游戏服务器中，因此它不会在浏览器中自动播放，除非您执行54ka以上。

<audio id='music' controls autoplay>

  <source src="" type="audio/mpeg">

</audio>

  <script>
    function myFunction() {
       fileArray = ["song1.mp3", "song2.mp3", "song3.mp3"];
       var num = Math.floor(Math.random() * fileArray.length);
       var x = document.getElementById("music");
       x.src = fileArray[num]; 

       var audio = document.getElementById("music");
       audio.volume = 0.2;
       audio.autoplay = true;
       audio.load();
    }

    myFunction()

  </script>

随机播放 HTML 中的音频

Randomize Audio Played in HTML

html

javascript

audio

html5-audio