个人中心
gpt4 book ai didi

javascript - 通过 JavaScript 将对象附加到 DOM 的背景音乐

转载 作者：行者123 更新时间：2023-11-28 05:59:51 24 4
gpt4 key购买 nike

我想制作一个简单的网页，在后台播放在线流媒体广播背景音乐或脱口秀节目。我按照此处描述的方法进行操作: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，但它不播放 channel ，根本没有声音: https://jsfiddle.net/gxeqsnL3/1/我认为由于 iframe 的原因，声音对象没有正确附加到 DOM。然而，代码可以在 Google Chrome 中运行，流媒体广播 channel 的背景音乐播放得很好。

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

最佳答案

我对你的代码做了一些更改。这是相同的行为，但不是创建 <object> HTML 元素，我创建一个 new Audio JavaScript 中的对象，而不会弄乱 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

关于javascript - 通过 JavaScript 将对象附加到 DOM 的背景音乐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37373102/

24 4 0
文章推荐： jquery - CSS 过渡在 Safari 中不起作用(第一次)
文章推荐： c++ - 蒙特卡洛误差
文章推荐： javascript - 将 CSS 类添加到以大写字母开头的行
文章推荐： c++ - 使用 sched_yield 控制线程执行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com