我如何停止并恢复HTML5中的实时音频流，而不只是暂停它？

当我在HTML5中构建一个简单的音频流元素时，出现了一个值得注意的问题，

标记在播放和暂停实时音频流方面的行为与预期不符

我正在使用最基本的HTML5代码来流式传输音频，一个带有控件的

标记，其源是一个实时流

当前结果：首次播放流时，它会按预期播放任何流。但是，当它暂停并再次播放时，音频会准确地恢复到先前暂停流时停止的位置。用户现在正在收听流的延迟版本。此事件不是特定于浏览器的

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

有人知道如何在暂停后使此音频流正确恢复吗

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

• 更改音频元素的

  currentTime

  ，对流式音频没有任何影响
• 我已经在用户停止流播放时从DOM中删除了音频元素，并在用户恢复播放时将其重新添加。流仍然在用户停止的地方继续，更糟糕的是，在幕后下载流的另一个副本
• 每次播放流时，我都会在流URL的末尾添加一个随机GET变量，试图让浏览器相信它正在播放一个新流。当用户暂停流时，仍会继续播放

---

注：为了子孙后代，我留下这个答案，因为这是当时我或任何人能够为我的问题提出的最佳解决方案。但后来我将Ciantic后来的想法标记为最佳解决方案，因为它实际上停止了流的下载和播放，就像我最初想要的那样。考虑这个解决方案而不是这个解决方案。

---

我在解决此问题时提出的一个解决方案是完全忽略音频元素上的播放和暂停功能，当用户希望停止播放时，只需将音频元素的音量属性设置为0，然后当用户希望恢复播放时，将音量属性设置回1

如果您使用jQuery（），则此函数的JavaScript代码将非常类似：

我要提醒的是，即使这实现了停止和恢复实时音频流所需的功能，但这并不理想，因为停止时，流实际上仍在后台播放和下载，并在过程中耗尽了带宽

但是，此解决方案不一定比在流式音频元素上使用

.play（）

和

.pause（）

占用更多带宽。简单地将

audio

标记用于流式音频会占用大量带宽，因为一旦播放流式音频，它会在暂停时继续在后台下载流的内容

---

需要注意的是，此方法在iOS中不起作用，因为：

在iOS设备上，音频级别始终由用户物理控制。

volume

属性在JavaScript中不可设置。读取

volume

属性总是返回

1

---

如果您选择使用此答案中的解决方法，则需要为正常使用

play（）

和

pause（）

功能的iOS设备创建回退，否则您的界面将无法暂停流。

停止流的最佳方法，然后再次启动它似乎正在删除源，然后调用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();
}

---

当您想要停止从流下载时，重置音频源并调用

load（）

方法似乎是最简单的解决方案

由于它是一个流，只有当用户离线时，浏览器才会停止下载。重置是必要的，以保护您的用户不烧录其手机数据，或避免在暂停音频时提供浏览器下载的过时内容

请记住，当source属性设置为空字符串时，例如so

audio.src=“”

，音频源将改为设置为页面的主机名。如果使用随机单词，则该单词将作为路径追加

如下图所示，设置

audio.src=”“

，意味着

audio.src==”https://stacksnippets.net/js“

。设置

audio.src=“meow”

将使源文件成为

audio.src==”https://stacksnippets.net/js/meow“

取而代之。因此，3d段落不可见

const audio1=document.getElementById（'audio1'）；
const audio2=document.getElementById（'audio2'）；
document.getElementById（'p1'）.innerHTML=`第一个音频源：${audio1.src}`；
document.getElementById（'p2'）.innerHTML=`第二个音频源：${audio2.src}`；
如果（audio1.src==“”）{
document.getElementById（'p3'）.innerHTML=“您可以看到我，因为音频源设置为空字符串”；
}

查看另一个答案-这是一个非常有效的担忧，即在用户不想听的情况下使用提要是对资源的浪费-无论是从服务器的角度，还是从用户的角度（如果他们是移动的或连接速度有限）。我已将此添加到我的代码中，我可以播放和暂停一次流。但是，当我再次尝试开始播放第二次流时，它将不会启动。当我点击Play时，什么也没有发生。

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();
}