2012-10-30 8 views
6

私は、この機能を使用しています:残念ながら、私はすべてのブラウザで動作するファイルタイプを見つけるのに苦労していクロスブラウザ対応オーディオにはどのようなオプションがありますか?

function playSound(file) { 

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

} 

。 Mp3はChrome、Safari、IEでは動作しますが、FFやOperaでは動作しませんが、.oggファイルはFFでしか動作しません。

これについてのご提案はありますか?どのブラウザが使用されているかをプログラムで検出して適切なファイルタイプを再生する方法がないと思いますか?アドバイス/アイデアを高く評価します。ありがとう。

+0

wav。それはほとんどが未処理のPCMと非常に単純なヘッダーなので、私は間違っているかもしれませんが、デフォルトでは再生できないプラットフォームは見ていません。 –

+0

Firefox、IE、Safari、Operaの場合は、Chrome、Firefox、Opera + wavにwebmを使用します。 –

+0

ブラウザの検出ではなく、機能の検出を使用してください!各ブラウザがサポートするタイプは時間とともに変化します。 'canPlayType'を使用してください:https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement#Methods – apsillers

答えて

6

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

これを行うには、の機能の検出を使用し、ブラウザの検出は使用しないでください。各ブラウザがサポートするメディアの種類は時間とともに変化するので、FirefoxがMP3を再生できないことを前提としたコードは、Mozillaが(特許の有効期限が切れた後に)それを採用する数年後には古くなるだろう。あなたはHTMLなどのオーディオタグを作成している場合は、あなたが複数の<source>タグを使用することができ、

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... 

また、ブラウザはそれができる最初のものを再生します:与えられたフォーマットがサポートされている場合を示しており、canPlayTypeを使用

<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のほかにhypothetically use other codecs(たとえば、Opus format)のコンテナ形式です。あなたはそのようにはOgg Vorbisのためにテストすることができます。canPlayTypeは3つの可能な戻り値を持っている

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

注こと:

  • "たぶん"は - メディアタイプはほぼ確実」
  • を再生することができます多分 " - メディアのタイプ かもしれない再生することができます。これは、特定のコーデック(VorbisやTheoraなど)のためのOggサポートを備えたブラウザで、一般的なOggサポートについて問い合わせるときに返されるものです。 Oggファイル は、ブラウザでサポートされていないコーデックを使用するため、コーデックを指定しないと、ブラウザは が再生できるとしか推測できません。
  • 「」(空の文字列) - あなたが本当にoggのサポートのためにテストしたい場合は、メディアタイプが確かに

再生可能でない場合、代わりにのためのテスト「おそらく」、あなたは

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

あなたがで、例えば、あなたのメディアファイルを使用して、特定のどんなコーデックをテストする必要がありますので、同様に、非空の文字列(どちらかの「おそらく」または「多分」についてすなわち、テスト)をテストすることができVorbisの場合はです。一般的なOggサポートのテストは有用ではありません。

+0

あなたの答えをありがとう。 Operaで動作するファイルを探すだけです。私はmp3、ogg、wavを試しましたが、何も動作しません。私はwebmにどのように変換できるのか知っていますか?私はいくつかの無料のプログラムを試しましたが、それらはすべてビデオのためだけに働くように見えるだけで、webmはしません。 –

+1

[この記事](http://html5doctor.com/html5-audio-the-state-of-play)によると、OperaはOgg VorbisとWAVのみをサポートしています。あなたはおそらく不完全な方法でOggサポートをテストしているでしょう。 「Ogg」は、符号化されたメディア情報を保持する「コンテナ形式」です。 「Ogg Vorbis」はコーデックタイプです。それは私が指定しなかったかなり主要なトリッピングポイントです - 私は答えを編集して、Ogg特有の情報を含むようにします。 – apsillers

0

ここでは、jQuery Buzz extensionをご覧ください。決して使用しませんでしたが、正常に動作するはずです。お使いのブラウザが何らかのフォーマットをサポートしているかどうかを確認することができます。本当にすっきりした機能です。

1

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

HTML:

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のユーザーのブラウザを見つけると、それはクロームであれば、それはwav

を使用するよりも、そうでない場合には、 webmを提供しており、

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

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

関連する問題