如何停止和恢复HTML5中的实时音频流而不仅仅是暂停它?

科尔·马歇尔

当我在HTML5中构建一个简单的音频流元素时出现的一个值得注意的问题是,该<audio>标签的行为与播放和暂停实时音频流的预期不同。

我正在使用最基本的HTML5代码来流式传输音频,<audio>带有控件标签,其来源是实时流。

当前结果:首次播放流时,它将按预期播放任何流。但是,当暂停并再次播放时,音频将恢复到先前暂停流时停止播放的位置。用户现在正在收听流的延迟版本。这种情况不是特定于浏览器的。

期望的结果:当流暂停时,我希望流停止。再次播放时,我希望它恢复流当前所在的位置,而不是用户暂停流时的位置。

有人知道暂停后可以正确恢复该音频流的方法吗?

我为解决此问题而进行的尝试失败:

  • 更改currentTime音频元素的不会对流音频产生任何影响。
  • 当用户停止流播放时,我已从DOM中删除了音频元素,并在用户恢复播放时将其重新添加。流仍然在用户离开的地方继续,更糟糕的是,在后台下载了流的另一个副本。
  • 每次播放流时,我都会在流URL的末尾添加一个随机的GET变量,以使浏览器认为自己正在播放新的流。播放仍在用户暂停流的地方恢复。
Ciantic

停止流然后重新启动的最佳方法似乎是删除源,然后调用load:

var sourceElement = document.querySelector("source");
var originalSourceUrl = sourceElement.getAttribute("src");
var audioElement = document.querySelector("audio");

function pause() {
    sourceElement.setAttribute("src", "");
    audioElement.pause();
    // settimeout, otherwise pause event is not raised normally
    setTimeout(function () { 
        audioElement.load(); // This stops the stream from downloading
    });
}

function play() {
    if (!sourceElement.getAttribute("src")) {
        sourceElement.setAttribute("src", originalSourceUrl);
        audioElement.load(); // This restarts the stream download
    }
    audioElement.play();
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

不仅仅是变量中的Like语句

来自分类Dev

导入中毒密钥后如何修复GnuPG(而不仅仅是删除它)

来自分类Dev

显示外键数据(名称等),而不仅仅是 HTML 表中的外键

来自分类Dev

如何从列表中删除多个项目,而不仅仅是访问它们

来自分类Dev

如何在整个班级中访问约束,而不仅仅是在我设置的地方?

来自分类Dev

如何在Canvas中创建选择框以选择它触摸的所有对象,而不仅仅是它包含的对象?

来自分类Dev

写的不仅仅是“你好”

来自分类Dev

需要完整的JDK(不仅仅是JRE)

来自分类Dev

收到的不仅仅是删除事件的ID?

来自分类Dev

Redis-不仅仅是键查询

来自分类Dev

写的不仅仅是“你好”

来自分类Dev

函数返回 json 而不仅仅是值

来自分类Dev

您(当前)如何使用Onsen-UI更改应用的总体主题和外观?(不仅仅是颜色)

来自分类Dev

从文件夹中的文件列表中提取数据到母版,而不仅仅是复制和粘贴

来自分类Dev

如何从所有div中(不仅仅是同级兄弟)中删除带有jQuery的类?

来自分类Dev

如何在javascript中的字符串中搜索单词(不仅仅是子字符串)?

来自分类Dev

如何用点的颜色填充geom_point图例中的框,而不仅仅是增加它们的大小?

来自分类Dev

如何删除整个聊天,而不仅仅是删除python电报中的最后一条消息?

来自分类Dev

ORA-01790数据类型:如何添加使用名称中的文本的能力,而不仅仅是数字

来自分类Dev

如何显示所有结果,而不仅仅是代表计算器中的一个

来自分类Dev

如何在django中获取相关模型的所有字段而不仅仅是id

来自分类Dev

为什么这个 SUM 是所有分数,而不仅仅是最好的 5 分?

来自分类Dev

使用httr和RCurl的415代码,但不仅仅是curl

来自分类Dev

为什么我应该监视流程,而不仅仅是链接和陷阱出口?

来自分类Dev

覆盖范围和鼻子显示了来自Django的文件,而不仅仅是我的测试

来自分类Dev

降低div顶部和底部的高度(不仅仅是底部)

来自分类Dev

react-big-calendar 显示任务而不仅仅是标题和描述

来自分类Dev

R抓取整个html,而不仅仅是页面视图

来自分类Dev

使用 base.html 文件但修改的不仅仅是正文

Related 相关文章

  1. 1

    不仅仅是变量中的Like语句

  2. 2

    导入中毒密钥后如何修复GnuPG(而不仅仅是删除它)

  3. 3

    显示外键数据(名称等),而不仅仅是 HTML 表中的外键

  4. 4

    如何从列表中删除多个项目,而不仅仅是访问它们

  5. 5

    如何在整个班级中访问约束,而不仅仅是在我设置的地方?

  6. 6

    如何在Canvas中创建选择框以选择它触摸的所有对象,而不仅仅是它包含的对象?

  7. 7

    写的不仅仅是“你好”

  8. 8

    需要完整的JDK(不仅仅是JRE)

  9. 9

    收到的不仅仅是删除事件的ID?

  10. 10

    Redis-不仅仅是键查询

  11. 11

    写的不仅仅是“你好”

  12. 12

    函数返回 json 而不仅仅是值

  13. 13

    您(当前)如何使用Onsen-UI更改应用的总体主题和外观?(不仅仅是颜色)

  14. 14

    从文件夹中的文件列表中提取数据到母版,而不仅仅是复制和粘贴

  15. 15

    如何从所有div中(不仅仅是同级兄弟)中删除带有jQuery的类?

  16. 16

    如何在javascript中的字符串中搜索单词(不仅仅是子字符串)?

  17. 17

    如何用点的颜色填充geom_point图例中的框,而不仅仅是增加它们的大小?

  18. 18

    如何删除整个聊天,而不仅仅是删除python电报中的最后一条消息?

  19. 19

    ORA-01790数据类型:如何添加使用名称中的文本的能力,而不仅仅是数字

  20. 20

    如何显示所有结果,而不仅仅是代表计算器中的一个

  21. 21

    如何在django中获取相关模型的所有字段而不仅仅是id

  22. 22

    为什么这个 SUM 是所有分数,而不仅仅是最好的 5 分?

  23. 23

    使用httr和RCurl的415代码,但不仅仅是curl

  24. 24

    为什么我应该监视流程,而不仅仅是链接和陷阱出口?

  25. 25

    覆盖范围和鼻子显示了来自Django的文件,而不仅仅是我的测试

  26. 26

    降低div顶部和底部的高度(不仅仅是底部)

  27. 27

    react-big-calendar 显示任务而不仅仅是标题和描述

  28. 28

    R抓取整个html,而不仅仅是页面视图

  29. 29

    使用 base.html 文件但修改的不仅仅是正文

热门标签

归档