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

当我在HTML5中构建一个简单的音频流媒体元素时出现的一个值得注意的问题是，<audio>标记在播放和暂停实时音频流方面的表现并不像预期的那样。如何停止并恢复HTML5中的实时音频流而不是暂停它？

我使用的是最基础的HTML5代码流音频，一个<audio>标签与控制，其源是实时流，可以在这里证明：http://jsfiddle.net/uzzz03ha/

当前结果：当该流首先播放，它按照预期播放任何流。但是，当它暂停并再次播放时，音频会在流先前暂停时从其停止的地方恢复。用户现在正在监听流的延迟版本。这种情况不是浏览器特定的。

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

有没有人知道一种方法可以让音频流在暂停后恢复正常？

一些失败的我做了解决这个问题的尝试：改变音频元素的currentTime无助于流式音频

。
当用户停止流式播放时，我已经从DOM中删除音频元素，并在用户恢复播放时将其添加回来。流仍然继续用户离开的地方，更糟的是在后台下载另一个流的副本。
我每次播放流时都会在流URL的末尾添加一个随机GET变量，试图欺骗浏览器使其相信它正在播放新流。在用户暂停数据流的位置，播放仍会继续。

来源

2014-12-02 Cole

最好的办法来阻止流，然后再启动它似乎再次被删除源，然后调用负载：

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

来源

2017-02-08 22:45:53 Ciantic

一个解决方案，我想出了，而解决此问题是忽略了播放和暂停音频元素功能的音频单元的体积属性时，用户希望停止播放全部，只是设置为0，然后设置当用户希望恢复播放时，音量属性回到1。

这种功能的JavaScript代码看起来很像这个，如果你正在使用jQuery（also demonstrated in this fiddle）：

/* 
* Play/Stop Live Audio Streams 
* "audioElement" should be a jQuery object 
*/ 
function streamPlayStop(audioElement) { 
    if (audioElement[0].paused) { 
    audioElement[0].play(); 
    } else if (!audioElement[0].volume) { 
    audioElement[0].volume = 1; 
    } else { 
    audioElement[0].volume = 0; 
    } 
}

我要提醒的是，即使这个实现停止和恢复现场音频所需的功能它并不理想，因为当停止时，流实际上仍在播放和在后台下载，在流程中占用带宽。

但是，该解决方案不一定占用比在流音频元素上仅使用.play()和.pause()更多的带宽。只需在流媒体音频中使用audio标记，无论如何都会占用大量带宽，因为一旦播放流式音频，它会在暂停后继续在后台下载流的内容。

应当指出的是，这种方法不会在iOS中因为purposefully built-in limitations for iPhones and iPads工作：

在iOS设备上的音频电平始终是用户的物理控制之下。 volume属性不能在JavaScript中设置。读取volume属性总是返回1。

如果您选择使用变通方法在这个答案，你需要为iOS设备备用，通常使用play()和pause()功能，或者你的界面将无法暂停流。

来源

2014-12-05 18:46:45 Cole

不幸的是，HTML5中的音频流有点用词不当，因为它实际上不是实时流式传输。 HTML5需要一个音频文件（.wav，.mp3等）来尝试下载。它不会接受直播流格式（在线广播，流媒体PCM数据等）。

您的jsfiddle.net/uzzz03ha/示例未使用实时音频流，而是使用预先录制的文件。 HTML5缓冲该文件一点点，然后播放它。暂停和恢复音频暂停时间，因为它“知道”它是一个预先录制的文件。 Cole的回答会帮助你解决暂停/播放问题，但是你仍然会留下html5不接受直播节目的问题。你也必须解决这个问题。

所以，不幸的是我没有你的问题的答案，因为我发现你的问题，而试图解决同样的问题。这篇文章可以帮助你指明正确的方向，但：Play live audio stream - html5

来源

2015-02-09 21:54:17

它接受无休止的MP3流没事。 – 2018-02-14 01:47:41

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

回答

相关问题