HTML5で音楽を流す方法 #HTML5

サイトやアプリで音楽が流れるようにしたいと思い、その方法を調べてできた方法を備忘録として残します。

HTML5には音楽を流すようにするaudioタグというものがあります。

準備するのはhtmlファイルと今回はmp3の拡張子の音楽ファイルです。

ターミナル

$ mkdir hoge
$ cd hoge
$ touch index.html

と簡単にhogeディレクトリとindex.htmlを準備して、hogeディレクトリの中に好きなmp3の音楽を入れましょう。

次にindex.htmlの中身を以下のように書きます。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utg-8">
  <title>hoge</title>
</head>
<body>
  <audio src="sample.mp3" controls></audio>
</body>
</html>

これでhtmlファイルを開き、以下のように表示されたら成功です。

これでアプリで音楽を流すことができました。