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

【问题标题】：Play/Pause Audio Button Using HTML5 And JavaScript使用 HTML5 和 JavaScript 播放/暂停音频按钮
【发布时间】：2015-04-03 11:25:05
【问题描述】：

我面临几个小时的问题。我在 HTML 文档中有一些广播频道。每个频道都有一个图像（它的标志）。我不知道如何使“点击播放/暂停”起作用。

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

如果您点击第一张图片，它将播放/暂停频道。第二个按钮的作用与第一个按钮相同。

我怎样才能让它工作，这样它们两个都可以独立工作，如果我在第一个运行时单击第二个，它将停止第一个通道并启动第二个？

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

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

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：“不支持“audio/x-mpegurl”的 HTTP“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>

【讨论】：

@delutu69 看看我的编辑。我添加了一个示例，说明如果它是我的代码，我将如何使函数看起来。
.m3u8、.pls 和 .m3 仅在 iPhone 和 OS X 上受支持。（我在我的 macbook 上使用 Safari，它可以工作）。不幸的是，这种方法似乎没有播放两个音频流中的任何一个:-(。
您是否在各自的 onclick 属性中添加了“radio21”和“radioZU”？
@delutu69 我添加了另一个示例，它可能会为您提供解决问题所需的线索。它不使用音频，但应该是相似的......你能弄清楚如何将它适应你的项目吗？
肯尼你的例子是完美的！这正是我想要的东西，但我不知道如何适应我的音频流..

【解决方案2】：

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

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

【讨论】：

他们说它不起作用，但它确实起作用。如果你有 OS X 或 iPhone，试试这个：jsfiddle.net/hmr88v6m 它只适用于一个按钮。这很奇怪。