как я могу остановить stream1, когда я запускаю stream2 - PullRequest
Новая
       103

как я могу остановить stream1, когда я запускаю stream2

0 голосов
/ 16 апреля 2020

У меня есть этот скрипт, который позволяет мне иметь 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>

1 Ответ

0 голосов
/ 17 апреля 2020 
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, только тогда игрок1 остановится

...