个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有这个脚本，可以让我拥有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';
}
});
关于jquery - 启动stream2时如何停止stream1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61252005/
26
4
0
我正在尝试实现具有以下签名的方法: public static Pair, Stream> flatten(Iterator, Stream>> iterator); 该方法的目标是将每种流类型展平
我有两个流从两个不同的 api 获取。 Stream get monthOutStream => monthOutController.stream; Stream get resultOutStre
Stream.of(int[])返回 Stream ，而 Stream.of(String[])返回 Stream . 为什么这两种方法的行为不同？两者都应该返回 Stream和 Stream或 St
我正在使用 rxdart在 dart 中处理流的包。我被困在处理一个特殊的问题上。 请看一下这个虚拟代码: final userId = BehaviorSubject(); Stream getSt
我到处都找遍了，还是没弄明白。我知道你可以用流建立两个关联: 用于支持数据存储的包装器意味着作为消费者和供应商之间的抽象层 数据随着时间的推移变得可用，而不是一次全部 SIMD 代表单指令，多数据；在
考虑下面的代码: List l=new ArrayList<>(); l.add(23);l.add(45);l.add(90); Stream str=l.stream
我有一个大型主干/requirejs 应用程序，我想迁移到 webpack，最新的“webpack”:“^4.27.1”，但我遇到了一个我无法解决的错误。 我一直在阅读 https://webpack
我正在使用 xmpp 开发聊天应用程序，根据我们的要求，我们有三台服务器 Apache Tomcat 7、ejabbered 2.1.11 和 mysql 5.5， to run xmppbot on
我知道如何使用 Java 库，并且我可以编写一些循环来执行我需要的操作，但问题更多，为什么 scala.collection.JavaConverters 中没有任何内容或scala.collecti
我正在尝试创建一个单一的衬里，它应该计算一个非常长的文本文件中的唯一单词。独特的词例如:márya fëdorovna scarlet-liveried,...所以基本上都是非英语词。 我的问题是我的
如果我有以下情况: StreamWriter MySW = null; try { Stream MyStream = new FileStream("asdf.txt"); MySW =
有人可以帮我将以下语句转换为 Java8: 我有一个像这样的 HashMap : private Map, List>> someMap; 我想在java8中转换以下逻辑: private Strin
有人可以帮我将以下语句转换为 Java8: 我有一个像这样的 HashMap : private Map, List>> someMap; 我想在java8中转换以下逻辑: private Strin
考虑两种测试方法parallel()和sequential(): @Test public void parallel() throws Exception { System.ou
我是 NodeJS 的新手，我基本上想做的是通过 HTTP 将 .pdf 上传到我的服务器。我正在使用 POST rquest 来处理 Content-Type multipart/form-data
哪个更好:MemoryStream.WriteTo(Stream destinationStream) 或 Stream.CopyTo(Stream destinationStream)？？ 我正在谈
给定一个 Stream，我想创建一个新的 Stream，其中的元素在它们之间有时间延迟。 我尝试使用 tokio_core::reactor::Timeout 和 Stream 的 and_then
我是 Kafka Streams 和 Spring Cloud Stream 的新手，但在将集成相关代码移动到属性文件方面已经阅读了有关它的好东西，因此开发人员可以主要专注于事物的业务逻辑方面。 这里
源代码看起来非常相似:pump , pipe .为什么我要使用一个而不是另一个？一个只是另一个的更好版本吗？ 最佳答案 Stream.pipe 现在显然是自 0.3.x 以来的首选方法，因此尽可能尝试
我正在寻找是否有更好的方法来解决我不得不使用这些签名的困境(注意:由于 Spock 测试，T[][] 是必需的，我提供 T[][] 作为数据提供商) 我的方法签名是: public T[][] cr
我是一名优秀的程序员,十分优秀！