如何在同一页面上为 2 个无线电流制作播放/停止按钮？
Posted
技术标签:
【中文标题】如何在同一页面上为 2 个无线电流制作播放/停止按钮？【英文标题】：how to make play/stop button for 2 radio stream on the same page? 【发布时间】：2020-07-23 06:39:19 【问题描述】：我为我的广播流制作了 2 个按钮，每个按钮都像一个播放/停止按钮。
-
播放/停止流 1（shoutcast 或 icecast）
播放/停止流 2（shoutcast 或 icecast）
这就是我所做的，当你同时按下两个按钮时，只播放了一个流（放克），第二个根本不播放（迪斯科）
你能帮帮我吗？ 谢谢 托尼
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>【问题讨论】：
【参考方案1】：您的代码看起来已经不错了。它只需要稍作调整。
player1 和 player2 变量引用完全相同的 <audio/> 元素。 document.querySelector() 将在 DOM 中搜索第一个匹配元素，在您的情况下为 #funk。只需将前两行替换为每个玩家的显式查询即可。
var player1 = document.querySelector('#funk');
var player2 = document.querySelector('#disco');
【讨论】：
我认为这是官方指南：***.com/help/someone-answers ... 但看起来您已经弄清楚了。 :-)以上是关于如何在同一页面上为 2 个无线电流制作播放/停止按钮？的主要内容，如果未能解决你的问题，请参考以下文章
FLASH中的播放和停止按钮代码要如何写？要鼠标按下去就播放的