感想はじめに今回のD.M.C.【デベメモドットコム】の記事は「HTML5のaudio要素の使い方」ということで、HTML5のaudio要素を詳しくメモ(解説)していきます。管理人の僕も中々使う機会がなく、今回別で新しくサイトを作成する際に使う機会が巡ってきたので、色々と調べた内容をメモしておきたいと思います。audio要素を使用したデモを見てみましょう。デモはこちらaudio要素とはaudio要素はHTML5から追加された要素で、一昔前のFlashやプラグインなんかを使わなくても音楽【オーディオ・ファイル】を再生することができる要素です。audioの使い方audioタグの使い方はいたってシンプルです。audioタグのsrc属性にオーディオファイルを指定して読み込ませるだけです。再生ボタンや音量の調節などを操作したい場合は下記のコードのようにcontrols属性を一緒に指定する事で初めのDemoでみたインターフェイスが自動で表示されます。controls></audio>audio要素は上記で説明したcontrols属性だけではなく、様々な属性が用意されています。下記がaudio要素の属性一覧です。【認証ありブラウザごとのファイルの用意タイトルにもあるように、ここで一つ注意しなければいけない事があります...それはaudio要素で指定するファイル形式はブラウザごとによって再生されない場合があり、そのためにブラウザの対応状況ごとに適切なファイルを複数指定することが必要になってきます。オーディオファイルにも様々な形式があるのですが、調べたところMP3形式/WAV形式のファイル二つあれば主要なブラウザはだいたい対応できるとの事だったので、今回はこの二つの形式を用意するためのツールも一緒に紹介したいと思います。用意するには色々なツールや、やり方があると思いますが、今回はその中から二つのツールを紹介したいと思います。mp3】というサイトです。こちらはyoutubeにアップされているURLを入力するだけでmp3ファイルに変換してダウンロードできる超絶便利なサイトです。このツールのいい所はなにより、いちいちアプリをダウンロードしなくても欲しい時に、さくっとURLを指定してファイルをダウンロードする事ができるところです。mp3サイトはこちら二つ目に紹介するのは【media.io】というサイトです。mp3】と同じなんですが、こちらはファイルをアップロードして変換してくれるツールです。いいところは様々な形式にファイルを変換してさっとダウンロードできるので重宝すると思います。複数ファイルを指定するためにはsource要素を使用します。これも使い方は凄くシンプルで先ほどのaudio要素の子要素としてsource要素を指定していきます。source要素のsrc属性にファイルパスを指定してファイルごとにsouce要素を作っていきます。type="audio/wav"></audio>これでブラウザごとに適切なファイルが読み込まれる事になり、ちゃんと再生する事ができます。source要素はaudio要素ほど属性は多くはないのですが、一応紹介しておきます。下記がsource要素の属性一覧です。感想なんかウェブページで音楽を再生するのは、管理人の僕自身、勝手に難しそうというイメージがあったのですが、audio要素の使い方自体はすごくシンプルで思ったより簡単で使いやすいと思いました。これからきっと使う事も多くなってくると思うので、今回のこの記事で完璧ではないですが、さくっとまとめれたので良かったと思います。次回はこのaudio要素とjavascript(jQuery)なんかを一緒に組み合わせて色々と応用してみたいと思います。その他、関連する事まで出来るだけわかりやすく備忘録としてメモを残していくブログです。このブログを通して少しでも為になる情報を発信して皆さんと共有できればとても嬉しいです。デベメモドットコムページトップへCategoriesHTMLjavascriptPHPLinuxその他VimApacheTagsApacheChromeHTMLjavascriptjQueryLinuxMacPHPUNIXVimwebWordPressコマンドツールプラグインプログラミング学習サイト。