1

私はgifと相関してwavファイルを自動起動するスプラッシュページに取り組んでいます。私がやりたいのは、wav ファイルと gif の両方が完全に読み込まれるまで読み込みホイールを表示して、同期して再生することです。むしろ swf を使用したかったのですが、クライアントに元のプロジェクト ファイルがないため、ロードが非常に遅く、ページが完全にロードされてからしか wav ファイルの再生が開始されないくだらない gif を使用することになります。両方同時にプレイする必要があります。助言がありますか？

4

1 に答える 1

1

1 つの方法は、gif とオーディオ ファイルの両方を使用XMLHttpRequestしてロードすることです。両方でイベントをdata uri追跡します。onreadystatechange両方が完了したら、それらの属性httpRequest.responseTextに直接設定できます。srcたとえば、次のコードは、html の読み込みが完了した後に実行できます。

var imageData = "";
var audioData = "";

function onHtmlLoad()
{
    // Show loading wheel..        

    var isImageLoaded = false;
    var isAudioLoaded = false;    

    var imageRequest = new XMLHttpRequest();  
    request.open('GET', 'http://www.website.com/path/to/image.gif', true);

    imageRequest.onreadystatechange = function(e) {  

        if(imageRequest.readyState == 4)
        {
            if(imageRequest.status == 200)
            {
                isImageLoaded = true;
                imageData = imageRequest.responseText; // data uri..
                if(isAudioLoaded)
                    loadSplashScreen();
            }
        }
    }

    imageRequest.send();

    var audioRequest = new XMLHttpRequest();  
    request.open('GET', 'http://www.website.com/path/to/audio.wav', true);

    audioRequest.onreadystatechange = function(e) {  

        if(audioRequest.readyState == 4)
        {
            if(audioRequest.status == 200)
            {
                isAudioLoaded = true;
                audioData = audioRequest.responseText; // data uri..
                if(isImageLoaded )
                    loadSplashScreen();
            }
        }
    }

    audioRequest.send();
}

function loadSplashScreen()
{
    var imgEl = document.getElementById("myImgElement");
    var audioEl = document.getElementById("myAudioElement");

    // loads immediately..
    imgEl.src = imageData;
    audioEl.src = audioData;

    // Hide loading wheel..
}

data uriただし、属性に設定するサイズsrcが制限される可能性があることにも注意してください。これを確認してください。お役に立てれば..

于 2012-05-15T16:03:28.697 に答える