JavaScript で複数のオーディオオブジェクトを再生したとき音声のズレが起こる

前提・実現したいこと

合唱のパートの音源を並行して重なり合うように流したい。

発生している問題・エラーメッセージ

最初から流したときはうまく重なるのですが、currentTimeをかえて途中から流すと何故かずれます。

該当のソースコード

html
1<button onclick="play_pause()"></button>

javascript
1let sop = new Audio('./audio/Sop.mp3');
2let alt = new Audio('./audio/Alt.mp3');
3let ten = new Audio('./audio/Ten.mp3');
4let bas = new Audio('./audio/Bas.mp3');
5
6//うまく行く場合
7function play_pause() {
8    if (sop.paused) {
9        sop.play();
10        alt.play();
11        ten.play();
12        bas.play();
13    } else {
14        sop.pause();
15        alt.pause();
16        ten.pause();
17        bas.pause();
18    }
19}
20
21//うまく行かない場合
22function play_pause() {
23    if (sop.paused) {
24        sop.currentTime = 100;
25        alt.currentTime = 100;
26        ten.currentTime = 100;
27        bas.currentTime = 100;
28        sop.play();
29        alt.play();
30        ten.play();
31        bas.play();
32    } else {
33        sop.pause();
34        alt.pause();
35        ten.pause();
36        bas.pause();
37    }
38}

試したこと

play()をsetTimeoutで少し遅くしてみた。

補足情報（FW/ツールのバージョンなど）

ブラウザ chrome 84.0.4147.125（Official Build)

行動規範の内容に同意します

回答1件

まず確認してみました。
音声のズレが起きるか4ファイルとも同じ音響ファイルを設定します

JavaScript
1let sop = new Audio('./audio/Sop.mp3');
2let alt = new Audio('./audio/Sop.mp3');
3let ten = new Audio('./audio/Sop.mp3');
4let bas = new Audio('./audio/Sop.mp3');
5
6//うまく行かない場合
7function play_pause() {
8    if (sop.paused) {
9        sop.currentTime = 100;
10        alt.currentTime = 100;
11        ten.currentTime = 100;
12        bas.currentTime = 100;
13        sop.play();
14        alt.play();
15        ten.play();
16        bas.play();
17    } else {
18        sop.pause();
19        alt.pause();
20        ten.pause();
21        bas.pause();
22    }
23}

再生した限りでは顕著なズレは確認できませんでした。
Chrome,FireFox,IEで確認

ローカル環境で試したのでネットワークの関係で
読み込みタイミングがずれ処理が遅れる可能性があります。
以下の対策をしてみて下さい。
音響ファイルの先読み(キャッシュ)を明確に指定。

JavaScript
1let sop = new Audio('./audio/Sop.mp3');
2let alt = new Audio('./audio/Alt.mp3');
3let ten = new Audio('./audio/Ten.mp3');
4let bas = new Audio('./audio/Bas.mp3');
5sop.load();
6alt.load();
7ten.load();
8bas.load();
9
10//うまく行かない場合
11function play_pause() {
12    if (sop.paused) {
13        sop.currentTime = 100;
14        alt.currentTime = 100;
15        ten.currentTime = 100;
16        bas.currentTime = 100;
17        sop.play();
18        alt.play();
19        ten.play();
20        bas.play();
21    } else {
22        sop.pause();
23        alt.pause();
24        ten.pause();
25        bas.pause();
26    }
27}