将javascript变量值放在音频的src中答案

【问题标题】：Put javascript variable value in src of audio将javascript变量值放在音频的src中
【发布时间】：2019-05-13 03:06:40
【问题描述】：

使用 embed 播放 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>

【问题讨论】：

怎么不行？我建议使用类似 jsbin.com 和 createElement('audio') 然后 setAttribute('src', yourSource) 但它可能无法加载跨站点音频。通过检查元素，您应该能够看到源设置正确。另外，<script> 默认是 javascript
你得到 404 了吗？

标签： html5-audio

【解决方案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>

【讨论】：

Ray Hatfield，我是 KISS 政策的忠实拥护者。您打破“s”的简单更改在我的情况下非常有效。只是一个简单的格式更改..现在我要寻找一个解决方案来添加一个事件监听结束并加载另一首歌曲 - 继续播放。甚至可能尝试添加一个按钮来选择另一首歌曲。有时我将目标定得很高。哈哈