audio

<audio> 要素は、音声データ（サウンドまたはオーディオストリーム）を再生するために使用します。

<audio> 要素に対応しているブラウザでは、要素の内容は表示されません。内容には、<audio> 要素に対応していない古いブラウザのためのコンテンツを入れることができます。ただし、これはアクセシビリティの問題に対処するためのものではありません。このオーディオコンテンツをアクセシブルにするためには、代わりに<video> 要素を使ったり、スクリプトやテキストの配置をするなど代替案を検討します。

カテゴリー
フロー・コンテンツ、パルパブル・コンテンツ、フレージング・コンテンツ、埋め込みコンテンツ、インタラクティブ・コンテンツ
配置場所
埋め込みコンテンツが置ける場所。
内容
src 属性がある場合は、0個以上の<track> 要素、それに続くメディア要素（audio、video）を除いた親要素に入れられる要素。src 属性がない場合は、0個以上の<source> 要素、または0個以上の<track> 要素、それに続くメディア要素を除いた親要素に入れられる要素。
属性
src="URL"
音声データのURLを指定します。
crossorigin=""
音声データが他のドメインに存在する場合にクロスドメイン通信を行うためのCORS（Cross-Origin Resource Sharing）リクエストの設定をします。 参考：http://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute

preload="auto|none|metadata"
プリロード、どの程度データのバッファリングの必要があるかのヒントをキーワードで指定します。指定できる値は以下3つのキーワードです。
auto（またはpreloadのみ）ファイル全体のダウンロードを始めるべきと指示します。
none再生を開始するなどコントロールをアクティブにするまではプリロードすべきでないと指示します。
metadataメタデータ（サイズ、最初のフレーム、トラックリスト、再生時間など）だけをプリフェッチし、ほかはコントロールをアクティブにするまではダウンロードすべきでないと指示します。
参考：https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-media-preload
autoplay[="autoplay"]
ページがロードされると自動的に再生を開始します。
mediagroup="メディア要素のグループ名"
<mediagroup> 要素は、暗黙的にMediaController（メディア要素のコントローラ）を作成し、同じ値を持つ複数のメディア要素をリンクするために使用します。
loop[="loop"]
ループ再生されます。
muted[="muted"]
デフォルト状態でミュートに設定します。潜在的にユーザー設定をオーバーライドする可能性があります。
controls[="controls"]
再生・停止・音量などのコントローラを表示します。
グローバル属性

accesskey, autocapitalize, autofocus, class, contenteditable, data-*, dir, draggable, enterkeyhint, hidden, id, inputmode, is, itemid, itemprop, itemref, itemscope, itemtype, lang, nonce, spellcheck, style, tabindex, title, translate

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 › audio</title>
</head>
<body>
<h1>HTML5 › audio</h1>


<audio src="https://emwai.jp/files/reference/html5/iStock_000016792876.mp3" preload autoplay loop controls id="mp3"></audio>

<p>
<span id="pause">停止</span> ｜
<span id="play">再生</span>
</p>

<script>
var mp3 = document.getElementById('mp3');
mp3.volume = .75;

document.getElementById('pause').addEventListener('click', function(){
  mp3.pause();
});
document.getElementById('play').addEventListener('click', function(){
  mp3.play();
});
</script>
</body>
</html>