MediaSource APIを使用して切り捨てられたオーディオをストリーミングする方法
とともに MediaSource API, あなたはできる メディアストリームの生成と設定 ブラウザで直接。それはあなたがすることができます メディアデータに対してさまざまな操作を実行する のようなメディア関連のHTMLタグによって保持されます。 または
. 例えば、 異なるストリームを混在させる, 重なっているメディアを作成する, 遅延ロードメディア, そして メディアメトリクスを編集する 音量や周波数の変更など.
この記事では、具体的な方法を説明します。 オーディオサンプルをストリーミングする (切り捨てられたMP3ファイル) MediaSource API ブラウザの右側に プレショー音楽 あなたの聴衆に。どのようにカバーします APIのサポートを検出, の仕方 HTMLメディア要素を接続する APIの使い方 メディアを取得する Ajax経由で、そして最後に それをストリーミング.
私たちが何をしているのかを事前に確認したい場合は、 Githubのソースコード, またはチェックアウト デモページ.
![](http://savtec.org/img/images_1/how-to-stream-truncated-audio-using-mediasource-api.jpg)
ステップ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.リンク
MediaSource APIへのタグ
新しいを作成します メディアソース
オブジェクト のソースとしてそれを割り当てます タグ を使用して
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は まだ実験段階にある, より高い編集機能へのアクセスは制限されるかもしれませんが 基本ストリーミング 機能はあなたができるものです すぐに利用する.