HTML5オーディオ-ステータス。 パート1

（2012年5月にフロントエンドのスペシャリスト、特にメディアフォーマット、いくつかのオープンソースプロジェクトとhappyworm.comの開発者が作成し、ブラウザによる新しいメディアタグとフォーマットのサポートにより現状を反映しています。-注。翻訳済み）



これは、2009年の著者（著者、Mark Boas）の記事「 ブラウザのネイティブオーディオ 」 （英語、および2010年10月に補足-約Transl。）の続きで、HTML5のオーディオの基本について説明しています。 <audio>タグとそれに関連付けられたAPIの動作を知りたい場合は、最初に読む必要があります。 （ ロシア語の翻訳がありますが、 2009年以降のバージョンです。）



さて、2.5年後、物事がどのように進んでいるかを見る時が来ました。 多くの高度なオーディオAPIが積極的に開発されていますが、私たちにインスピレーションを与えるネイティブブラウザベースのサウンドサポートは改善されています。<audio>タグの魅力的な世界に戻る時が来ました。



状況を理解するための良い方法は、いくつかの使用例を見ることです。これについては後で説明します。



どうやって始めますか？ 準備のためにマスターする必要がある概念がいくつかあります。 最初にMIMEタイプを理解しましょう。

■MIMEタイプ

●サーバー部分

インターネットメディアタイプとも呼ばれます-これは、システムにメディアの操作方法を知らせる1つの方法です。



まず、MIMEタイプを適切にサポートするようにサーバーを構成する必要があります。 Apacheの場合、これは.htaccessに行があることを意味します。

# AddType TYPE/SUBTYPE EXTENSION AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType audio/webm webma AddType audio/wav wav
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ヒント ： サーバー上のメディアファイルをgzip圧縮しないでください。 ほとんどの形式は既に圧縮されており、残りの部分はある程度サポートされています。 さらに、フラッシュを使用したバックアップソリューションでは、メディアデータの圧縮をサポートしていません。

●クライアント部分

データソースをコードまたはマークアップで記述する場合、MIMEタイプを指定して、ブラウザーがデータを正しく判別できるようにすることができます。



HTML5オーディオを記述する最も信頼できる方法は、次のようなものです。

 <audio> <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'> <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'> <!--  -     --> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、使用されるタグとデータソースが定義されます。 ブラウザは1つだけを選択します-2つ以上は失われません。 同じコードにバックアップ処理オプションが配置されます。



データ属性とともに、 type属性はsrc属性で指定されます。 これはオプションですが、ブラウザがダウンロードする前に配信されるファイルのMIMEタイプとコーデックを見つけるのに役立ちます。 そうでない場合、ブラウザは可能な方法でファイルからタイプを見つけようとします。

注 ： 属性でコーデックの名前をスキップできますが、信頼性と効率のために、可能な限り最大の情報を提供してブラウザーを支援することをお勧めします。

素晴らしい。 これで、ファイルアドレスの決定方法がわかり、ブラウザはサポートする最初の形式を落ち着いて選択します。 ファイルを動的に送信できますか？

●音声の種類を事前に把握しておくと、 .canPlayTypeに役立ちます （おそらく）

幸いなことに、APIは特定のファイル形式がブラウザでサポートされているかどうかを示します。 しかし、最初に、<audio>タグを制御する方法の簡単な説明。

AudioオブジェクトがHTMLで記述されている場合、オブジェクトへのアクセスはDOMを介して取得できます。

 var audio = document.getElementsByTagName('audio')[index];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、idが定義されている場合、

 var audio = document.getElementById('my-audio-id');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、オブジェクトは完全にJavascriptで作成されます。

 var audio = new Audio();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Audioオブジェクトがある場合、つまり、そのメソッドとプロパティへのアクセス。 形式のサポートを確認するには、canPlayTypeメソッドをパラメーター（MIMEタイプのテキスト値）と共に使用します。

 audio.canPlayType('audio/ogg');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コーデックを明示的に指定することもできます：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

canPlayTypeは、次の3つの値のいずれかを返します。

1） おそらく

2） 多分 、または

3） ""（空の文字列）。

これらの奇妙なタイプを取得するポイントは、タイプごとに判断する限り、コーデックが存在する状況の一般的な奇妙さから来ています。 実際に再生しようとしないと、ブラウザはコーデックの適用可能性のみを推測できます。



