web-dev-qa-db-ja.com

html5オーディオライブストリーミング

ブラウザーを制御せずに、独自のオーディオを作成しています。

<audio src="http://50.7.98.194:8081/~dl3/cgi-bin/dl.cgi/bqmu5mltxcqy43mxecgo4gnw743qr7fd7io22q5xj4/gl1mwvp6b326.mp3" id="audio">
</audio>

これらの機能は、いくつかのボタンをクリックしたときに呼び出されます。

function play()
{
   audio.play();
}

function play()
{
   audio.pause
}

function stop()
{
   audio.pause();
   audio.src = audio.src;
}

しかし、現時点では、mp3またはoggファイルのみを再生できます。ライブストリームラジオではありません。いくつかのプラグインについて読みましたが、純粋なhtml5でそれを行う必要があります。

私を手伝ってくれますか？どうもありがとう、

html5audiolive-streaming
15
Daniel Garcia Sanchez

残念ながら、すべてのブラウザでサポートされている単一のビデオおよびオーディオコーデックはまだありません！プログラマーは、ブラウザーAがコーデックBをサポートしていないユースケースと、その逆のフォールバックが提供されていることを確認する必要があります。

この互換性テーブルは、デスクトップブラウザーとモバイルブラウザーの両方でご覧いただけます。

デスクトップ：

  • Internet Explorer（9.0+）はMP3およびAACコーデックをサポートします
  • Chrome（6.0+）はOgg Vorbis、MP3、WAV +をサポートします
  • Firefox（3.6+）はOgg Vorbis、WAVをサポートします
  • Safari（5.0以降）はMP3、AAC、WAVをサポートします
  • Opera（10.0+）はOgg Vorbis、WAVをサポートします

モバイル：

  • Opera Mobile（11.0+）でサポートされるコーデックはデバイスに依存します
  • Android（2.3+）でサポートされるコーデックはデバイスに依存します
  • モバイルSafari（iOS 3.0以降のiDevice）はMP3、AACをサポートします
  • Blackberry（6.0+）サポートMP3、AAC

フラッシュはまだ十分に普及しているため、おそらく最も安全な代替手段です。

また、私はいくつかのライブラリを使用するのに悪いことは何もないことに注意したい、それらのいくつか（例えば jPlayer ）は非常に強力なインターフェースを提供し、これはあなたがより良いコードを生成するのに役立つだけです！

知りたいことはすべて次の記事で見つけることができると思います： HTML5 Audio Radio Player by Opera Devs

12
kav

「ライブソース」からのオーディオの再生は、最新のブラウザでサポートされているようです。基本的には、通常のHTML 5オーディオタグを使用し、「ライブストリーム」URLをソースとして入力します。例：

<audio controls>
  <source src="http://audio-mp3.ibiblio.org:8000/wcpe.mp3" type="audio/mpeg">
  <source src="http://audio-ogg.ibiblio.org:8000/wcpe.ogg" type="audio/ogg">
</audio>

そして、デフォルトのコントロールでシークしようとしても何も起こりませんが、ストリームは「そのままで」機能します。したがって、最終的には、コントロールを通常のHTML 5メディアスタイルの「カスタム」コントロールに置き換えることができます。非HTML 5ブラウザーとの下位互換性のために、このプロジェクトが役立つ場合があります。 https://github.com/etianen/html5media/wiki/Embedding-audio （ライブストリーミングでテストしていないが/ should work）。 Mp3コーデックは、主要なブラウザでサポートされているようです（Linux上のfirefoxを除く[？]）。 Opusは、クロスプラットフォームのもう1つの優れたオプションである可能性があります。コーデックが賢明なのかどうかはわかりません。

いくつかのストリーム（シャットキャストの推測）では、閉じる「;」を追加する必要がありました。 URLについては、 https://stackoverflow.com/a/3182814/3245 を参照してください。ただし、基本的には「正しい」URLを取得するためのものです。

15
rogerdpack