audioタグ

audioタグについて調べましょう。

audioタグは単語の通りにオディオ（音）を再生する時に使うタグです。
昔はウェブブラウザが動画を支援してなかったので色々アプリを別に設置してから使うことができましたが
HTML5が登場してから動画はオデオタグを利用して簡単に再生することが出来ました。

audioタグの使い方

<audio src="オディオの住所">
    ここでウェブブラウザがHTML5のオデオタグを支援しない場合出力する内容を書きます。
</audio>

次はソースを確認して見ましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <audio src="https://www.coreasur.com/material/audio/disneyTour.m4a">
        このウェブブラウザがHTML5のオデオタグに対応してないです。
    </audio>
</body>
</html>

結果を確認したら何も見えないですね。実は色々のオプションが必要です。

上のコードの結果

では、audioタグに使うオプションについて説明します。

audioタグのオプション

controls : コントローラーの表示
autoplay : 自動再生
loop : リピート再生
width : widthの長さ
height : heightの長さ
muted : ミュート

では、controlsから使ってみましょう。

controlsの使い方

<audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls>
    ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
</audio>

audioタグに　controlsを書くことだけです。　では、結果を確認しましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls>
        ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
    </audio>
</body>
</html>

上のコードの結果

結果を確認するとコントローラーが見えます。
次はautoplayオプションを使ってみましょう。

autoplayの使い方

<audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls autoplay>
    ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
</audio>

オディオタグに　autoplayを書くことだけです。　では、結果を確認しましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls autoplay>
        ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
    </audio>
</body>
</html>

オディオが自動に流れますね。
次はwidthとheightを利用し大きさを調節しましょう。

widthとheightの使い方

<audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls autoplay　width=300 height=200>
    ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
</audio>

widthとheightの中で一つだけ使うとバランスに合わせて大きさが自動に調節されます。ではコードを利用し結果をみてみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <audio src="https://www.coreasur.com/material/audio/disneyTour.m4a"　controls autoplay　width=300 height=200>
        ここでウェブブラウザがHTML5のオディオタグを支援しない場合出力する内容を書きます。
    </audio>
</body>
</html>