OPUS的HTML5音频跳到结尾，过渡不平稳

Question

我有一台服务器，将OPUS文件提供给客户端。

我有一个音频元素：

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

在角度6中，我将设置的音频源设置如下：

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

现在，当我设置音频元素的src时，滑块会长时间停留在前面，不会移动，然后在剩下最后几秒钟时跳到结尾部分。

为什么会这样？

Answer 1

我通过在响应中添加Accept-Ranges：bytes标头字段解决了该问题。

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