はじめに

今回のD.M.C.【デベメモドットコム】の記事は「HTML5のaudio要素の使い方」ということで、HTML5のaudio要素を詳しくメモ(解説)していきます。

管理人の僕も中々使う機会がなく、今回別で新しくサイトを作成する際に使う機会が巡ってきたので、色々と調べた内容をメモしておきたいと思います。

まずaudio要素を使用したデモを見てみましょう。

デモはこちら

audio要素とは

audio要素はHTML5から追加された要素で、一昔前のFlashやプラグインなんかを使わなくても音楽【オーディオ・ファイル】を再生することができる要素です。

audioの使い方

audioタグの使い方はいたってシンプルです。

audioタグのsrc属性にオーディオファイルを指定して読み込ませるだけです。

もし再生ボタンや音量の調節などを操作したい場合は下記のコードのようにcontrols属性を一緒に指定する事で初めのDemoでみたインターフェイスが自動で表示されます。

<audio src="music/cool.mp3" controls></audio>

audio要素は上記で説明したcontrols属性だけではなく、様々な属性が用意されています。

下記がaudio要素の属性一覧です。

ブラウザごとのファイルの用意

タイトルにもあるように、ここで一つ注意しなければいけない事があります…それはaudio要素で指定するファイル形式はブラウザごとによって再生されない場合があり、そのためにブラウザの対応状況ごとに適切なファイルを複数指定することが必要になってきます。

オーディオファイルにも様々な形式があるのですが、調べたところMP3形式/WAV形式のファイル二つあれば主要なブラウザはだいたい対応できるとの事だったので、今回はこの二つの形式を用意するためのツールも一緒に紹介したいと思います。

用意するには色々なツールや、やり方があると思いますが、今回はその中から二つのツールを紹介したいと思います。

まず一つ目に紹介するのは【YouTube mp3】というサイトです。

こちらはyoutubeにアップされているURLを入力するだけでmp3ファイルに変換してダウンロードできる超絶便利なサイトです。

このツールのいい所はなにより、いちいちアプリをダウンロードしなくても欲しい時に、さくっとURLを指定してファイルをダウンロードする事ができるところです。

CLOSE / 閉じる

YouTube mp3サイトはこちら

二つ目に紹介するのは【media.io】というサイトです。

こちらもいちいちアプリをダウンロードしなくてもいいところは先ほどの一つ目に紹介した【YouTube mp3】と同じなんですが、こちらはファイルをアップロードして変換してくれるツールです。

いいところは様々な形式にファイルを変換してさっとダウンロードできるので重宝すると思います。

CLOSE / 閉じる

media.ioサイトはこちら

複数ファイルの指定方法

複数ファイルを指定するためにはsource要素を使用します。

これも使い方は凄くシンプルで先ほどのaudio要素の子要素としてsource要素を指定していきます。

source要素のsrc属性にファイルパスを指定してファイルごとにsouce要素を作っていきます。

<audio preload="auto" controls>
    <source src="music/cool.mp3" type="audio/mp3">
    <source src="music/cool.wav" type="audio/wav">
</audio>

これでブラウザごとに適切なファイルが読み込まれる事になり、ちゃんと再生する事ができます。

source要素はaudio要素ほど属性は多くはないのですが、一応紹介しておきます。

下記がsource要素の属性一覧です。

感想

なんかウェブページで音楽を再生するのは、管理人の僕自身、勝手に難しそうというイメージがあったのですが、audio要素の使い方自体はすごくシンプルで思ったより簡単で使いやすいと思いました。

これからきっと使う事も多くなってくると思うので、今回のこの記事で完璧ではないですが、さくっとまとめれたので良かったと思います。

次回はこのaudio要素とjavascript(jQuery)なんかを一緒に組み合わせて色々と応用してみたいと思います。