を使用した大きなファイルの遅延Javascriptのネイティブオーディオライブラリ
ネイティブオーディオクラスを使用して特定の位置からオーディオを再生しようとしていますが、それは小さいオーディオ(数秒)でうまく動作しますが、20分間のオーディオで同じものを試してみると、私が必要とするもののために多くの約0.5秒の遅れです。
これを説明するために単純なjsfiddleを作成しましたが、問題を理解するのに役立ちます。
長い音声と短い音声の両方のポジションはまったく同じに再生する必要がありますが、実際には再生しません。また、オーディオ内の位置が正しいことを示すために2つの画面キャプチャを添付します。
アイデア?前もって感謝します!!
jsfiddle:https://jsfiddle.net/oxmanroman/n4sLLuk9/4/
playShortAudio().then(() => {
setTimeout(playLongAudio, 1000);
})
function playShortAudio() {
// play from 2 seconds, 400 milliseconds
return playAudio('https://s3.amazonaws.com/thespanishapp/test.mp3', 2.400);
}
function playLongAudio() {
// play from 4 minutes, 27 seconds, 750 milliseconds
return playAudio('https://s3.amazonaws.com/thespanishapp/large-test.mp3', 267.750);
}
function playAudio(url, startingPoint) {
return new Promise(resolve => {
const audio = new Audio(url);
// set audio position to listen 'hello miss...'
audio.currentTime = startingPoint;
// play audio when ready
audio.oncanplaythrough =() => {
audio.play();
// stop the audio and resolve the promise after two seconds of audio
setTimeout(() => {
audio.pause();
resolve();
}, 2000);
}
});
}
これは、関連するファイルの読み込みに時間がかかるためです。同時に開始したい場合は、それらをプリロードする必要があります。 –
canplaythrough event bindには何がありますか?オーディオが十分に読み込まれて再生されたら?私はaudio.preload = 'auto'を設定しようとしました。それでも同じ結果が得られます。 –