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

Question

我面临一个问题几个小时。 我有一些进入HTML文档的广播频道。 每个频道都有一个图片（是徽标）。 我不知道如何使“单击播放/暂停”功能正常工作。

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

如果单击第一个图像，它将播放/暂停频道。 第二个按钮的作用类似于第一个按钮。

如何使它工作，以使它们都能独立工作，并且如果在第一个运行时单击第二个，它将停止第一个通道并启动第二个通道？

对不起，我是一个初学者:-)。

Answer 1

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

也许流媒体会做（从未尝试过），像这样是可以播放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不喜欢您使用的ContentType：“不支持HTTP的“ audio / x-mpegurl”的“ Content-Type”。媒体资源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>