启动stream2时如何停止stream1

Posted 2023-02-25

技术标签:

【中文标题】启动stream2时如何停止stream1【英文标题】：how can i stop stream1 when i start stream2 【发布时间】：2020-04-16 13:53:28 【问题描述】：

我有这个脚本，它允许我有 2 个无线电流，每个都有自己的播放/暂停按钮。按钮播放/停止流 1 按钮播放/停止流 2 假设我正在收听流 1 并想切换到流 2，使用此代码我必须停止流 1，然后使用自己的按钮启动流 2...

我的问题是，有没有办法在我启动另一个流时停止流播放？

var player1 = document.querySelector('#funk');
var player2 = document.querySelector('#disco');
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>

【问题讨论】：

你试过在其他播放器上调用 paused 方法吗？您拥有全局变量中的所有引用。 【参考方案1】：

var player1 = document.querySelector('#funk');
var player2 = document.querySelector('#disco');
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 
        player2.pause();
        playBtn1.src = 'img/play_funk.png';
    
);

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

我想出了这段代码。假设 player1 处于打开状态，我点击 player2 按钮，他们一直一起玩，直到我点击 player2 按钮两次，然后 player1 才停止

【讨论】：

以上是关于启动stream2时如何停止stream1的主要内容，如果未能解决你的问题，请参考以下文章

ForkJoin 2 BehaviorSubjects