3

jqueryを使用してHTMLページでオーバーラップさせずに、ランダムなオーディオサウンドバイトを次々に連続して再生する方法を見つけようとしています。タイマーでランダムなサウンドバイトを再生するコードがありますが、オーバーラップすることもあれば、サウンドの間に一時停止があることもあります。私は他のEventListenerを調べましたendedが、自分が何をしているのか本当にわかりません。これが私のコードの一部です：

<html>
    <audio id="audio1">
        <source src="cnn.mp3"></source>
    </audio>
    <audio id="audio2">
        <source src="sonycrackle.mp3"></source>
    </audio>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                    $('audio').each(function(){
                            this.volume = 0.6;
                    });
            var tid = setInterval(playIt, 2000);
            });

            function playIt() {
                    var n = Math.ceil(Math.random() * 2);
                    $("#audio"+n).trigger('play');
            };

前のサウンドが再生された直後に、これらのサウンドバイトを次々と連続して再生する方法はありますか？FWIWサウンドバイトはたくさんありますが、参考のために上記の2つを示しています。

4

2 に答える 2

2

少し手を加えました。これが完全に純粋なJavaScriptソリューションです。

クロスブラウザである必要があり、テストされていません（/ lazy）。バグを見つけたら教えてください

var collection=[];// final collection of sounds to play
var loadedIndex=0;// horrible way of forcing a load of audio sounds

// remap audios to a buffered collection
function init(audios) {
  for(var i=0;i<audios.length;i++) {
    var audio = new Audio(audios[i]);
    collection.push(audio);
    buffer(audio);
  }
}

// did I mention it's a horrible way to buffer?
function buffer(audio) {
  if(audio.readyState==4)return loaded();
  setTimeout(function(){buffer(audio)},100);
}

// check if we're leady to dj this
function loaded() {
  loadedIndex++;
  if(collection.length==loadedIndex)playLooped();
}

// play and loop after finished
function playLooped() {
  var audio=Math.floor(Math.random() * (collection.length));
  audio=collection[audio];
  audio.play();
  setTimeout(playLooped,audio.duration*1000);
}

// the songs to be played!
init([
  'http://static1.grsites.com/archive/sounds/background/background005.mp3',
  'http://static1.grsites.com/archive/sounds/background/background006.mp3',
  'http://static1.grsites.com/archive/sounds/background/background007.mp3'
]);
于 2013-01-09T23:42:15.713 に答える
0

いくつかの簡単な提案は、属性preload = "auto"をオーディオ要素に追加し、スクリプトをドキュメント対応ではなく$（window）.onloadに変更することです。htmlが配置されている場合はドキュメントの準備ができていますが、オーディオやその他のアセット（画像など）が読み込まれている場合は必ずしもそうとは限りません。

新しいWebAudioAPIでAudioBufferインターフェイスを使用することも検討できます。これは、「このインターフェイスは、メモリに常駐するオーディオアセット（ワンショットサウンドやその他の短いオーディオクリップ用）を表します」と説明されています。これはあなたが必要としているもののように聞こえます。あなたが抱えている問題の一部（オーディオ要素のランダムな一時停止/遅延/サウンドグリッチ）が、それが開発されている理由の1つであると私は信じています。

詳細はこちら：

https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioBuffer

残念ながら、これはChromeとFirefoxのサポートでサポートされている最新のSafariのみであり、おそらく今後6か月以内にサポートされ、IEのサポートについてはまだ発表されていません。

于 2013-01-09T23:02:56.100 に答える