玩框架2.3.x版本ByteChunks MP3流媒体没有播放功能，在浏览器中没有'滚动' [英] Play Framework 2.3.x ByteChunks MP3 streaming has no playback, is not 'scrollable' in the browser

问题描述

使用播放框架（版本 2.3.x版本）（Java的风格），我想成为一个 .MP3 文件到浏览器。既然是大文件，我已经决定去与播放的 ByteChunks 对象，如下：

Using Play Framework (version 2.3.x) (Java style), I am trying to serve an .mp3 file to the browser. Since it is a 'large' file I have decided to go with Play's ByteChunks Object, as follows.

@With(MP3Headers.class)
public static Result test() {

    Chunks<byte[]> chunks = new ByteChunks() {
        public void onReady(Chunks.Out<byte[]> out) {
            try {
                byte[] song = Files.readAllBytes(Paths.get("public/mp3/song.mp3"));
                out.write(song);
            } catch(Exception e) {
                e.printStackTrace();
            } finally {
                out.close();
            }
        }
    };

    return ok(chunks);
}

有关澄清，我的 Mp3Headers 文件，该文件是为RESPONSABLE设置的头，使浏览器知道什么类型有效载荷有：

For clarification, my Mp3Headers file, which is responsable for setting the headers so that the browser knows what type the payload has:

public class MP3Headers extends Action.Simple {

    public Promise<Result> call(Http.Context ctx) throws Throwable {
        ctx.response().setContentType("audio/mpeg");
        return delegate.call(ctx);
    }
}

有关结束后，我的路线文件：

For completion, my routes file:

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                           controllers.Application.index()

GET     /test                       controllers.Application.test()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file) 

至于是可以预期的，导航到本地主机：9000 /测试呈现一个不错的 HTML5 音频播放器（见图片）。

As is to be expected, navigating to localhost:9000/test renders to a nice HTML5 audio player (see picture).

我的问题是，在音频播放器滚动不起作用。如果我做滚动，音乐暂停，当我放手（当我选择了时间上的位置），它继续在那里第一次暂停。

The problem I have is that 'scrolling' in the audio player does not work. If I do scroll, the music pauses, and when I let go (when I 'chose' a position in time), it continues where it first paused.

我希望是有意义的，我希望你们多了解一下这个。先谢谢了。

I hope that I make sense, and I hope that you guys know something more about this. Thanks in advance.

推荐答案

您将需要告诉你的浏览器，你的服务器支持范围请求和实施范围的反应（即只提供浏览器需要音乐的一部分）。你可以在请求/响应周期这个答案的概述。

You will need to tell your browser that your server support range requests and implement the ranges responses (ie just provide the part of the music the browser needs). You can get an overview of the request/response cycle in this answer.

@With(MP3Headers.class)
public static Result test() {
    final int begin, end;
    final boolean isRangeReq;
    response().setHeader("Accept-Ranges", "bytes");
    if (request().hasHeader("RANGE")) {
        isRangeReq = true;
        String[] range = request().getHeader("RANGE").split("=")[1].split("-");
        begin = Integer.parseInt(range[0]);
        if (range.length > 1) {
            end = Integer.parseInt(range[1]);
        } else {
            end = song.length-1;
        }
        response().setHeader("Content-Range", String.format("bytes %d-%d/%d", begin, end, song.length));
    } else {
        isRangeReq = false;
        begin = 0;
        end = song.length - 1;
    }

    Chunks<byte[]> chunks = new ByteChunks() {
        public void onReady(Chunks.Out<byte[]> out) {
            if(isRangeReq) {
                out.write(Arrays.copyOfRange(song, begin, end));
            } else {
                out.write(song);
            }
            out.close();
        }
    };
    response().setHeader("Content-Length", (end - begin + 1) + "");
    if (isRangeReq) {
        return status(206, chunks);
    } else {
        return status(200, chunks);
    }
}

请注意，在此code中的歌曲在已加载的歌曲。另外，范围头的解析非常脏（你可以得到像值范围：）

Note that in this code the song was already loaded in song. Also the parsing of the RANGE header is very dirty (you can get values like RANGE:)

这篇关于玩框架2.3.x版本ByteChunks MP3流媒体没有播放功能，在浏览器中没有'滚动'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！