Question

使用嵌入播放Flash SWF文件以播放没有控件的随机背景音乐。由于Flash即将消失，因此我想使用带有控件的<audio>标记替换它。有一个名为 music 的文件夹，其中包含多个具有简单名称的MP3文件（ Song1.mp3 ， song2.mp3 等）。我有一个脚本会为变量Whichsong

生成一个随机数

(WhichSong="Music/song"+(Math.floor(Math.random()*23))+".swf"

该变量用作播放歌曲的路径

(document.write('<embed src="'+WhichSong+'" quality="high" width="0" height="0")

我在这里看到了建议我可以使用类似方法将URL信息放入<Audio SRC="'+WhichSong+'" >标记中的代码。但是，我没有尝试过。我尝试使用/不使用引号，使用/不使用 + ，使用/不使用'以及所有这些的各种组合。什么都没有。没有声音，没有控制。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>

<div align="center" id="soundtrack"></div>

<script type="text/javascript">
var WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"

document.getElementById('soundtrack').innerHTML="<audio controls id='background_audio1'><source src='music/5.mp3'>Your browser does not support the audio element.</audio>";

</script>
  </body>
</html>

Answer 1

如果引用了整个内容，则WhichSong变量将不会在您的innerHTML字符串中解释。您需要使用双引号：

"<source src=\"" + WhichSong + "\"></source>"，或使用template string，如以下示例所示。除此之外，这似乎还不错。

function setSong () {
  const WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"
  document.getElementById('soundtrack').innerHTML=`
    <audio controls
      id='background_audio1'>
        <source src='${WhichSong}' />
        Your browser does not support the audio element.
    </audio>
    <div>${WhichSong}</div>
  `;
}

<div id="soundtrack"></div>
<button onClick="setSong()">Set Song</button>

将javascript变量值放入音频的src中

1 个答案: