Question

我面临一个问题，持续了几个小时。我有一些广播频道进入HTML文档。每个频道都有一个图像（它的标志）。我无法弄清楚如何点击播放/暂停＆＃34;工作

这是JSFiddle文档：http://jsfiddle.net/s35vk80m/1/ 123

如果您点击第一张图片，它将播放/暂停频道。第二个按钮就像第一个按钮一样。

如何让它工作，以便它们都可以独立工作，如果我在第一个运行时点击第二个，它会停止第一个通道并启动第二个通道？

对不起，我是一名初学者： - ）。

Answer 1

基于w3schools html5 audio， m3 和请不支持音频类型。

也许流媒体会做（从未尝试过），类似于is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5。

Answer 2

function aud_play_pause()在您的代码中定义了两次。您需要为第二个函数指定一个不同的名称，或者只使用一个函数来执行这两个操作。我会做这样的事情：

function aud_play_pause(channel) {
  var Radio21 = document.getElementById("Radio21");
  var RadioZU = document.getElementById("RadioZU");  
  if(channel == 'radio21'){ 
    RadioZU.pause();
    if (Radio21.paused) {
        Radio21.play();
        } else {
          Radio21.pause();
        }
    }
  if(channel == 'radioZU'){
     Radio21.pause();
     if (RadioZU.paused) {
         RadioZU.play();
         } else {
           RadioZU.pause();
         }  
    }    
}
</script>

比我更有知识的人可能提供更优雅的解决方案，但这应该有效。

另外，我无法让你的JSFiddle在我的浏览器中工作，我无法让我的JSFiddle工作，所以我无法测试该功能。 Firefox不喜欢您使用的ContentTypes：不支持“audio”/“x-mpegurl”的“HTTP”内容类型。媒体资源http://www.radio21.ro/Radio21Live.m3u的加载失败。“

编辑：我想到了这一点，基本上你需要一个切换。我无法让你的例子在Firefox中工作，所以我要创建一个不能解决问题的切换示例，但应该说明如何修复它。

function example(string) {
  var first_div = document.getElementById("one");
  var second_div = document.getElementById("two");  
  if(string == 'one'){ 
    second_div.innerHTML = "OFF";
    if (first_div.innerHTML == "OFF") {
        first_div.innerHTML = "ON";
        } else {
          first_div.innerHTML = "OFF";
        }
    }
  if(string == 'two'){
    first_div.innerHTML = "OFF";
    if (second_div.innerHTML == "OFF") {
        second_div.innerHTML = "ON";
        } else {
          second_div.innerHTML = "OFF";
        }
    }  
}

<div id="one" onclick="example('one')">OFF</div>
<div id="two" onclick="example('two')">OFF</div>

使用HTML5和JavaScript播放/暂停音频按钮

2 个答案: