2

一緒に演奏したい曲にいくつかのトラックがあり、一部をミュートして他のトラックを再生できるようにします。そのため、それらすべてを同時に開始できる必要があります。現在、それらはすべてわずかに同期していません。

// Start playing
for ( i = 0; i < 5; i++ ) {
    tracks[i].audio.play();
}

これでも、すべてを同時に開始するには明らかに速度が不十分です。

HTML5オーディオタグが同時に再生を開始することを保証するJavaScriptの方法はありますか?

4

3 に答える 3

2

すでにこれを行っているかどうかはわかりませんが、オーディオをプリロードするためのサンプル コードを次に示します。

var audios = [];
var loading = 0;
AddNote("2C");
AddNote("2E");
AddNote("2G");
AddNote("3C");

function AddNote(name) {
    loading++;
    var audio = document.createElement("audio");
    audio.loop = true;
    audio.addEventListener("canplaythrough", function () {
        loading--;
        if (loading == 0) // All files are preloaded
            StartPlayingAll();
        }, false);
    audio.src = "piano/" + name + ".mp3";
    audios.push(audio);
}

function StartPlayingAll() {
    for (var i = 0; i < audios.length; i++)
        audios[i].play();
    }
}

あなたが試すことができる他のことはaudio.currentTime、オーディオを手動で同期するように各トラックを設定することです.

于 2012-04-30T02:34:25.483 に答える
0

setTimeout を使用して、最初の短い遅延の後にそれらを同期できます (ただし、すべてのオーディオ オブジェクトがロードされるまで待ちたい場合があります)。

JSFiddle: http://jsfiddle.net/bmAYb/35/

var au1 = document.getElementById('au1');
var au2 = document.getElementById('au2');
au1.volume = 1;
au2.volume = 0; //mute
au1.play();
au2.play();
var notfirstRun = false;
//sync for the first time
setTimeout(function() {
    au2.currentTime = au1.currentTime;
    au2.volume = 1;
}, 250);

私の最初の考えは、setInterval を使用して x ミリ秒ごとに同期することでしたが、(audible)volumeに設定されている場合、そうするとオーディオがポップします。1

私のフィドルは完全に同期しているわけではありませんが、かなり近いです。100% 同期できますが、他のトラックのオーディオをミュートするか、ポップ音に対処する必要があります。

コード (およびフィドル内の音楽) はHungry Mediaからのものです。

于 2012-04-30T03:28:35.160 に答える