Поместите значение переменной javascript в источник звука - PullRequest
Новая
       15

Поместите значение переменной javascript в источник звука

0 голосов
/ 13 мая 2019

Использовал 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>

1 Ответ

0 голосов
/ 13 мая 2019

Переменная WhichSong не будет интерпретироваться внутри вашей строки innerHTML, если все это будет заключено в кавычки. Вам нужно либо вырваться из кавычек:

"<source src=\"" + WhichSong + "\"></source>" или используйте шаблонную строку , как в примере ниже. В остальном вроде бы нормально. 

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>
...