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

问题描述

在HTML5中构建简单的音频流媒体元素时出现的一个值得注意的问题是，< audio> 标记的行为并不像人们期望的那样关于播放和暂停实时音频流。

我使用最基本的HTML5代码来传输音频，< audio>带有控件的标签，其源文件是实时流，可以在这里演示： http： //jsfiddle.net/uzzz03ha/

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

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

有谁知道一种方法让这段音频流在暂停后恢复正常？

我为解决这个问题做了一些失败的尝试：

• 改变audio元素的 currentTime 对音频流式处理没有任何影响。


• 当用户停止流式播放并在用户恢复播放时将其添加回来时，从DOM中删除音频元素。流仍然继续用户离开的地方，更糟糕的是在后台下载另一个流副本。


• 我每次都在流URL的末尾添加一个随机GET变量该流是为了欺骗浏览器，使其相信它正在播放一个新的流。在用户暂停数据流的位置，播放仍会继续。 最好的停止数据流的方法，然后再次启动似乎是移除源代码然后调用load：
  
  

    var sourceElement = document.querySelector（source ）; 
   var originalSourceUrl = sourceElement.getAttribute（src）; 
   var audioElement = document.querySelector（audio）; 
   
  函数暂停（）{
   sourceElement.setAttribute（src，）; 
   audioElement.pause（）; 
   // settimeout，否则暂停事件不会正常提升
   setTimeout（function（）{
   audioElement.load（）; //这会停止下载
  }）; 
   
   
  函数play（）{
   if（！sourceElement.getAttribute（src））{
   sourceElement.setAttribute（src，originalSourceUrl）; 
   audioElement.load（）; //这将重新开始流下载
  } 
   audioElement.play（）; 
  } 
    

  
  

  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.

  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, which can be demonstrated here: http://jsfiddle.net/uzzz03ha/

  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:

  • 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屋！