JavaScript 将对象附加到 DOM 的背景音乐

Question

我想制作一个简单的网页，在后台播放在线流媒体广播背景音乐或谈话节目。我按照此处描述的方法进行操作：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。然而代码在 Google Chrome 中有效，背景音乐从流媒体广播频道播放得很好。

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

Answer 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

Answer 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++
}

}

JavaScript 将对象附加到 DOM 的背景音乐

Background music with appending an Object to the DOM by JavaScript

javascript

html

dom

mp3

jsfiddle