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+