How to enable seek for audio tag by Laravel5.5 Audioタグでシークを有効にする


Laravel5.5で、mp3ファイルへのリンクを直接貼るのではなく、アプリケーションからバイナリを
返却するようにしたい時、Accept-Ranges、Content-Rangeヘッダをレスポンスに追加するとaudioタグでシークできるようになる

You can enable to seek in audio tags by adding "Accept-Ranges" and "Content-Range" headers.

controller

class AudioController extends Controller
{
    public function loadAudio(Request $request)
    {
        //S3からオーディオファイルの取得
        $audioFile = Storage::disk('s3')->get('test_audio.mp3');

        $fullSize = strlen($audioFile);
        $startByte = 0;
        $endByte = $fullSize - 1;
        return response($audioFile)
            ->header('Content-Type', 'audio/mpeg')
            ->header('Content-Length', $fullSize)
            ->header('Accept-Ranges', 'bytes')
            ->header('Content-Range', 'bytes '.$startByte.'-'.$startByte.'/'.$endByte);
    }
}

view file

<audio controls>
    <source src="{{ route('audio.route', compact('key')) }}" type="audio/wav">
    Your browser does not support the audio element.
</audio>

参考URL:
https://forums.asp.net/t/2125393.aspx?Html+5+Audio+control+seek+is+not+working+