56

この機能のおかげで、画像を簡単にプリロードできonloadます。ただし、オーディオでは機能しません。Chrome、Safari、Firefoxなどのブラウザonloadは、オーディオタグの機能をサポートしていません。

JSライブラリを使用せず、HTMLタグを使用または作成せずに、Javascriptでサウンドをプリロードするにはどうすればよいですか？

4

6 に答える 6

48

問題は、Audioオブジェクトが「load」イベントをサポートしていないことです。

代わりに、「canplaythrough」と呼ばれるイベントがあります。これは、完全にロードされていることを意味するわけではありませんが、現在のダウンロードレートでは、トラックが再生するのに十分な時間になるまでに終了するほど十分にロードされています。

だから代わりに

audio.onload = isAppLoaded;

試す

audio.oncanplaythrough = isAppLoaded;

またはさらに良い..;）

audio.addEventListener('canplaythrough', isAppLoaded, false);
于 2011-03-21T16:48:21.793 に答える
10

tylermwashburnで受け入れられた回答を試しましたが、Chromeでは機能しませんでした。そこで私は先に進んでこれを作成しましたが、jQueryの恩恵を受けています。また、oggとmp3のサポートをスニッフィングします。一部の専門家は、192KBSoggファイルは320KBSMP3と同じくらい優れていると言っているため、デフォルトはoggです。したがって、必要なオーディオダウンロードを40％節約できます。ただし、IE9にはmp3が必要です。

// Audio preloader

$(window).ready(function(){
  var audio_preload = 0;
  function launchApp(launch){
    audio_preload++;
    if ( audio_preload == 3 || launch == 1) {  // set 3 to # of your files
      start();  // set this function to your start function
    }
  }
  var support = {};
  function audioSupport() {
    var a = document.createElement('audio');
    var ogg = !!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
    if (ogg) return 'ogg';
    var mp3 = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
    if (mp3) return 'mp3';
    else return 0;
  }
  support.audio = audioSupport();
  function loadAudio(url, vol){
    var audio = new Audio();
    audio.src = url;
    audio.preload = "auto";
    audio.volume = vol;
    $(audio).on("loadeddata", launchApp);  // jQuery checking
    return audio;
  }
  if (support.audio === 'ogg') {
    var snd1 = loadAudio("sounds/sound1.ogg", 1);  // ie) the 1 is 100% volume
    var snd2 = loadAudio("sounds/sound2.ogg", 0.3);  // ie) the 0.3 is 30%
    var snd3 = loadAudio("sounds/sound3.ogg", 0.05);
        // add more sounds here
  } else if (support.audio === 'mp3') { 
    var snd1 = loadAudio("sounds/sound1.mp3", 1);
    var snd2 = loadAudio("sounds/sound2.mp3", 0.3);
    var snd3 = loadAudio("sounds/sound3.mp3", 0.05);
        // add more sounds here
  } else {
    launchApp(1);  // launch app without audio
  }

// this is your first function you want to start after audio is preloaded:
  function start(){
     if (support.audio) snd1.play();  // this is how you play sounds
  }

});

さらに：mp3からoggへのコンバーターは次のとおりです。http： //audio.online-convert.com/convert-to-ogg または、VLCメディアプレーヤーを使用して変換できます。（Windowsの場合）mp3ファイルを右クリックし、ファイルの詳細に移動して、mp3ビットレートを確認します。新しい「ogg」ファイルの新しいビットレートを選択するときは、40％削減してください。コンバーターはエラーをスローする可能性があるため、受け入れられるまでサイズを増やし続けます。もちろん、満足のいく品質のテストサウンドです。また、VLC Mediaプレーヤーを使用してオーディオトラックをテストしている場合は、音量を100％以下に設定してください。そうしないと、オーディオの劣化が聞こえ、圧縮の結果であると誤解する可能性があります。

于 2012-10-29T06:23:48.270 に答える
0

ターゲットブラウザによってはprelaod、タグに属性を設定するaudioだけで十分な場合があります。

于 2011-03-15T15:23:04.997 に答える
0 
//Tested on Chrome, FF, IE6

function LoadSound(filename) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("load-sound").innerHTML = '<embed src="' + filename + '" controller="1" autoplay="0" autostart="0" />';
        }
    }
    xmlhttp.open("GET", filename, true);
    xmlhttp.send();
}

参照

于 2011-03-15T15:41:51.900 に答える
0

Remyは、スプライトの概念を利用したiOS向けのソリューションを考案しました。

http://remysharp.com/2010/12/23/audio-sprites/

プリロードに直接対応しているかどうかはわかりませんが、1つのオーディオファイルをロードするだけでよいという利点があります（これも欠点だと思います）。

于 2011-03-16T15:05:43.540 に答える
0

ファイルに対してajaxリクエストを作成してみましたか？完全にロードされるまで、表示/使用しません。

例：jQuery：サウンドをどのようにプリロードしますか？（jQueryを使用する必要はありません）。

于 2011-03-17T15:47:45.670 に答える