MediaSource APIを使用して切り捨てられたオーディオをストリーミングする方法
とともに MediaSource API, あなたはできる メディアストリームの生成と設定 ブラウザで直接。それはあなたがすることができます メディアデータに対してさまざまな操作を実行する のようなメディア関連のHTMLタグによって保持されます。 または . 例えば、 異なるストリームを混在させる, 重なっているメディアを作成する, 遅延ロードメディア, そして メディアメトリクスを編集する 音量や周波数の変更など.
この記事では、具体的な方法を説明します。 オーディオサンプルをストリーミングする （切り捨てられたMP3ファイル） MediaSource API ブラウザの右側に プレショー音楽 あなたの聴衆に。どのようにカバーします APIのサポートを検出, の仕方 HTMLメディア要素を接続する APIの使い方 メディアを取得する Ajax経由で、そして最後に それをストリーミング.
私たちが何をしているのかを事前に確認したい場合は、 Githubのソースコード, またはチェックアウト デモページ.
ステップ1. HTMLを作成する
HTMLを作成するには、 でタグ付けする コントロール 属性 あなたのページへ下位互換性のために、 デフォルトのエラーメッセージを追加する ブラウザがこの機能をサポートしていないユーザのためのものです。このメッセージをオン/オフにするにはJavaScriptを使用します.
ステップ2.ブラウザのサポートを検出する
JavaScriptでは、 試して…キャッチ ブロックする エラーを投げる もし MediaSource APIはサポートされていません ユーザーのブラウザによって、または メディアソース （キー） 存在しない の中に 窓 物.
if（！ウィンドウ内の 'MediaSource'）を試してください。新しいReferenceError（ 'ウィンドウオブジェクトにMediaSourceプロパティはありません。
ステップ3. MIMEサポートを検出する
サポートチェックの後、また MIMEタイプのサポート. ストリーミングしたいメディアのMIMEタイプがブラウザでサポートされていない場合, ユーザーに警告する そして エラーを投げる.
var mime = 'audio / mpeg'; if（！MediaSource.isTypeSupported（mime））alert（ 'メディアを再生できません。MIMEタイプ' + mime + 'のメディアはサポートされていません。）; throw（ 'タイプ' + mime + 'のメディアはサポートされていません。'）;
上記のコードスニペットは の内側に配置 やってみる ブロック, の前に キャッチ block（参考のために、行番号をたどるか、Githubの最後のJSファイルをチェックしてください）.
ステップ4.リンク
新しいを作成します メディアソース オブジェクト のソースとしてそれを割り当てます タグ を使用して URL.createObjectURL（） 方法.
var audio = document.querySelector（ 'audio'）、mediaSource = new MediaSource（）; audio.src = URL.createObjectURL（mediaSource）;
ステップ5.追加 SourceBuffer オブジェクトに メディアソース
HTMLメディア要素の場合 メディアソースにアクセスする そして準備ができて つくる SourceBuffer オブジェクト, MediaSource API を発射する ソースオープン イベント .
の SourceBuffer 物 大量のメディアを保持 それは最終的にデコードされ、処理され、そして再生されます。独身者 メディアソース オブジェクト缶 複数持っている SourceBuffer オブジェクト.
の中 のイベントハンドラ ソースオープン イベント, 追加する SourceBuffer オブジェクトに メディアソース とともに addSourceBuffer（） 方法.
mediaSource.addEventListener（ 'sourceopen'、function（）var sourceBuffer = this.addSourceBuffer（mime）;）;
ステップ6.メディアを取得する
これであなたは SourceBuffer オブジェクトは、 MP3ファイルを取得する. この例では、 AJAXリクエストを使用する.
つかいます 配列バッファ として responseType, どっち バイナリデータを表します. レスポンスが正常に取得されたとき, 追加する SourceBuffer とともに appendBuffer（） 方法.
mediaSource.addEventListener（ 'sourceopen'、function（）var sourceBuffer = this.addSourceBuffer（mime）; var xhr = new XMLHttpRequest; xhr.open（ 'GET'、 'sample.mp3'）; xhr.responseType = 'arraybuffer' ; xhr.onload = function（）try switch（this.status）case 200：sourceBuffer.appendBuffer（this.response）; break; case 404：「ファイルが見つかりません」をスロー、デフォルト：「スロー」ファイル '; catch（e）console.error（e）;; xhr.send（）;）;
ステップ7.ストリームの終わりを示します
APIがにデータを追加し終えたとき SourceBuffer あ イベントと呼ばれる 更新日 解雇されます. イベントハンドラ内で、 ストリームの終わり（） の方法 メディアソース に ストリームが終了したことを示します.
mediaSource.addEventListener（ 'sourceopen'、function（）var sourceBuffer = this.addSourceBuffer（mime）; var xhr = new XMLHttpRequest; xhr.open（ 'GET'、 'sample.mp3'）; xhr.responseType = 'arraybuffer' ; xhr.onload = function（）try switch（this.status）case 200：sourceBuffer.appendBuffer（this.response）; sourceBuffer.addEventListener（ 'updateend'、function（_） mediaSource.endOfStream（）;ケース404：「ファイルが見つかりません」をスロー、デフォルト：「ファイルの取得に失敗しました」; catch（e）console.error（e）;; xhr.send（）;） ;
ステップ8.メディアファイルを切り捨てる
の SourceBuffer オブジェクトが 2つの特性 呼ばれる appendWindowStart そして appendWindowEnd を表す メディアデータの開始時間と終了時間 あなたがフィルタリングしたい。以下の強調表示されたコード 最初の4秒間をフィルタリング MP3の.
mediaSource.addEventListener（ 'sourceopen'、function（）var sourceBuffer = this.addSourceBuffer（mime）; sourceBuffer.appendWindowEnd = 4.0;…）;
デモ
そしてそれがすべてです、私たちの オーディオサンプルがストリーミングされている Webページから直接。のために ソースコード, 私たちを見てください Githubレポ そして最終結果については、 デモページ.
ブラウザサポート
この記事を書いている時点では、 メディアソース APIはすべての主要ブラウザで正式にサポートされています。しかしテストはそれを示します Firefoxの実装はバグが多い, そしてWebkitブラウザはまだ問題があります。 appendWindowStart 財産.
MediaSource APIは まだ実験段階にある, より高い編集機能へのアクセスは制限されるかもしれませんが 基本ストリーミング 機能はあなたができるものです すぐに利用する.