サポートを確認するために、合計で次のことを行います。

 var audio = new Audio(); var canPlayOgg = !!audio.canPlayType && audio.canPlayType('audio/ogg; codecs="vorbis"') != "";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、canPlayTypeがサポートされていることを確認し（「!!」は文字列オブジェクトをブール型に変換するだけです）、フォーマットのcanPlayTypeが空の文字列ではないことを確認します。 （最初の部分とは何となく非論理的です。おそらく、著者は未定義を返すことができることを言及するのを忘れていましたか？-およそTransl。）

■ブラウザでのさまざまなコーデックのサポート

最新のブラウザでコーデックがどのようにサポートされているかを見てみましょう。

デスクトップブラウザコーデック：

デスクトップ版	数	コーデックのサポート
インターネットエクスプローラー	9.0+	MP3、AAC
クロム	6.0+	Ogg Vorbis、MP3、WAV（Chrome 9以降）
Firefox	3.6+	Ogg Vorbis、WAV
サファリ	5.0+	MP3、AAC、WAV
オペラ	10.0+	Ogg Vorbis、WAV

モバイルコーデック：

モバイルブラウザ	バージョン	コーデックのサポート
Opera Mobile	11.0+	デバイス依存
Android	2.3+	デバイス依存
モバイルサファリ	（iPhone、iPad、iPod Touch）iOS 3.0以降	MP3、AAC
ブラックベリー	6.0+	MP3、AAC

良いニュースは、執筆時点で、ブラウザの約80％がHTML5オーディオをサポートしていることです。



悪いニュースは、コーデックのユニバーサルサポートについてはまだ合意がないため、ブラウザーでHTML5オーディオを完全にサポートするには、サーバーがMP3とOgg Vorbisの両方をサポートする必要があることです。

面白い ： Android 2.2は<video>をサポートしていますが、<audio>はサポートしていません。 オーディオを再生するには、<video>タグを使用する必要があります。

●コンテナ、形式、およびファイル拡張子（およびこれらのMIMEタイプ）

上記でよく知られているオーディオ形式について述べましたが、技術的にはコンテナ形式で作業する必要があります。 （コンテナには複数の形式が含まれる場合があります。たとえば、MP4にはAACおよびAAC +が含まれる場合があります。）

コンテナ	フォーマット（s）	ファイル拡張子	MIMEタイプ	コーデック文字列
MP3	MP3	.mp3	オーディオ/ MPEG	mp3
Mp4	AAC、AAC +	.mp4、.m4a、.aac	オーディオ/ mp4	mp4a.40.5
OGA / OGG	GG vorbis	.oga、.ogg	オーディオ/ ogg	ヴォルビス
Wav	PCM	.wav	オーディオ/ wav	1

●<audio>があり、使用することを恐れていません！

さて、私たちはどういうわけかオーディオタグを立ち上げました-そしてそれは動作します。 他に何をしたいですか？ 各ブラウザでは、デフォルトの設定により、要素の動作が少し異なります。 私はそれらを一見に少し合わせたいです。 これには<audio>要素のいくつかのプロパティがあります。



最もよく使用される属性の一部：

物件	説明	戻り値
currentTime	プレーヤーのカーソル位置	ダブル（秒）
期間	プレイ時間	double（秒）; 読み取り専用
ミュート	音がこもっています	ブール値
一時停止	再生が停止しています	ブール値
ボリューム	音量レベル	double（0から1）

それらの使用は非常に簡単です。 例：

 var audio = new Audio(); var duration = audio.duration;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

期間変数は、オーディオクリップの期間 （秒単位）に設定されます。

■バッファリング、検索、および時間範囲

この状況は改善されており、ブラウザ開発者は仕様の大部分を実行し始めています。



APIは、メディアファイルのどの部分が遅延なしに再生のためにバッファリングまたはプリロードされているかを知りたいときに、 バッファリングされたシーク可能な属性を提供します。 これらは両方とも、 TimeRangesオブジェクトを返します。これは、間隔のリスト（開始番号と終了番号）です。

● バッファリングされた属性

ファイルの完全にロードされたセクションの間隔を返します。 小さな例：

 //   TimeRanges   var buffered = audio.buffered; //        TimeRange var bufferedEnd = audio.buffered.end();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

● TimeRangesオブジェクト

