読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

amp-audio | AMPで音声ファイルを扱う

amp-audio | AMPで音声ファイルを扱う f:id:mochizuki_p:20170107174707p:plain

AMPでは直接audioタグを使用することはできません。

代わりにamp-audioタグを利用します。

amp-audioタグ

HTML版のaudioとほぼ同じだが、事前に表示サイズを指定しておく必要がある。

<amp-audio  src="https://hoge.com/sample.mp3" width="320" height="320"></amp-audio>

注意すべき点は

専用のJavaScriptを追加する必要がある。 幅と高さの単位はピクセル(px) *幅・高さの両方を指定する必要があるという点です。

HTMLでのaudioタグは以下のように動画のURLを指定するだけでOKでしたよね。

<audio src="https://hoge.com/sample.mp3"></audio>

amp-audioは非同期で音声ファイルを取得する。

amp-audioは、他のAMPでのメディアファイルと同様に非同期で、ちょうどユーザーがスクロールを進めてDOM要素がビューに入る直前に、音声データをロードします。

これは、音声のロードと表示にともなうレイアウトの変更によるレンダリング時間の削減を目指したものです。

この追加の計算コストを削減するのがamp-audioの目的なんですね。

専用のJavaScript

以下をhead内に追記

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

各要素の説明

要素名 説明
src 音声の読み込み元URL https://hoge.com/fuga.mp3
width 音声の埋め込み枠の幅 486
height 音声の埋め込み枠の高さ 657
muted この要素があるとデフォルトでの音量が0になる
autoplay この要素があるとロード完了時に自動再生
loop この要素があると自動ループ