如何停止和恢复 HTML5 中的实时音频流,而不仅仅是暂停? [英] How can I stop and resume a live audio stream in HTML5 instead of just pausing it?

查看:29
本文介绍了如何停止和恢复 HTML5 中的实时音频流,而不仅仅是暂停?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我在 HTML5 中构建一个简单的音频流元素时出现的一个值得注意的问题是 <audio> 标签在播放和暂停一个实时音频流.

A notable issue that's appearing as I'm building a simple audio streaming element in HTML5 is that the <audio> tag doesn't behave as one would expect in regards to playing and pausing a live audio stream.

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

I'm using the most basic HTML5 code for streaming the audio, an <audio> tag with controls, the source of which is a live stream.

当前结果:首次播放流时,它会按预期播放任何正在播放的内容.但是,当它暂停并再次播放时,音频会从先前暂停流时停止的地方恢复.用户现在正在收听流的延迟版本.这种情况并非特定于浏览器.

Current outcome: When the stream is first played, it plays whatever is streaming as expected. When it's paused and played again, however, the audio resumes exactly where it left off when the stream was previously paused. The user is now listening to a delayed version of the stream. This occurrence isn't browser-specific.

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

Desired outcome: When the stream is paused, I want the stream to stop. When it is played again, I want it resume where the stream is currently at, not where it was when the user paused the stream.

有没有人知道让这个音频流在暂停后正常恢复的方法?

Does anyone know of a way to make this audio stream resume properly after it's been paused?

我为解决此问题所做的一些失败尝试:

Some failed attempts I've made to fix this issue:

  • 更改音频元素的 currentTime 对流式传输音频没有任何影响.
  • 我在用户停止流播放时从 DOM 中删除了音频元素,并在用户恢复播放时将其重新添加.流仍会从用户停止的地方继续,更糟糕的是,还会在后台下载流的另一个副本.
  • 每次播放流时,我都会在流 URL 的末尾添加一个随机 GET 变量,以试图让浏览器相信它正在播放新流.播放仍会在用户暂停流的位置继续.
  • Altering the currentTime of the audio element does nothing to streaming audio.
  • I've removed the audio element from the DOM when the user stops stream playback and added it back in when user resumes playback. The stream still continues where the user left off and worse yet downloads another copy of the stream behind the scenes.
  • I've added a random GET variable to the end of the stream URL every time the stream is played in an attempt to fool the browser into believing that it's playing a new stream. Playback still resumes where the user paused the stream.

推荐答案

停止流,然后再次启动它的最佳方法似乎是删除源然后调用加载:

Best way to stop a stream, and then start it again seems to be removing the source and then calling 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();
}

这篇关于如何停止和恢复 HTML5 中的实时音频流,而不仅仅是暂停?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