オーディオファイルをブラウザのキャッシュに保存する方法。ユーザーがボタンを押すと、音声はすぐにキャッシュから再生されますか？

Question

私は短いオーディオファイルのコレクションを持っており、ユーザーが対応するボタンを押すと1つのオーディオファイルを再生したい。問題がある

<script type="text/javascript"> 
    var sound = new Audio(); 
    function playSound(audioUrl) { 
     sound.src = audioUrl; 
     sound.play(); 
    } 
</script> 

<button type="button" onclick="playSound('http://example.com/audioA.mp3')">Audio A</button> 
<button type="button" onclick="playSound('http://example.com/audioB.mp3')">Audio B</button> 
<button type="button" onclick="playSound('http://example.com/audioC.mp3')">Audio C</button> 
... 

、これらのオーディオファイルは大きくありませんが、それでもこれはちょっと迷惑な、ボタンが押された最初の時間でダウンロードして再生するには短い遅延を必要とする：私は、サウンドを再生するには、このスクリプトを持っています。ページの読み込み時にすべてのオーディオファイルをキャッシュするようブラウザに指示するにはどうすればよいですか？私がこれについて調べると、私はオーディオの長さがそれほど長くないので、私のニーズに合わないかもしれないバッファリングとストリーミングオーディオについて見つけました。ありがとう。

Answer 1

プリロードしてからプリロードが完了するとすぐにリンクを利用できるようにすることができます。これを同期または非同期で行うことができます。私は非同期にすることをお勧めします。この例では

ルック：

var sound = new Audio(); 
 
function playSound(audioUrl) { 
 
    sound.src = audioUrl.getAttribute('data-url'); //grab the data-url 
 
    sound.play(); 
 
} 
 

 
function preloadAudio() 
 
{ 
 
    var audioButtons = document.querySelectorAll("button[data-type='audio']") //select all button elements with data-type = audio 
 
    for (var i = 0; i < audioButtons.length; i++) 
 
    { 
 
    //loop all audio elements 
 
    audioButtons[i].setAttribute("disabled", true); //disable the element 
 
    var preloader = new Audio(); 
 
    preloader.addEventListener("loadeddata", enableAudioButton.bind(audioButtons[i]), true); // use bind to link the audio button to the function 
 
    preloader.src = audioButtons[i].getAttribute("data-url"); //trigger the download 
 
    } 
 
} 
 

 
function enableAudioButton() 
 
{ 
 
    this.removeAttribute("disabled"); //reenable the button 
 
} 
 

 
document.body.addEventListener("load", preloadAudio, true);

<button type="button" data-type="audio" data-url="http://example.com/audioA.mp3" onclick="playSound(this)">Audio A</button> 
 
<button type="button" data-type="audio" data-url="http://example.com/audioB.mp3" onclick="playSound(this)">Audio B</button> 
 
<button type="button" data-type="audio" data-url="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" onclick="playSound(this)">Audio C</button>

私は（オーディオC）実際の例を使用しましたので、あなたは、関数でスクリプトを見ることができます。

Answer 2

また、.load()を使用してファイルをプリロードし、上記のコードのように再生することもできます。