HTML5 OPUS 的音频跳到结尾，过渡不流畅

Question

我有一个服务器向客户提供 OPUS 文件。

我有一个音频元素：

<audio id="recordingAudioElement" controls autoplay="true" controlsList="nodownload">
  <source src="" type="audio/x-wav">
</audio>

在angular6中，我设置的音频源设置如下：

this.audioElement.src = this.myService.getAudio(id);

我有一个 Java 后端方法，它从输入流获取音频并将其发送到客户端：

public HttpServletResponse createServletResponse(HttpServletRequest request, HttpServletResponse response, InputStream inputStream) {

    ServletOutputStream os = null;
    byte[] data;
    try {
        data = ByteStreams.toByteArray(inputStream);

        response.setContentType("audio/x-wav");
        response.setStatus(200);

        os = response.getOutputStream();
        os.write(data);
        os.flush();
    } catch (IOException e) {
        e.printStackTrace();
        response.setStatus(500); 
    }
    return response;
}

现在我设置audio元素的src时，slider长时间停留在最前面，不动，最后几秒就跳到尾部

为什么会这样？

Answer 1

我通过在响应中添加 Accept-Ranges:bytes header 字段解决了这个问题。

response.setHeader("Accept-Ranges", "bytes");

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

HTML5 OPUS 的音频跳到结尾，过渡不流畅

HTML5 audio for OPUS jumping to end, not transitioning smoothly

javascript

google-chrome

html5-audio

angular