音声を再生する

HTML5ではaudioタグを使うことで音声を再生することができるが、So-netブログでは何ができるのか試してみる。

まずはmp3ファイルをアップロードして、簡単なテストから、、、

イメージを表示させるのと同じ方法で記事を作成してみる。


アニメ「のんのんびより」より




So-net ブログで自動生成されるコードは、こうなる。

<a href="nyanpass.mp3" class="audio-link">にゃんぱすー</a>

class="audio-link" として音声を再生してくれるようです。

結果は、このとおり。

再生できない場合、ダウンロードは🎵こちら

次に、audio タグを直接記述してみる。

<audio src="nyanpass.mp3" controls>
    <p>audioタグをサポートしたブラウザが必要です</p>
</audio>

controls属性で、再生・停止などの制御を行うコントローラを表示する。
※HTML5から追加されたaudioタグをサポートしていないと再生できません。




audioタグの属性

属性名	説明
src	再生対象の音声ファイルを指定する。
autoplay	ウェブページを読み込んだ時点で音声を自動再生する。省略時は自動再生しない。
preload	ウェブページを読み込んだ時点で音声を読み込む。*1
loop	ループ再生する。省略時はループ再生しない。
controls	再生・停止などの制御を行うコントローラを表示する。省略時は非表示。

*1
preload属性に指定可能な値は以下のようなものがあります。
　none : 音声ファイルを事前に読み込まない
　metadata : メタデータのみ取得する（音声の再生時間や、動画のサイズ、1フレーム目の画像など）
　auto : 音声ファイルを事前に読み込む
省略時、代表的なブラウザではautoが選択されるようです。

---
音源は、以下のサイトから引用させていただきました。
http://nyanpass.com/





Ads by Google

タグ：HTML5 AUDIO タグ