可変ビットレートのファイルを正確に再生する方法
完璧な対応方法としては固定ビットレートに再エンコードするしか無いと思うが、とりあえずの対応方法をメモしておく。
音声ファイルの場合WebAudioAPIで再生することで可変ビットレートのファイルでも正確に再生することができる 問題は長時間ファイルでメモリリークを起こす事があったり、最初にファイルを取得→デコードするので再生可能までの時間が掛かる
例)
code:js
useEffect(() => {
const audio = document.querySelector('#audio');
const updateSource = async () => {
const arrayBuffer = await fetch(filePath).then((res) => res.arrayBuffer());
const mediaSource = new MediaSource();
audio.src = URL.createObjectURL(mediaSource);
audio.load();
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
sourceBuffer.addEventListener('updateend', () => mediaSource.endOfStream());
sourceBuffer.appendBuffer(arrayBuffer);
});
};
updateSource();
問題はchromeしか対応していない件
firefoxなどではmimetypeaudio/mpegが対応しておらず動かない
chrome以外をサポート対応外ブラウザとして正確な時間を返さなくて良いのであれば、
例)
code:js
const mime = 'audio/mpeg'
if (MediaSource.isTypeSupported(mime)) {
~
} else {
audio.src = filePath
}
この様に条件分岐して普通にaudioのsrcで読み込めば良い