HTMLに音楽再生プレイヤーを埋め込む方法/audioタグの使い方

CSSやJavaScriptを使用しないでも、画像と同じように参照することでhtmlから音楽を再生することが可能です。

audioタグの使い方

srcでファイル名を参照することで音楽再生が可能です。タグの間に文字を入れた場合は、audioタグ未対応のブラウザの場合に表示されます（省略可）。
IE8以前は再生できないようです。その他は大体のブラウザで再生できるはずですが、できなかった時用にダウンロードリンクをタグの中に入れておくと安心といえば安心です。ちなみに、audioタグはブラウザによってかなり見た目が変わります。

<！-- html -->
<audio src="door-wood-knock1.mp3" controls></audio>

主な属性

ループ再生

<！-- html -->
<audio src="water-drop2.mp3" controls loop></audio >

loop属性を追記することで、音源が自動でループ再生されるようになります。

自動再生

<！-- html -->
<audio src="pencil-roll1.mp3" controls autoplay></audio >

このページを開いたときに鉛筆を転がす音がしたと思いますが、autoplay属性を付けることで自動的に音源を再生することが可能です。ループさせることもできますし、controlを付けないことで、自動で音楽再生がされ、ユーザが操作できない状態を作ることができます。ただし、音楽が勝手に再生されるサイトはネガティブな印象を訪問客に与える可能性が高いです。

ダウンロード不可

<！-- html -->
<audio src="drum-japanese1.mp3" controls controlsList="nodownload"></audio >

Google chromeではaudioタグにダウンロードリンクが表示されますが、controlsList=”nodownload”を付けることで非表示にすることができます（コードに書いてないですが、音源借り物なのでこのページのプレイヤーは全て付けてあります）。chromeでダウンロードしても良い場合は普通にaudioタグ書けば表示されます。

HTMLの便利な使い方・タグ逆引きリファレンス

ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

sunagitsune.com

2019.01.27