希望在这里获得一些帮助。我有这段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>
编辑：由于我的应用程序是游戏加载屏幕，而不是浏览器，我认为发布整个代码可能更容易，这是我的新完整代码，包括下面发布的54ka。它将在屏幕上加载播放器，但不会播放任何内容
<!doctype html>
<html lang="en" class="no-js">
<head>
<script>
window.onload = function() {
var context = new AudioContext();
}
</script>
<meta charset="UTF-8" />
<title>Your Server Here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="keks.css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='jquery.particleground.js'></script>
<script type='text/javascript' src='demo.js'></script>
</head>
<body>
<div id="particles">
<div id="intro">
<div><img src='Logo.png' style='width:300px;heigth:300px'>
</div>
<hr style='width:300px'>
<div> <font face='Montserrat' size='15px'></font></div>
<div>
<p class='loading'>Connecting</p>
</div>
<div>
<audio id="music" volume="0.1" autoplay controls>
</audio>
<script type="text/javascript">
function addAudio() {
fileArray = ["myfile1.mp3", "myfile2.mp3"]
var num = Math.floor(Math.random() * fileArray.length);
var x = document.getElementById("music");
x.innerHTML = "";
x.innerHTML += '<source src="' + fileArray[num] + '.mp3" type="audio/mpeg">';
x.play();
}
addAudio();
</script>
</div>
<div> <img src='' style=''>
</div>
<div>
<font face='Montserrat' size="3px">Welcome</font>
</div>
</div>
</div>
</body>
</html>
希望我能对您有所帮助
<audio id="music" volume="0.1" autoplay controls>
</audio>
<script type="text/javascript">
function addAudio() {
fileArray = ["file1", "file2", "file3"]
var num = Math.floor(Math.random() * fileArray.length);
var x = document.getElementById("music");
x.innerHTML = "";
x.innerHTML += '<source src="audio/' + fileArray[num] + '.mp3" 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="width:200px; height:200px;">
Some Firts Screen
</div>
<audio id="music" volume="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();
}
function secondScreen() {
document.getElementById("screen").innerHTML = "Second Screen"
}
</script>
</body>
</html>