6

私はこの関数を使用しています：

function playSound(file) {

MyAudio = new Audio(file);
MyAudio.play();

}

残念ながら、すべてのブラウザで機能するファイルタイプを見つけるのに苦労しています。Mp3はChrome、Safari、IEで動作しますが、FFとOperaでは動作しませんが、.oggファイルはFFでのみ動作するようです。

これを回避する方法について何か提案はありますか？使用されているブラウザをプログラムで検出し、適切なファイルタイプを再生する方法はないと思いますか？任意のアドバイス/アイデアをいただければ幸いです。ありがとう。

4

3 に答える 3

6

イライラすることに、普遍的にプレイできるタイプはありません。最も近いのは WAV ですが、サイズが大きく、IE9 ではサポートされていません。複数のタイプを利用可能にして、ブラウザが再生できるタイプを選択する必要があります。

これを行うには、ブラウザー検出ではなく、機能検出を使用します。各ブラウザがサポートするメディア タイプは時間の経過とともに変化するため、Firefox が MP3 を再生できないと想定するコードは、Mozilla がそれを採用する (特許が期限切れになった後) 数年後におそらく時代遅れになるでしょう。特定の形式がサポートされているかどうかを示すcanPlayTypeを使用します。

var audio = new Audio();
if(audio.canPlayType("audio/mpeg") == "probably") {
    playSound("myMedia.mp3");
} else if(audio.canPlayType("audio/webm") == "probably") {
    playSound("myMedia.webm");
}
// do checks for other types...

また、オーディオ タグを HTML として記述している場合は、複数の<source>タグを使用できます。ブラウザは最初に再生できるタグを再生します。

<audio controls="controls">
    <source src="mymedia.ogg" type="audio/ogg" />
    <source src="mymedia.mp3" type="audio/mpeg" />
    Update your browser! This sentence is fallback content for browsers that do not support the audio element at all.
</audio>

Ogg オーディオ サポートをテストする場合は、特に Ogg Vorbis をテストすることをお勧めします。Ogg は、仮想的には Vorbis と Theora 以外のコーデックを使用できる「コンテナー」形式です(たとえば、Opus 形式)。次のように Ogg Vorbis をテストできます。

audio.canPlayType('audio/ogg; codecs="vorbis"') == "probably";

canPlayType3 つの可能な戻り値があることに注意してください。

  • "probably" - ほぼ確実に再生できるメディア タイプ
  • "maybe" - メディア タイプは再生可能である可能性があります。これは、ブラウザでの一般的な Ogg サポートについて尋ねると返されるもので、Ogg は特定のコーデック (つまり、Vorbis と Theora) をサポートしています。Ogg ファイルはブラウザでサポートされていないコーデックを使用している可能性があるため、コーデックを指定しない場合、ブラウザはそれを再生できる可能性があるとしか推測できません。
  • "" (空の文字列) - メディア タイプは確かに再生可能ではありません

ogg のサポートを本当にテストしたい場合は、"probably"をテストする代わりに、空でない文字列をテストできます (つまり、"probably" または "maybe" のいずれかをテストします)。

// test for *any* Ogg codecs
if(audio.canPlayType("audio/ogg") != "") {  
    playSound("myMedia.ogg");
}

'audio/ogg; codecs="vorbis"'Vorbisなど、メディア ファイルが使用する特定のコーデックをテストする必要があります。一般的な Ogg サポートのテストは役に立たない可能性があります。

于 2012-10-30T22:10:00.427 に答える
1

Chrome、Firefox、Opera には webm を、Firefox、IE、Safari、Opera には wav を使用します。

HTML:

<audio id="audio"></audio>

JS:

var src = "myvideoname";
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (is_chrome) {
   $("#audio").attr('src', 'audio/' + src + '.webm')
}
else {
   $("#audio").attr('src', 'audio/' + src + '.wav')
}

説明するには:
Javascript はユーザーのブラウザーを見つけ、それが Chrome の場合はサービスを提供webmし、そうでない場合はそれを使用しますwav

注: このコードを使用すると、フォルダー内で同じ名前の両方webmとwavオーディオのみが必要になりaudioます。

注 2:コードには jQuery が必要です。

于 2012-10-30T21:50:37.507 に答える
0

ここを参照してください: jQuery Buzz 拡張機能。使用したことはありませんが、正常に動作するはずだと聞きました。お使いのブラウザーが何らかのフォーマットをサポートしているかどうかを確認することができます。これは非常に優れた機能です。

于 2012-10-30T21:45:48.587 に答える