web-dev-qa-db-ja.com

ギャップレスループオーディオhtml5

誰もがオーディオタグのギャップレスループを達成する方法を知っていますか？ javascriptベースの何かを考えています。

1小節というループがあり、ループしてテンポを維持したい。だから私はループがスムーズ/ギャップレスであることを必要とします。 「ループ」を単にtrueに設定すると、遅れてテンポに留まりません。

javascripthtmlaudio
30
ndmweb

残念ながら、これはHTML5要素の弱点の1つです。オーディオが必要なときに遅延なく再生される保証はありません。

検討する価値のある2つのオプションがあります。SoundManager2（http://www.schillmania.com/projects/soundmanager2/）は、ここではおそらく役立つ素晴らしいライブラリですが、この場合はFlashを使用してオーディオを再生します。

もう1つのオプションは、Chrome=のWeb Audio APIまたはFirefoxのAudio Data APIを見る方法です。どちらも本当に新しく、まだプライムタイムの準備が整っていませんが、何かを行うことができます。スケジュールされたオーディオの再生、ループ、その他多くのことをチェックしてください http://www.htmlfivewow.com/slide58 をチェックして、詳細を確認してください！

5
PeteLe

まだ完璧ではありませんが、これは私にとってはうまくいきました：

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
                var buffer = .44
                if(this.currentTime > this.duration - buffer){
                    this.currentTime = 0
                    this.play()
                }}, false);

バッファーのサイズを試して、最適なものを見つけてください

29
shooting_sparks

解決策は、再生を制御する2つのインスタンスを持つことです。

このようなもの ：

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

また、SoundManager2を使用している場合は、URLリクエストの代わりにデータURIを介してオーディオをソースします。

不思議なことに、SoundManager2は再生するたびにサーバーにファイルを要求することがわかりました。キャッシュから読み込んでも、オーディオファイルの変更されていないヘッダーが受信されるまで遅延があります。

8
Dumi Jay

私は間隔をあけてこれをやろうとしています、これを試してください https://github.com/Hivenfour/SeamlessLoop

chrome、Firefox、Operaでテストされたwavファイルで私のために働いた

4
Hivenfour

ええ、これは本当の痛みです...明らかに、その要素を特定した人は、ミュージシャンでもゲーム開発者でもなかったようです-へえ。

とにかく、あなたが何をしているのかに応じて、別の考えられる回避策は、ループが数回繰り返されるMP3/OGG/wavを作成することです。これは、サウンドの再生を停止する前に、サウンドを数回だけループさせたい場合に便利です。

この例としては、ロケット船を突き刺すプレーヤーが挙げられます。私は現在このシナリオでゲームを開発しており、スラストサウンドエフェクトのループ数が合計で約6秒のMP3を作成しています。ダウンロードのサイズを最小限に抑えるために、32kbpsでオーディオをエンコードしました。これより低くすると、スラストサウンドは主にホワイトノイズであるため、容認できないほどスプラッシュに聞こえ始めます。

ご想像のとおり、プレーヤーが6秒間連続して突き刺さる可能性は非常に低いという事実を私はただ説明しています。彼らがそうするならば、彼らはギャップを聞くでしょう、しかし私はそれとともに生きることができます。ほとんどの場合、彼らはそのような長い間突っ込んでいないので、グリッチは聞こえません。

私が検討した別のオプションは、フェードインとフェードアウトし、両方ともオフセットでループするサンプルのペアです。

これらは一部のゲームシナリオでは機能しますが、どのような種類の音楽シナリオでも機能しません。 YMMV。

3
Bart Read

私は成功せずに上記の方法を試しましたが、私の使用例（Firefox 43.0を使用）では、すべてがクリックされるようです。これは、便利なブレークや低ポイントのない連続トーンをループする必要があるためです（22010サンプル/秒のモノ.wavファイルを使用して、リービングカーエンジンを作成しようとしています）。

しかし、.wavファイルを複数回連結して、クリックのない単一の長い.wavファイルを生成することができます（最後にまだ発生しない、まれなファイルを除く）。これは、元の.wavファイルが周期的になるように注意深く作られています。

私は今、これらの長いファイルのいくつかを同時に連続して再生し（各車のrpmレベルに対して1つ）、gainNodeを使用してこれらの信号を混合することを計画しています（ここで説明します： http://www.html5rocks.com/ en/tutorials/webaudio/intro / ）。これにより、個々の.wavファイルの再生を単純に開始および停止するよりもはるかに優れたクリックフリーの車のエンジンが得られます。

3
andrew pate

私はこのソリューションを数時間探していました。これが最初にアクセスしたページなので、ギャップなしでオーディオトラックのループを完全に再生するように見えるJSライブラリへのリンクを共有したいと思います。 ギャップレス-5

2
ubugnu

終了したイベントはオーディオ項目ごとに1回しかトリガーされないため、これはHTML5オーディオを使用してまだ可能ではありません。

1
shoaib

私のアプローチは難しいものですが、アンビエントバックグラウンドミュージックで機能するものです

私たちのトラックが5.3秒あるとしましょう

同じファイルの2つのオーディオトラックがあります。終了する直前（たとえば、終了する1秒前-4.3秒-5.3秒）にフェードアウトします（この1秒内の位置のパーセントで音量を設定します）。同時に、2番目のトラックがフェードインし始めます（0s-1s）。オーディオライブラリに応じて、50ms間隔などで実行できます

再生が終了した後、このフェードイン/フェードアウトを制御するブール変数を切り替え、フェードインするトラックと次の実行でフェードアウトするトラックを逆にします

1
user151496