我有这个脚本，可以让我有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>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';
}
});
我想出了这段代码。假设播放器1处于开启状态，我单击播放器2按钮，它们一直一起播放，直到我单击播放器2按钮两次，才停止播放器1。