如何在同一页面上为 2 个广播流制作 play/stop 按钮？

Question

我为我的广播流制作了 2 个按钮，每个按钮都像一个 PLAY/STOP 按钮。

play/stop 流 1（shoutcast 或 icecast）
play/stop 流 2（shoutcast 或 icecast）

这就是我所做的，当您按下两个按钮时，只播放了 1 个流（放克），第二个根本没有播放（迪斯科）

你能帮帮我吗？谢谢你托尼

var player1 = document.querySelector('audio');
var player2 = document.querySelector('audio');
var playBtn1 = document.querySelector('#play-btn_funk');
var playBtn2 = document.querySelector('#play-btn_disco');


playBtn1.addEventListener('click', function() {
 if ( player1.paused ) {
  player1.play();
  playBtn1.src = 'img/stop_funk.png';
 } else {
  player1.pause();
  playBtn1.src = 'img/play_funk.png';
 }
});

playBtn2.addEventListener('click', function() {
 if ( player2.paused ) {
  player2.play();
  playBtn2.src = 'img/stop_disco.png';
 } else {
  player2.pause();
  playBtn2.src = 'img/play_disco.png';
 }
});

body {
 font-family:monospace;
 margin:0;
 line-height:1.45;
}

* {
 box-sizing:border-box;
}

#container_funk {
    float: left;
 width: 100px;
 margin:0 auto;
 padding: 1em;
 margin-top:5px;
}

#play-btn_funk {
 width:100px;
 cursor: pointer;
 display:inline-block;
}

#container_disco {
 position:relative;
    float:left;
 width: 100px;
 margin:0 auto;
 padding: 1em;
 margin-top:5px;
}

#play-btn_disco {
 width:100px;
 cursor: pointer;
 display:inline-block;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>HTML5 Audio Player</title>
</head>
<body>
 <div id="container_funk">
  <audio id="funk">
  <source type="audio/mpeg" src="http://163.172.29.170:8000/;"/>
  </audio>
  <img id="play-btn_funk" src="img/play_funk.png" />
  </div>
<div id="container_disco">
  <audio id="disco">
  <source type="audio/mpeg" src="http://163.172.29.170:8080/;"/>
 </audio>
 <img id="play-btn_disco" src="img/play_disco.png" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="js/audio.js"></script></div>
</body>
</html>

Answer 1

您的代码看起来已经不错了。它只需要一个小的调整。

player1 和 player2 变量引用完全相同的 <audio/> 元素。 document.querySelector() 将在 DOM 中搜索第一个匹配元素，在您的例子中是 #funk。只需将前两行替换为针对每个玩家的显式查询即可。

var player1 = document.querySelector('#funk');
var player2 = document.querySelector('#disco');

如何在同一页面上为 2 个广播流制作 play/stop 按钮？

how to make play/stop button for 2 radio stream on the same page?

jquery

audio

html5-audio

audio-streaming

radio