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中播放的音频

2 个答案: