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

Play/Pause Audio Button Using HTML5 And JavaScript

本文关键字：暂停 音频 按钮 播放 HTML5 JavaScript 使用      更新时间：2023-09-26

我遇到了几个小时的问题。我在HTML文档中加入了一些广播频道。每个频道都有一个图像（它的标志）。我不知道如何让"点击播放/暂停"工作。

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

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

我如何使它工作，使它们都能独立工作，如果我在第一个频道运行时点击第二个频道，它会停止第一个频道并启动第二个？

对不起，我是一个乞丐：-）。

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

也许流媒体可以（从未尝试过），像这样的东西是可以在互联网上播放的。

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在我的浏览器中工作，也无法让我的JSFiidle工作，所以我无法测试该功能。Firefox不喜欢您正在使用的内容类型：不支持"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>

相关文章：