amp-audio
audioタグの代替タグです。
プラグインの読み込み
amp-audioを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3"> <div fallback> <p>Your browser doesn’t support HTML5 audio</p> </div> <source type="audio/mpeg" src="foo.mp3"> <source type="audio/ogg" src="foo.ogg"> </amp-audio>
各種プロパティについて
src |
参照するメディアのパスを記述します。 この時HTTPSでの指定が必須となります。 |
---|---|
autoplay | 読み込み後自動再生されます。 |
loop | ループ再生に対応させます。 |
muted | ミュートになります。 |
その他
- AMPファイル内のすべての埋め込み外部リソースと同様に、オーディオは「遅延して」ロードされます。
amp-audioエレメントがビューポート内またはその近くにある場合のみです - 子要素にsourceタグを設置して複数の拡張子ファイルを置くことができます。
- 子要素にfallbackプロパティのついた要素を配置することで、未対応ブラウザの場合でも対応できます。