web-dev-qa-db-ja.com

Javascriptからサウンドを再生するクロスプラットフォーム、クロスブラウザの方法は？

システムのインタラクティブなシミュレーションを作成するdhtmlアプリケーションを書いています。シミュレーションのデータは別のツールから生成され、既に非常に大量のレガシーデータがあります。

シミュレーションの一部の手順では、音声の「ボイスオーバー」クリップを再生する必要があります。これを複数のブラウザーで簡単に実現する方法を見つけることができませんでした。

Soundmanager2 は必要なものにかなり近づいていますが、mp3ファイルのみを再生します。レガシーデータには.wavファイルも含まれている場合があります。

他に役立つライブラリはありますか？

javascriptaudiocross-browsercross-platformdhtml
79
Jake Stevenson

.wavファイルを処理するには、Real AudioやQuickTimeなどのプラグインを含める必要がありますが、これは機能するはずです...

//======================================================================
var soundEmbed = null;
//======================================================================
function soundPlay(which)
    {
    if (!soundEmbed)
        {
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        }
    else
        {
        document.body.removeChild(soundEmbed);
        soundEmbed.removed = true;
        soundEmbed = null;
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        }
    soundEmbed.removed = false;
    document.body.appendChild(soundEmbed);
    }
//======================================================================
62
dacracot

Prototypeを使用している場合、Scriptaculousライブラリ サウンドAPIがあります 。 jQuery プラグインがあるようです 。

10
ceejayoz

dacracotsのコードはクリーンで基本的なdomですが、おそらく何も考えずに書かれていますか？もちろん、以前の埋め込みの存在を最初に確認し、重複する埋め込み作成行を保存します。

var soundEmbed = null;
//=====================================================================

function soundPlay(which)
{
    if (soundEmbed)
       document.body.removeChild(soundEmbed);
    soundEmbed = document.createElement("embed");
    soundEmbed.setAttribute("src", "/snd/"+which+".wav");
    soundEmbed.setAttribute("hidden", true);
    soundEmbed.setAttribute("autostart", true);
    document.body.appendChild(soundEmbed);
}

似たような状況の解決策を探している間に、ここで考えたことに出会いました。残念ながら、私のブラウザーMozilla/5.0（X11; U; Linux i686; en-US; rv：1.9.0.15）Gecko/2009102814 Ubuntu/8.04（hardy）Firefox/3.0.15はこれを試すと死にます。

最新のアップデートをインストールした後、firefoxは引き続きクラッシュし、operaは存続します。

9
joshoreefe

最も簡単で便利な方法は、小さなFlashクリップを使用してサウンドを再生することです。 JavaScriptソリューションではありませんが、ISが目標を達成する最も簡単な方法です

前の 類似の質問 からの追加リンク：

8
Ilya Kochetov

Dacracotの答えが気に入った... jQueryでの同様のソリューションを以下に示します。

function Play(sound) {
    $("#sound_").remove()
    $('body').append('<embed id="sound_" autostart="true" hidden="true" src="/static/sound/' + sound + '.wav" />');
}
6
Howard

HTML5 <audio>タグを使用できます。

5
Alon Gubkin

Mootoolsを使用している場合、 MooSoundプラグイン があります。

4
cheeaun
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

詳細については、 http://www.w3schools.com/html/html5_audio.asp を参照してください。

3
Andrew Mackenzie

これには、プラグインに頼るよりもはるかに簡単な解決策があります。 IEには独自のbgsoundプロパティがあり、他のすべてのブラウザで動作させる別の方法があります。こちらのチュートリアルをご覧ください= http：//www.andy-howard。 com/how-to-play-sounds-cross-browser-include-ie/index.html

1
Andrew Junior Howard