通过 JavaScript 将对象附加到 DOM 的背景音乐答案

【问题标题】：Background music with appending an Object to the DOM by JavaScript通过 JavaScript 将对象附加到 DOM 的背景音乐
【发布时间】：2016-05-22 10:23:53
【问题描述】：

我想制作一个简单的网页，在后台播放在线流媒体广播背景音乐或脱口秀节目。我按照这里描述的方法：https://productforums.google.com/forum/#!msg/chrome/hgxRgmT0INY/KR-CGxqdlN4J

它适用于 Chrome：

<html>
<head>

<script language=javascript>

function setupSound() 
{ 
  var obj = document.createElement("object"); 
  obj.width="0px"; 
  obj.height="0px"; 
  obj.type = "audio/mp3"; 
  obj.data = "http://mr-stream.mediaconnect.hu/4736/mr1.mp3";
  obj.setAttribute("id", "bgsound1");
  var paramobj=obj.appendChild(document.createElement('param'));
  paramobj.name="loop";
  paramobj.value="-1";
  var body = document.getElementsByTagName("body")[0]; 
  body.appendChild(obj); 
  document.getElementsByName("button1")[0].onclick=function(){change_channel()};                        
} 

function change_channel()
{
var channels=[
 ["Music: MR1-Kossuth","http://mr-stream.mediaconnect.hu/4736/mr1.mp3"],
 ["Music: none",""],
 ["Music: MKR","http://katolikusradio.hu:9000/live_hi.mp3"],
 ["Music: Karc FM","http://hosting.42netmedia.com:13100/;stream#.mp3"],
]   

var channel_hash={};
var nextindex=0;
for (var i=0;i<=channels.length-1;i++) {
  nextindex=(i+1) % channels.length;
  channel_hash[channels[i][0]]=[channels[nextindex][0],channels[nextindex][1]]; 
 }

 document.getElementById("bgsound1").data=channel_hash[f2.button1.value][1]
 f2.button1.value=channel_hash[f2.button1.value][0]

}


</script>
</head>

<body onload="setupSound()">

 <center>
     <form name='f2'>
       <input type=button name='button1' value='Music: MR1-Kossuth'>
     </form>
 </center>

</body>
</html>

我制作了这个 JSFiddle，但它不播放频道，根本没有声音： https://jsfiddle.net/gxeqsnL3/1/ 我认为声音对象没有正确附加到 DOM，因为 iframe。然而，代码在谷歌浏览器中运行，背景音乐从流媒体广播频道播放得很好。

我的主要问题是：当我想切换到 URL 包含分号的频道时，我从浏览器得到一个下载文档。然而，分号确实需要，因为没有它，即使在 HTML5 音频播放器中，ShoutCast 广播流也无法正常播放。

【问题讨论】：

标签： javascript html dom mp3 jsfiddle

【解决方案1】：

我对您的代码进行了一些更改。这是相同的行为，但不是创建 <object> HTML 元素，而是在 JavaScript 中创建 new Audio 对象，而不会弄乱 HTML 标记。

var audio = new Audio();
document.getElementsByName("button1")[0].onclick = change_channel;

function change_channel() {
  var nextindex = 0;
  var channels = [
    ["Music: MKR", "http://katolikusradio.hu:9000/live_hi.mp3"],
    ["Music: MR1-Kossuth", "http://mr-stream.mediaconnect.hu/4736/mr1.mp3"],
    ["Music: none", ""],
    ["Music: Karc FM", "http://hosting.42netmedia.com:13100/\;stream#.mp3"]
  ];
  var channel_hash = {};

  for (var i = 0; i <= channels.length - 1; i++) {
    nextindex = (i + 1) % channels.length;
    channel_hash[channels[i][0]] = [channels[nextindex][0], channels[nextindex][1]];
  }

  playSound(channel_hash[f2.button1.value][1]);
  f2.button1.value = channel_hash[f2.button1.value][0];
}

function playSound(file) {
  if (file === "") {
    console.log("Now playing: none");
    audio.pause();
  } else {
    console.log("Now playing: " + file);
    audio.pause();
    audio = new Audio(file);
    audio.play();
  }
}

<center>
  <form name='f2'>
    <input type=button name='button1' value='Music: none'>
  </form>
</center>

jsfiddle
https://jsfiddle.net/_jserodio/stag9p3r

【讨论】：

有趣，对我来说完全没有声音。我可以通过单击按钮更改频道，但不会播放声音。我尝试了 3 个浏览器。我正在使用 Arch Linux，XFCE。此版本包含带分号的 URL：jsfiddle.net/gxeqsnL3/19
我构建了相同的行为，但不是创建 <object> HTML 元素，而是使用 JavaScript 中的 Audio 对象。检查此jsfiddle.net/_jserodio/stag9p3r 并让我知道它是否适合您。它对我有用。

【解决方案2】：

嘿，我为您编写了一些新代码，可能会帮助您理解！

HTML

<input type="button" id="music_button" onclick="change_music()" value="No music">
<audio controls style="display:none" id="music" src="">
</audio>

Javascript

 var channels = [
    ["Music: MKR", "http://katolikusradio.hu:9000/live_hi.mp3"],
    ["Music: MR1-Kossuth", "http://mr-stream.mediaconnect.hu/4736/mr1.mp3"],
    ["Music: Karc FM", "http://hosting.42netmedia.com:13100/\;stream#.mp3"]
  ];
var current_channel = 0;

function change_music() {
var button = document.getElementById("music_button")
var music = document.getElementById("music")
if(current_channel > 2) {
current_channel = 0;
button.value="No Music"
music.src = "";
music.load()
music.play()
}
else {
button.value = channels[current_channel][0]
music.src = channels[current_channel][1]
music.load()
music.play()
current_channel++
}

}

【讨论】：