TimeRangesオブジェクトには、バッファリングされたメディア上のパーツに関するデータが、1つまたは複数の-時間範囲の形式で含まれています。 TimeRangesオブジェクトは、次のプロパティで構成されます。



これには、メディアファイルのバッファリングされたセクションの一部（1つ以上-バッファリングされた数）のデータが含まれ、プロパティがあります。



長さ -間隔の数

start（インデックス） -指定された間隔の開始時間、

end（index） -指定された間隔の終了時間

（再生の開始からカウント）。

おかしい ： JSの従来の関数はミリ秒を使用しますが、デフォルトでは、JS Audio APIの時間ディメンションは秒です。

 ------------------------------------------------------ // |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、この例では：

  audio.buffered.length //returns 2 audio.buffered.start(0) //returns 0 audio.buffered.end(0) //returns 5 audio.buffered.start(1) //returns 15 audio.buffered.end(1) //returns 19 audio.buffered.end() //returns 19
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

どのような場合に、複数のバッファリングされた間隔がありますか？ ユーザーは、プレーヤーユニットのスケールのバッファリングされていないセクションをクリックします。 オブジェクトはクリックポイントから新しいバッファリングを開始し、2つのバッファリング間隔が発生します。

ヒント ： ほとんどのオーディオプレーヤーでは、一連のサーバー要求を完了することにより、ブート時に新しいファイル位置に移動できます。 Apacheでは、デフォルトで複数のファイルアクセスが許可されていますが、設定が不明なサーバーではこれを確認する必要があります。

ユーザーがアクティブに再生ヘッドを切り替える場合、バッファリングはほとんど意味がないことに注意してください。 一部のブラウザは、ファイルの終わりを読み取って記録時間を設定し、ほぼ2つのバッファ間隔をほぼ即座に作成する場合があります。 したがって、プレーヤーのプログレスバーは、1間隔のプログレスバーの通常のコントロールよりも多少複雑です。



この便利なHTML5 Media Event Inspectorを使用して、ブラウザのTimeRangesを確認できます。

● シークおよびシーク可能な属性

メディアファイルのコンテキストでの検索は、メディアファイルの前方または後方を探しています。 これは通常、完全なファイルバッファリングがまだ完了していない場合に発生します。 シーク属性は、「 シーク 」イベントが発生したことを示すために使用されます。 trueは、ファイルの一部がまだアップロードされていないことを意味します。



続行するには...



元のWebサイトhtml5doctor.comに注意してください。



この記事はMark Boasによって書かれました。 マークは、新しいオープンなウェブテクノロジーを開発、指導、説明、および推進しています。 特にjPlayer Media Frameworkを開発する小さなWebスタジオであるHappywormの共同設立者は、HTML5とJavaScriptを使用してブラウザー機能を拡張します。 中心的なジェネラリストとして、Markはほとんどの時間をWebメディアとリアルタイムプロトコルに費やしています。 オーディオに関連するあらゆるものを愛する彼は、Hyperaudioプロジェクトでの実験で 「何か新しいことをする」という仕事に情熱的に取り組んでいます。 マークのツイッターをフォローできます。



次の部分の内容：



● プリロードに関する注意

● 成功しました

■メディアイベント

■ストリーミング

■仕様の進化（または「うわー、これは動いています！」）

● ロード方法

● ブラウザはいつ公式ドキュメントに戻りますか？

● 自動再生と音量

● 複数のオーディオタグの同時再生

● OS依存

■新機能

● ステップ変更

● メディアフラグメント

■高度なオーディオAPI：ブラウザの将来のサウンド

■おわりに

■文学



HTML5オーディオタグのローカル記事と翻訳：

* HTML5でのオーディオの視覚化 、2011年8月7日

* HTML5 Audioを使用してカセットレコーダーを作成する 、2012年7月13日

* Audio Data APIによるサウンド処理 、2010年8月30日

* HTML5オーディオおよびゲーム開発：ブラウザーのバグ、問題と解決策、アイデア 、2010年8月6日

* HTML5オーディオタグのマスタリング 、2012年7月21日

* HTML5 <Audio>の問題 、2011年5月16日

* HTML5オーディオとビデオを使用した最後のmod。 2012年6月13日

この記事の翻訳の有用性を指摘してくれたShpuntiKに感謝します。



UPD： 第2部の翻訳 。