2017-12-11 9 views
0

を使用した大きなファイルの遅延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); 
    } 
    }); 
} 

enter image description here

+0

これは、関連するファイルの読み込みに時間がかかるためです。同時に開始したい場合は、それらをプリロードする必要があります。 –

+0

canplaythrough event bindには何がありますか?オーディオが十分に読み込まれて再生されたら?私はaudio.preload = 'auto'を設定しようとしました。それでも同じ結果が得られます。 –

答えて

0

正確な問題は、MP3形式です。

開始時刻は正確ですが、MP3は「タイムドリフト」ですが、これは他のブラウザよりも悪い場合があります。代わりにAAC(.m4a)形式を使用することを強くお勧めします。時間のずれをなくしてくれるだけでなく、AACもデスクトップとモバイルの両方のブラウザ間で移植性が向上しています。